/* =========================
   GLOBAL
========================= */

*{
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{

    margin:0;
    background:#f5f6fa;
    color:#111;

}


/* =========================
   APP LAYOUT
========================= */

.app{

    display:flex;
    min-height:100vh;

}



/* =========================
   SIDEBAR
========================= */

.sidebar{

    width:300px;

    background:white;

    border-right:1px solid #e5e5e5;

    padding:35px 30px;

    position:fixed;

    height:100vh;

}


.sidebar h1{

    font-size:26px;
    margin:0;

}


.tagline{

    margin-top:10px;
    color:#777;
    font-size:14px;

}


nav{

    margin-top:50px;

    display:flex;
    flex-direction:column;
    gap:18px;

}



.menu{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:14px;

    border-radius:12px;

    color:#555;

}



.menu.active{

    background:#111;
    color:white;

}



.menu span{

    background:#eee;

    padding:3px 8px;

    border-radius:20px;

    font-size:12px;

}



/* =========================
   MAIN CONTENT ALIGNMENT
========================= */


.main{

    margin-left:300px;

    width:calc(100% - 300px);

    padding:50px 45px;

}


/* =========================
   HEADER
========================= */


.small-title{

    color:#777;

    letter-spacing:5px;

    font-size:13px;

    margin-bottom:15px;

}



header h2{

    font-size:42px;

    margin:0 0 45px;

}



/* =========================
   ADD ASSIGNMENT BOX
========================= */


/* =========================
   ADD ASSIGNMENT BOX
========================= */

.main{

    margin-left:260px;

    width:calc(100% - 260px);

    padding:50px 45px;

}



.add-box h3{

    margin-top:0;

    font-size:24px;

}


.form{

    display:flex;

    flex-direction:column;

    gap:14px;

}


input,
textarea,
select{

    width:100%;

    padding:14px;

    border-radius:12px;

    border:1px solid #ddd;

    font-size:15px;

}


textarea{

    height:120px;

    resize:none;

}


.row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}


button{

    width:100%;

    padding:15px;

    border:none;

    border-radius:12px;

    background:#111;

    color:white;

    cursor:pointer;

}



/* =========================
   ASSIGNMENTS
========================= */


.section-title{

    margin-bottom:25px;

}



.section-title h3{

    font-size:24px;

}



#assignments{


    width:100%;

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(300px,1fr));

    gap:25px;

}



.assignment{

    background:white;

    padding:25px;

    border-radius:18px;

    box-shadow:
    0 8px 20px rgba(0,0,0,0.06);

}



.assignment h4{

    margin:0 0 15px;

}



.assignment p{

    color:#555;

}



.status{

    display:inline-block;

    padding:7px 15px;

    border-radius:20px;

    background:#eee;

}



/* =========================
   EMPTY STATE
========================= */


.empty{

    background:white;

    width:100%;

    height:150px;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:#777;

}



/* =========================
   UPDATE DELETE
========================= */


.buttons{

    display:flex;

    gap:15px;

    margin-top:20px;

}



.delete{

    background:#d93025;

}



/* =========================
   RESPONSIVE
========================= */


@media(max-width:900px){


.sidebar{

    position:relative;

    width:100%;

    height:auto;

}



.app{

    display:block;

}



.main{

    margin-left:0;

    width:100%;

    padding:30px 20px;

}



.add-box{

    width:100%;

}



header h2{

    font-size:32px;

}


}



@media(max-width:600px){


.row{

    grid-template-columns:1fr;

}


}