* {
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

:root {
    /* Background colors */
     --color-bg: #090d14;
     --color-column: #111827;
     --color-card: #1f2937;            
  --color-card-hover: #374151;    
  --color-modal:  #071023;

  /* Text Color */
   --color-text: #f8fafc;

   /* Button color */
   --btn-primary-bg: #3b82f6;
  --btn-primary-hover: #2563eb;

  /* Delete Button color */
   --btn-secondary-bg: #ee6945;
  --btn-secondary-hover: #e7490a;

   /* Border color */
   --color-border: #334155;
   --color-border-light: #475569;

   /* Border radius */
   --border-radius-s:3px;
   --border-radius-m:5px;

   /* padding */
   --padding-xs:0.5rem;
   --padding-s:0.75rem;
   --padding-m:1rem;
   --padding-l:1.25rem;
   --padding-xl:1.5rem;
   --padding-xxl:2rem;

     
}

/* body {
    min-height: 100vh;
} */

.container {
    width:100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg);
    color:var(--color-text);
    padding:var(--padding-l);
    gap:var(--padding-xl);
}

.header {
    width:100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-s);
}

.nav {
    position: sticky;
    top:0;
    background-color: var(--color-bg);
}

/* Button styling */
button {
    padding: var(--padding-xs) var(--padding-s);
    background-color: var(--btn-primary-bg);
    border-radius: var(--border-radius-m);
    color:var(--color-text);
    cursor: pointer;
}

button:hover {
    background-color: var(--btn-primary-hover);
}

.board {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex:1;
}



.taskColumn {
    
    width:32%;
    padding:var(--padding-s);
    min-height: 100%;
    background-color: var(--color-column);
    transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
    display: flex;
    flex-direction: column;
    gap:20px;
}

.taskColumn.hoverOver {
    scale:1.05;
}



/* Task card styling */
.task {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--padding-m);
    background-color: var(--color-card);
    border-radius: var(--border-radius-s);
    cursor: grab;
}

.task.draggedTask {
    opacity: 1;
}

.task div {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.task button {
    background-color: var(--btn-secondary-bg);
    border: none;
    outline: none;
}

.task button:hover {
    background-color: var(--btn-secondary-hover);
}

/* Modal styling */
.modal {
    height:100vh;
    width:100vw;
    position: fixed;
    top:0;
    left:0;
    display: none;
    justify-content: center;
    align-items: center;
}

.modal.active {
    display:flex;
}

.center {
    display: flex;
    width:25%;
    flex-direction: column;
    padding: var(--padding-xxl);
    gap:var(--padding-m);
    z-index: 10;
    background-color: var(--color-modal);
    border-radius: var(--border-radius-m);
}

.center input, .center textarea, .center button{
    border: none;
    outline:none;
    padding: var(--padding-s) var(--padding-m);
    
    color:var(--color-text);
    border-radius: var(--border-radius-s);
}

.center input, .center textarea{
    background-color: var(--color-card);
}

.bg {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: #1f29373b;
    backdrop-filter: blur(5px);
}
/* Optimization for mobile screens */
@media only screen and (max-width: 600px) {
    .board {
        flex-direction: column;
        gap:15px;
    }

    .taskColumn {
        width:100%;
    }

    .center {
        width:80%;
    }
}

@media screen and (max-width:48rem) {
    .taskColumn{
        min-height: 200px;
    }
    
}