*{
    padding: 0%;
    margin: 0%;
}
body{
    background: whitesmoke;
}

/* anchor tag */
a{
    text-decoration: none;
    color: black;
}


/* login-form-container */
.login-form-container{
    width: 100vw;
    height: 100vh;
    top: 0%;
    display: none;
    justify-content: center;
    align-items: center;
    cursor: default;
    position: fixed;
    z-index: 20;
    transition: 0.5s ease-in-out;
    background-color: white;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.95;
    filter: drop-shadow(10px);
    backdrop-filter: blur(5px);
}
.login-form-container.active{
    display: flex;
}
.login-form-container .login-form-content{
    display: block;
    background: white;
    width: 40vw;
    border: none;
    border-radius: 10px;
    box-shadow: 2px 5px 5px 4px rgb(231, 231, 231), -2px 5px 5px 4px rgb(231, 231, 231);
    padding: 20px 20px 0px 20px;
}

/* form heading */
.login-form-container .login-form-content .form-heading{
    display: flex;
    justify-content: space-between;
    margin-block: 15px;
}
.login-form-container .login-form-content.form-heading{
    cursor: default;
    display: block;
}
.login-form-container .login-form-content .form-heading img{
    width: 100px;
    height: 100px;
}
/* close-button */
.login-form-container .login-form-content .close-button{
    display: block;
    justify-content: flex-end;
    margin: 5px;
}
.login-form-container .login-form-content .close-button button{
    padding: 0px;
    cursor: pointer;
    border: none;
    background: white;
    font-size: 2rem;
    font-family: sans-serif;
    font-weight: bold;
    transition: 0.1s ease-in-out;
}

.login-form-container .login-form-content .close-button button:hover{
    cursor: pointer;
    border: none;
    background: white;
    color: red;
    font-size: 2rem;
}

.login-form-container .login-form-content .form{
    display: flex;
    justify-content: center;
    margin-block: 10px 30px;
}
.login-form-container .login-form-content .form form{
    display: block;
    width: 50%;
}
.login-form-container .login-form-content .form form h1{
    text-align: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin-block-end: 25px;
    color: dodgerblue;
    font-weight: bold;
}
.login-form-container .login-form-content .form form #res{
    color: red;
    text-align: center;
    font-family: sans-serif;
    font-size: 11px;
    margin-block-end: 5px;
    transition: 0.5s ease-in-out;
}
.login-form-container .login-form-content .form form .input-group{
    display: flex;
    flex-direction: column;
    margin-block: 15px;
}
.login-form-container .login-form-content .form form .input-group label{
    margin-bottom: 3px;
    font-size: 14px;
    color: grey;
    position: absolute;
    padding-inline: 10px;
    padding-block: 2px;
    transition: 0.3s ease-in-out;
}
.login-form-container .login-form-content .form form .input-group input{
    padding: 2px;
    width: 100%;
    border: 0.1px solid white;
    border-radius: 10px;
    color: blue;
    background: white;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin-block-end: 5px;
    transition: 0.3s ease-in-out;
}

.login-form-container .login-form-content .form form .input-group input:hover{
    border: 0.1px solid dodgerblue;
}
.login-form-container .login-form-content .form form .input-group input:focus + label, .login-form-container .login-form-content .form form .input-group input:not(:placeholder-shown) + label{
    transform: translateY(-20px);
    font-size: 14px;
}

.login-form-container .login-form-content .form form .submit-button{
    display: flex;
    justify-content: flex-end;
    margin-block: 15px;
}
.login-form-container .login-form-content .form form .submit-button button{
    padding: 2px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background: dodgerblue;
    margin-block: 15px;
    color: white;
    width: 100%;
}
.login-form-container .login-form-content .form form .submit-button button:hover{
    padding: 2px;
    border: 0.1px solid dodgerblue;
    border-radius: 5px;
    cursor: pointer;
    background: white;
    color: dodgerblue;
}



/* 768px screen resolution */
@media(max-width: 768px){    


    /* login-form-container */
    .login-form-container{
        width: 100vw;
        height: 100vh;
        top: 0%;
        display: none;
        justify-content: center;
        align-items: center;
        cursor: default;
        position: fixed;
        z-index: 20;
        transition: 0.5s ease-in-out;
        background-color: white;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        opacity: 0.95;
        filter: drop-shadow(10px);
        backdrop-filter: blur(5px);
    }
    .login-form-container.active{
        display: flex;
    }
    .login-form-container .login-form-content{
        display: block;
        background: white;
        width: 80vw;
        border: none;
        border-radius: 10px;
        box-shadow: 2px 5px 5px 4px rgb(231, 231, 231), -2px 5px 5px 4px rgb(231, 231, 231);
        padding: 20px 20px 0px 20px;
    }
    
    /* form heading */
    .login-form-container .login-form-content .form-heading{
        display: flex;
        justify-content: space-between;
        margin-block: 15px;
    }
    .login-form-container .login-form-content.form-heading{
        cursor: default;
        display: block;
    }
    .login-form-container .login-form-content .form-heading img{
        width: 70px;
        height: 70px;
    }
    /* close-button */
    .login-form-container .login-form-content .close-button{
        display: block;
        justify-content: flex-end;
        margin: 5px;
    }
    .login-form-container .login-form-content .close-button button{
        padding: 0px;
        cursor: pointer;
        border: none;
        background: white;
        font-size: 2rem;
        font-family: sans-serif;
        font-weight: bold;
        transition: 0.1s ease-in-out;
    }
    
    .login-form-container .login-form-content .close-button button:hover{
        padding: 0px;
        cursor: pointer;
        border: none;
        background: white;
        color: red;
        font-size: 2rem;
    }
    
    .login-form-container .login-form-content .form{
        display: flex;
        justify-content: center;
        margin-block: 10px 30px;
    }
    .login-form-container .login-form-content .form form{
        display: block;
        width: 80%;
    }
    .login-form-container .login-form-content .form form h1{
        text-align: center;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        margin-block-end: 15px;
        color: dodgerblue;
        font-weight: bold;
    }
    .login-form-container .login-form-content .form form #res{
        color: red;
        text-align: center;
        font-family: sans-serif;
        font-size: 11px;
        margin-block-end: 5px;
        transition: 0.5s ease-in-out;
    }
    .login-form-container .login-form-content .form form .input-group{
        display: flex;
        gap: 15px;
        margin-block-end: 15px;
    }
    .login-form-container .login-form-content .form form .input-group input{
        padding: 2px;
        border: 0.1px solid white;
        color: blue;
        background: white;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }
    .login-form-container .login-form-content .form form input{
        padding: 2px;
        border: 0.1px solid white;
        color: grey;
        background: white;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }
    .login-form-container .login-form-content .form form .input-group input::placeholder{
        color: grey;
        border: 0.1px solid white;
        padding: 2px;
    
    }
    
    .login-form-container .login-form-content .form form .submit-button{
        display: flex;
        justify-content: flex-end;
    }
    .login-form-container .login-form-content .form form .submit-button button{
        padding: 2px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        background: dodgerblue;
        color: white;
    }
    .login-form-container .login-form-content .form form .submit-button button:hover{
        padding: 2px;
        border: 0.1px solid dodgerblue;
        border-radius: 5px;
        cursor: pointer;
        background: white;
        color: dodgerblue;
    }

    
}