.box-login{
    max-width: 700px;
    background: linear-gradient(135deg, #f8f8f8, #f3f0f0);
    border-top: 3px solid var(--blue-600);
    border-bottom: 3px solid var(--blue-600);
    border-left: 3px solid var(--blue-800);
    border-right: 3px solid var(--blue-800);
    border-radius: 12px;
    box-shadow: 0 4px 8px rgb(75, 73, 73), 0 6px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.5s ease-in-out;
    &:hover{
        box-shadow: 0 15px 15px rgba(0, 0, 0, 0.9), 0 15px 15px #262525;
        transform: translateY(-5px);
    }
    & input:hover{
        background: rgb(243, 240, 240);
        box-shadow: 3px 4px 8px rgb(75, 73, 73), 3px 6px 20px rgba(0, 0, 0, 0.1);
    }
    & .btn:hover{
        box-shadow: 0 5px 8px rgb(75, 73, 73), 0 6px 20px rgba(0, 0, 0, 0.1);
    }
}

@keyframes horizontalFlip {
    0%, 47%, 100% {
        transform: rotateY(0deg);
        color: #575957;
    }
    48% {
        color: #232322;
    }
    50% {
        transform: rotateY(360deg);
        color: #575957;
    }
    97% {
        transform: rotateY(360deg);
        color: #626161;
    }
}

.loginBox{
    margin-top: -7rem;
}

.bi-shield-shaded {
    display: inline-block;
    animation: horizontalFlip 30s infinite linear;
}

@media(width > 3800px){
    .loginBox .h3
    {
        font-size: 200%;
    }
    .loginBox label,
    .loginBox button
    {
        font-size: 130% !important;
    }
}