*{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
}
body{
        height: 100vh;
        width: 100%;
}

html{
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

:root{   /* css variable or custom properties*/
        
        /* --background-color: #000000; */
        --bg-color: #000000;   /* short variable name*/
        --bg-button-colour:#243c09;
        --background-task-colour:#212c26;
        --primary-text-color:#e7e7e7;

        /* Padding Variables*/
        --nav-padding: 15px 30px;
        --section-padding: 15px 30px;
        --padding-s: 5px;
        --padding-m: 10px;
        --padding-l: 15px;
        --padding-xl: 20px;
        --padding-xxl: 30px;    

        /* border-radius-variable */
        --border-radius-s: 5px;
        --border-radius-l: 10px;
        --border-radius-m: 15px;
        --border-radius-xl: 20px;
        --border-radius-xxl: 30px;


}
body{
        background-color: var(--bg-color);
        color: var(--primary-text-color);
}

main{
        height: 100vh;
        display: flex;
        flex-direction: column;
}

nav{
        padding: var(--nav-padding);
        display: flex;
        align-items: center;
        justify-content:space-between;
        position: sticky;
        top: 0;
        background-color: var(--bg-color);
}

nav button{
        background-color: var(--bg-button-colour);
        border:none;
        outline: none;
        color: var(--primary-text-color);
        padding: var(--padding-m) var(--padding-l);
        cursor: pointer;
        border-radius: var(--border-radius-m);
}

section{
        padding:var(--section-padding);
        display: flex;
        flex-grow: 1;
        justify-content:space-between;
        gap: var(--padding-xxl);
}
 
section .task-column{
        background-color: rgb(18, 19, 18);
        flex-grow: 1;
        width: 100%;
        padding: var(--padding-m);
        display: flex;
        flex-direction: column;
        gap: var(--padding-m);
        border-radius: var(--border-radius-m);
        transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);

}

.task-column.hover-over{
    border: 2px solid #4CAF50;
    background-color: rgba(76, 175, 80, 0.1);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

section .task-column .heading{
        width:100%;
        display: flex;
        align-items:center;
        justify-content: space-between;
        padding: var(--padding-m);
}

section .task-column .task{
        background-color: var(--background-task-colour);
        padding: var(--padding-m);
        border-radius: var(--border-radius-m);
        display: flex;
        flex-direction: column;
        gap: var(--padding-s);
        cursor: grab;
}

.task-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.edit-btn{
        align-self: self-end;
        background-color: var(--background-task-colour);
        color: var(--primary-text-color);
        cursor: pointer;
        padding: var(--border-radius-s) var(--border-radius-m);
        /* border:none */
        border-radius: var(--border-radius-s) var(--border-radius-m);
        border: #000 outset;
        outline:none;
}
.delete-btn{
        align-self: self-end;
        background-color: var(--bg-button-colour);
        /* color: var(--primary-text-color); */
        cursor: pointer;
        padding: var(--border-radius-s) var(--border-radius-m);
        border-radius: var(--border-radius-s) var(--border-radius-m);
        border: #000 outset;
        outline:none;
}


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

.modal.active{
        display: flex;
}

.modal .bg{
        position:fixed;
        height: 100%;
        width:100%;
        background-color: rgba(67, 66, 66, 0.216);
        backdrop-filter: blur(7px);
}
.modal .center{
        background-color: #2c403c;
        padding: var(--padding-xxl);
        border-radius: var(--border-radius-m);
        display: flex;
        flex-direction: column;
        gap: var(--padding-m);
        z-index: 10; 
}

.modal .center input, .modal .center textarea, .modal .center select{
        background-color: var(--background-task-colour);
        border: none;
        outline: none;
        color: var(--primary-text-color);
        padding: var(--padding-m);
        border-radius: var(--border-radius-s);
} 

.modal .center button{
        background-color: var(--bg-color);
        border: none;
        outline:none;
        color: var(--primary-text-color);
        padding: var(--padding-m) var(--padding-l);
        cursor: pointer;
        border-radius: var(--border-radius-m);
        align-items: flex-end;
        width: fit-content;
        align-self: center;
} 


/* ==========================
   TABLET RESPONSIVE
   ========================== */
@media (max-width: 768px) {
    nav {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    section {
        flex-direction: column;
        gap: 15px;
    }
}


/* ==========================
   MOBILE RESPONSIVE
   ========================== */
@media (max-width: 480px) {
    nav .left {
        font-size: 1.2rem;
    }

    nav button {
        width: 100%;
    }

    .modal .center {
        width: 90%;
    }
}