*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

body{
    background-color: #1a2032;
    
}

.navbar,.sidebar,.main-content,.footer{
    display: flex;
    justify-content: center;
   
    
    border:0.2vw solid black;
}
.sidebar,.footer{
     align-items: center;
    text-align: center;
}

.container{
  
    display: grid;
    grid-template-columns: 17vw 83vw;
    grid-template-rows:12vh 90vh 10vh;
    grid-auto-rows:30vh;
    grid-template-areas:
    "navbar navbar"
    "sidebar main-content"
    "footer footer"
    ;
}
/*Navbar Section*/

.navbar{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    margin:auto;
    list-style-type:none;
   background-color: rgb(165, 126, 158);
    grid-area:navbar;
    height:15vh;
    width:100vw;

}

/*Nav (Left Side)*/

.logo-container{
    display: flex;
    flex-direction: row;
    gap:1vh;
}

.logo{
    
    margin-left:1.3vh;
   margin-bottom: 1.5vh;
}
.logo-text{
    font-size:2.3vw;
    font-weight:bold;
  
    
}



/*Nav (Right Side)*/

.logo-2-container{
    display: flex;
    flex-direction: row;

    margin-right:2vw;
}

.nav-img{
height:8vh;
width:5vw;
}




.question-img{
height:3vh;
margin-top:2.4vh;
}
#profile-img{
    margin-bottom:.1vh;
}

/*Navbar Section End*/



/*Body Section*/




/*Sidebar*/
.sidebar{
   background-color: rgb(200, 179, 200);
    grid-area:sidebar;
    display: flex;
    flex-direction: column;
  
    justify-content: space-evenly;
}

.sidebar-img{
    height:7vh;
width:5vw;
}
.sidebar-link{
display: flex;
flex-direction: row;
justify-content: space-between;
 text-decoration-line: none;
    color:black;
    font-size:2.2vw;
    font-weight:bold;
    background-color: aquamarine;
    padding:0.4vw;
    border-radius:.6vw;
    border:0.1vw solid black;
    width:15vw;
    align-items: center;

}

.todo-list-link{
    font-size:2vw;
}
/*Sidebar Ends*/

/*Main Content Section*/

.main-content{
    background-color: #000000;
    grid-area:main-content;
   display: flex;
   flex-direction: column;
   justify-content: start;
}

.main-content-header{
    margin-top:1vh;
    margin-bottom:1.5vh;
font-size:3vw;
justify-content: center;
text-align: center;
text-decoration-line: underline;
color:white;
}

.main-content-container{
    padding-left: 0.6vw;
    padding-right: 0.4vw;
 display: grid;
 grid-template-columns: 28vw 27vw 30vw;
 grid-template-rows:38vh 38vh;
grid-template-areas: 
"card-1 card-2 card-5"
"card-3 card-4 card-5"
;
    color:white;
  row-gap: 1vw;
  column-gap:1.5vh;
 
}
.card{
    
    background-color: rgb(68, 68, 96,0.8);
    display: flex;
    text-align:center;
    flex-direction: column;
    
}
.card-header{
    font-size:2vw;
    color:white;
    margin-top:1vh;

}

.card-1{
    grid-area:card-1;

}
.card-2{
      grid-area:card-2;
}
.card-3{
      grid-area:card-3;
}
.card-4{
      grid-area:card-4;
    
}
.card-5{
    display: flex;
    flex-direction: column;
   
    align-items: center;
    text-align: center;
    height:78.5vh;
    width:25vw;
      grid-area:card-5;
}

 

.screen-container{

    display:flex;

  
    flex-direction:column;
    border:0.5vw solid black;
    margin-bottom:3vh;
    width:23vw;
    height:27vh;
    float:right;
    
    margin-top:1.2vh;


}

.sound-img{
   height: 100%;
   width:100%;
}

.sound{

margin-bottom:2vh;
}

.noise-shield-container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap:3vh;
   
}

.noise-shield-text{
font-size:1vw;
}

.noise-shield-input{
height:4vh;

}

.sound-dropdown{

width:20vw;
height:5vh;
font-size:1vw;
margin-bottom:1vh;
}


.dropdown-label{
font-size:1.1vw;
}

.sound-dropdown-label{
    margin-top:1vh;
}
.focus-session-btn{
    height:7vh;
    width:13vw;
    font-size:1.2vw;
    border-radius:0.8vw;
    background-color: #10100f;
    color:white;
    margin-top:2vh;
    border:0.2vw solid black;
    justify-content: center;
    
}
/*Main Content Section Ends*/

/*Footer Section*/
.footer{
    background-color: rgb(100, 84, 133);
    grid-area:footer;
 
}

.footer-text{
    font-size:1.09vw;
}

.contact-badge{
    

}