main login page.css

html,body{
    height: 100%;
    width: 100%;
}
*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: black;
    font-weight: 700;
}
#main{
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    position: relative;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background-image: url(https://cdn.wallpapersafari.com/81/60/W1M7KR.jpg);
    background-size: cover;
    background-position: center;
}
#admin,#student{
    height: 110px;
    width: 100px;
}
nav{
    
    display: flex;
    justify-content: end;
    
    border-width: 12px;
    border-color: black;
    padding: 10px;
}
h1{
    position: relative;
    
    left: 1%;
    margin: 5px;
    
}
#loginbox{
    display: flex;
    height: 330px;
    width: 332px;
    background-color: #ffffff64;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    justify-content: center;
    border-width: 2px;
    border-radius: 27px;
    border-color: black;
}
#input{
    display: flex;
    flex-direction: column;
    align-items: center;
    
    margin-top: 20px;
    position: relative;
    top: 2%;
}
#detail-1,#detail-2{
    outline: none;
}
#check{
    position: absolute;
    top: 85%;
    left: 43%;
    transform: translate(-50%,-50%);
}
#detail-3{
    margin: 10px;
}
#detail-4{
    margin: 10px;
    position: absolute;
    left: 42%;
    top: 90%;
    transform: translate(-50%,0);
}
#icon{
    
    display: flex;
    width: 259px;
    height: 112px;
    justify-content: space-evenly;
}
#type{
    display: flex;
    position: relative;
    width: 259px;
}
#label1{
    position: absolute;
    left: 12%;
}
#label2{
    position: absolute;
    left: 63%;
}
a:hover{
    color: palevioletred;
}
a{
    text-decoration: none;
    font-size: 25px;

}
input:hover{
    border-radius: 27px;
    border-width: 5px;
    border-color: beige;
}
@media(max-width:347px){
    #loginbox{
        height: 301px;
        width: 281px;
    }
}