homepage.css

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400&display=swap');
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    background-color: aliceblue;
    width:100%;
   
}
header {
    height: 10%;
    width:100%;
    display:flex;
    flex-direction: row;
    justify-content: space-evenly;
    border-bottom: 1px solid blue;
    font-size: 18px;
}
#div_img{
    background-image: url('img/logo.png'); 
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    width:100%;
    float: left;
}
#div_date{
    height:100%;
    width:fit-content;
    display:flex; 
    text-align: center;
    align-items: center;
    justify-content: center;
 }
#div_title{
    display:flex;
    align-items: center;
    height:100%;
     width: fit-content; 
    justify-content:left ;
    }
#div_usr{
    display:flex;
    align-items: center;
    height:100%;
    }
#div_btn_head{
    display:flex;
    align-items: center;
    height:100%;
    padding: 0 1%;
    text-align: center;
    width:100%;
    }

.btn{
    font-size: 16px;
    padding: 1% 1%;
    border-radius: 30%;
    box-shadow: 2px 2px 3px 3px rgb(131, 131, 192);
    background-color: rgb(21, 138, 158);
    color: whitesmoke;
 }

 li{
    display:inline;
     }

 ul{
    display: flex;
    justify-content: space-evenly;
    width: 100%;
 }

 #div_head h1{
    font-size: 26px;
 }
 #cont_img{
    width:20%;
   }
 #cont_items{
    width:55%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
 }
 #cont_btn{
    width:25%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
     }

main{
padding-top: 40px;
background-image: linear-gradient(to bottom, rgba(188, 228, 245, 0.267), rgb(119, 167, 245));
padding-bottom: 1%;
}

#inputs{
display: flex;
flex-wrap: wrap;
justify-content: center;
}

#div_head h1{
    position: absolute;
    top: 30%;
    left: 45%;
    font-size: 26px;
    margin-top: 0.6%;
}

#usr{
    position: absolute;
    right: 20%;
    top: 30%;
    width:20%;
    display:flex;
}
#user_p{
    margin-top: 1%;;
    width: fit-content;
    top:0%;
    display:inline-block;
}

span{
    color: rgb(82, 71, 233);
    font-size: 20px ;
    font-style: italic;
}

.div_input_data{
    text-align: center;
    vertical-align: bottom;
    width: 18%;
    height: fit-content;
}

.hidden{
    display: none;
}

.cont_user_data{
    background-color: rgb(217, 243, 248);
    width: 98%;
    border: 2px solid blue;
    padding: 10% 5%;
    box-shadow: 2px 2px 3px 3px #737373;
    text-align: center;
    border-radius: 4%;
    align-items: center;
}

#div_profile{
    height:100%;
}

.div_s{
    margin-bottom: 10%;
}

.input_hm{
    margin-top: 15%;
    width:95%;
    text-align: left;
    }

.input_pr{
        margin-top: 18.5%;
        text-align: left;
        }
.input_s{
    margin: 10% 0;
    padding-bottom:10%;
}    

.inp{
    font-size:16px;
    width:100%;
 }

 .inp_s{
    width:90%;
    padding: 0 5%;
    margin: 1% 3%;
    font-size:16px;
 }

.lab_hm{
        margin-left: 2%;
        font-size: 16px;
        margin-bottom: 1%;
        display: block;
    }
/* #delShift{
    margin-top: 3%; 
    margin-left: 15%;
} */


#save_profile{
    margin: 10% 0;
}

.btn:hover{
        opacity: 0.5;
}

#div_table{
    display: block;
    margin: auto;
    width:fit-content;
    margin-top: 2%;
    visibility: hidden;
}

th{
    background-color: rgb(27, 74, 105);
    color: white;
    font-size: 22px;
    padding: 0.5%;
    width:10%;
}

tr{
  text-align: center;
  background-color: rgb(167, 227, 238);
  font-size: 18px;  
}

td{
   padding: 0.5%; 
}

.row:hover{
background-color: aquamarine;
}
#profitable{
    text-align: center;
    display: block;
    margin: auto;
    width:fit-content;
    margin-top: 1%;
    visibility: hidden;
    font-size: 20px;
}

footer{
    position: relative;
    height:25%;
}

footer p{
    position:absolute;
    font-size: small;
    bottom: 0;
    right: 0;
}

.radio{
    margin: 45% 12%;
    width:10%;
    display: inline;
}

#cont_prog{
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 30px;
    margin-top:0;
    margin-left: 5%;
 }
#cont_prog p{
     height:100%;
     margin-left:20%;
}
.outer{
    background-color: aliceblue;
    width:100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.inner{
    background-color: blue;
    width: 1%;
    height: 50%;
    position: absolute;
    top:0%;
    left:50%;
    border-radius: 100%;
}
#div_add{
    display: flex;
    align-items: center;
    justify-content: center;
    width:100%;
    padding-top:5%;
}
#adshft_btn{
    display: flex;
    place-items: center;
    width:29%;
}
#perc{
    margin-top:5%;
    font-size: 12px;
}

#div_btn_head{
    position: relative;
    height:100%;
    display:flex;
    width:100%;
    float:right;
}

#div_btn_head .btn{
     top: 28%;
}

#div_head_btn #search{
    clear: both;
    position: absolute;
    left:0%;
   }
#div_footer{
    height:3dvi;
    width:100%;
}

#radio_btns{
    width:100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

#cancel_profile{
    margin-left:20%;
}
@media screen and (min-width: 480px) and (max-width: 1100px){
    #div_head, #profitable, th, tr, .lab_hm, span, .inp, .inp_s, fieldset, #byId, #byDate, span{
        font-size: 10px;
    }
    #div_title{
        display:none;
    }
    .btn{
        box-shadow: none;
        font-size: 10px;
    }
    *{
        font-size: 10px;
    }
    #cont_prog p{
        height:70%;
        margin-bottom:2%;
        }
        .outer{
         width:70%;
       height: 70%;
      }
        #perc{
        font-size:10px;
        }
       .div_s{
        padding:0;
       } 
       fieldset{
        padding: 0;
       }
       .inp_s, .input_s{
        margin:0;
        padding:0;
       }
       #div_search, #div_profile, #div_shifts{
        width:fit-content;
       }
 }
 @media screen and (min-width: 360px) and (max-width: 479px){
    #div_head, #profitable, th, tr, .lab_hm, span, .inp, .inp_s, fieldset, #byID, #byDate, span{
        font-size: 7px;
    }
    *{
        font-size:7px;
    }
    #div_title{
        display:none;
    }
    .btn{
        box-shadow: none;
        font-size: 8px;
    }
    
    header{
        height:5%;
    }
    #div_search, #div_profile, #div_shifts{
        width:fit-content;
       }
       footer p{
        font-size:6px;
    }
 }

 @media screen and (min-width: 100px) and (max-width: 359px){
    #div_head, #profitable, th, tr, .lab_hm, span, .inp, .inp_s, fieldset, #byID, #byDate, span{
        font-size: 6px;
    }
    *{
        font-size:6px;
    }
    #div_title{
        display:none;
    }
    .btn{
        box-shadow: none;
        font-size: 5px;
    }
    
li{
    display:block;
}

ul{
    flex-direction: column;
    justify-content: space-between;
}
header{
    height:5%;
}
#div_search, #div_profile, #div_shifts{
    width:fit-content;
   }
footer p{
    font-size:5px;
}
 }