style.css

/* universal selector -> to do something with all boxes */
/* user agent stylesheet -> browser styling (provided by browser) */

/* REMOVING EXTRA MARGIN GIVEN BY BROWSER   */
body{ 
    /* /* border : 2px solid red; */
    margin : 0px; 
    font-family: sans-serif;
}
*{
    box-sizing: border-box;
}

.header-container{
    /* border : 1px solid black; */
    height : 6rem;
    background-color : #333;
    /* color : white; */
    display : flex;
    align-items : center;
    padding-left: 3rem;
}

/* common styling */
.header-container>*{
    background-color : #454444;
    height : 65%;
    border-radius: 6px;
}

.color-group_container {
    /*  % ->relative unit which derived it's value from the parent */
    width:30%;
    /* margin-left: 3rem; */
    margin-right : 3rem;
    display : flex;
    justify-content: space-evenly;
    align-items: center;
}

.color{
    height : 50%;
    width : 16%;
    border-radius : 6px;
}

.pink{
    background-color : lightpink;
}
.blue{
    background-color : lightblue;
}
.green{
    background-color : lightgreen;
}
.black{
    background-color : black;
}
/*--------- add cross container------- */
.add-cross_container, .lock-unlock_container {
    /* padding : .5rem; */
    width : 15%;
    display : flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 3rem;
    
}
.add-cross_container >*, .lock-unlock_container>*{
    width : 50%;
    height : 100%;
    /* background-color : red; */
    /* boldness */
    /* font-weight : lighter; */
    /* perfectly center an element inside a div */
    display : flex;
    justify-content: center;
    align-items: center;
}

/* icons are treated as text */
.tool_icons {
    font-size: 2.5rem;
    font-weight: 500;
}

.fa-plus{
    font-weight: 600;
}

.task_input {
    color : white;
    /* font-size: 100%; */
    font-size: 25px;
}
/* ---------------------------------Main container--------------------------------- */
.main-container{
    /* border : 1px solid green; */
    /* vw => 100% width of the visible screen(maximize or minimizev  ) -> 100vw */
    /* vh => 100% height of the visible screen -> 100vh */
    
    /* //below statement -> calc => adjust according to size of window */
    height : calc(100vh - 6rem);
    /* height : 100vh; */
    /* height : 90rem; */
    
    background-color :#d3d3d3;;
    display : flex;
    justify-content : space-evenly;
    /* align-items : center; */
    flex-wrap: wrap;
    padding : 4rem;
    /* to give gap between each elements -> like margin */
    overflow: auto;
    
}

.task_container {
    /* padding : 0.5rem; */
    background-color  : rgb(247, 241, 241);
    height : 10rem; 
    width : 15rem;
    /* gap :1rem; */
    margin: 0.5rem;
    
} 
.task_header {
    /* background-color: black; */
    height : 0.7rem;
}

.task_main-container {
    padding : 0.2rem;
    /* padding-top: 0.2rem; */
    height : 8rem;
    
}

.task_id {
    font-size : 1.7rem;
    color : rgb(150,144,144);
    /* top, bottom, right, left */
    margin : 0.5rem;
    margin-left : 0px;
    height : 20%;
} 

.text {
    height : 80%;
    font-size : 1.5rem;
    overflow-y : scroll;
}
/* to hide scroll bar */
.text::-webkit-scrollbar {
    display: none;
  }
/* copied from bootstrap*/
.shadow{
    box-shadow: 0 1rem 3rem rgb(22, 22, 22) !important;
}

.active{
    background-color: rgb(49, 46, 46);
}

/************************ MODAL CONTAINER **********************/
.modal_container{
    height : 20rem;
    width : 35rem;
    /* border: 2px solid black; */
    display : flex;
    position: fixed;
    /* perfectly center */
    top : calc(50% - 10rem);
    left : calc(50% - (35/2)rem);
    /* display: none; */

}
.modal-text_box{
    /* height : 100%; */
    width : 70%;
    background-color : white;
    padding : 3rem;
    font-size : 2rem;
    font-family: gill sans;
    box-sizing: border-box;
    overflow: auto;
}
.modal-color_box{
    /* height : 100%; */
    width : 30%;
    background-color : rgba(51, 51, 51);
    display : flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding : 2rem;
}

.modal-color_box>*{
    height : 2.5rem;
    width : 5rem;
}

.selected{
    border : 0.2rem solid white;
}

/* for responsiveness */
@media only screen and (max-width: 900px) {
    html{
        font-size : 10px;
    }
  }