.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 2px 4px rgba(75, 73, 73, 0.2), 0 4px 10px rgba(0, 0, 0, .4);
    transition: all 0.5s ease-in-out;

    &:hover {
        box-shadow: 0 5px 4px rgba(0, 0, 0, 0.2), 2px 5px 10px rgba(38, 37, 37, .6);
    }

    & input:hover {
        background: rgb(243, 240, 240);
        box-shadow: 1px 1px 1px rgba(75, 73, 73, 0.2), 1px 1px 1px rgba(0, 0, 0, 0.1);
    }

    & .btn:hover {
        box-shadow: 0 3px 6px rgba(75, 73, 73, 0.2), 0 4px 8px rgba(0, 0, 0, 0.05);
    }
}

@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 label,
    .loginBox button
    {
        font-size: 130% !important;
    }
}