/* Body and Page Background */
body {
    background-image: url(/images/backgrounds/background-login.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    background-color: #dceeff;
}

/* Account Container */
#account {
    border: 3px solid #bfe6fa;
}

/* Buttons */
.button-login {
    background-color: #2f81e6;
    color: white;
    border: 3px solid #2565b3;
    border-radius: 15px;
    padding: 0.75rem 1.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.6s ease, transform 0.3s ease;
}

    .button-login:hover {
        background-color: #4a9bf0;
        transform: translateY(-2px);
    }

.btn-login-actions {
    border: 2px solid #75daf1;
}

    .btn-login-actions:hover {
        border: 2px solid #81f6c0;
    }

.border-black {
    border: 2px solid #000000;
}

/* Horizontal Rules */
.hr-login-sky-blue {
    border: 1px solid #33bed1;
    opacity: 1;
    margin: 20px 0;
}

/* Input Fields */
.input-login {
    background-color: #c6efff;
    border-radius: 10px;
    border: 2px solid #52a3be;
    padding: 0.75rem 1rem;
    box-shadow: 0 4px 6px rgba(82,163,190,0.3);
    transition: all 0.2s ease-in-out;
}

    .input-login:focus {
        background-color: #c6efff;
        border: 3px solid #52a3be;
        box-shadow: 0 0 0 4px rgba(82,163,190,0.25), 0 6px 12px rgba(82,163,190,0.5);
        outline: none;
        transform: scale(1.01);
    }

/* Welcome Box */
.bg-welcome {
    background-color: #53c3e1;
    border-radius: 10px;
    padding: 0;
    text-align: center;
}

#h1-welcome {
    color: white;
}

/* Text Animation */
.tracking-in-expand {
    -webkit-animation: tracking-in-expand 0.9s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    animation: tracking-in-expand 0.9s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

@-webkit-keyframes tracking-in-expand {
    0% {
        letter-spacing: -0.5em;
        opacity: 0;
    }

    40% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

@keyframes tracking-in-expand {
    0% {
        letter-spacing: -0.5em;
        opacity: 0;
    }

    40% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}