body {
    margin: 0;
    background-image: url('../../img/login-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    height: 100%;
    overflow: auto;
}

.login-title  {
    font-family: 'FiraCode', sans-serif;
    font-weight: bold;

    background: linear-gradient(226deg, #3a6496, #3a9682, #3a9646, #c7e13e, #eb3d26, #eb2689);
    background-size: 800% 800%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    -webkit-animation: text-color-animation 14s ease infinite;
    -moz-animation: text-color-animation 14s ease infinite;
    -o-animation: text-color-animation 14s ease infinite;
    animation: text-color-animation 14s ease infinite;
}

@-webkit-keyframes text-color-animation {
    0% {background-position:97% 0%}
    50% {background-position:4% 100%}
    100% {background-position:97% 0%}
}

@-moz-keyframes text-color-animation {
    0% {background-position:97% 0%}
    50% {background-position:4% 100%}
    100% {background-position:97% 0%}
}

@-o-keyframes text-color-animation {
    0% {background-position:97% 0%}
    50% {background-position:4% 100%}
    100% {background-position:97% 0%}
}

@keyframes text-color-animation {
    0% {background-position:97% 0%}
    50% {background-position:4% 100%}
    100% {background-position:97% 0%}
}









.school-name-div {
    display: flex;
    justify-content: center;
    text-align: center;
}

.school-name {
    color: #020202;
    font-family: 'OldEnglish', sans-serif;
    font-size: 80px;
    text-shadow: 0 0 5px #ffffff; /* Horizontal offset, vertical offset, blur radius, color */
}

@media (max-width: 1199px) {
    .school-name {
        font-size: 50px;
    }
}

.left-div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.school-logo {
    width: 70%;
    height: auto;
}

.right-div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.box {
    background: transparent;
    background-color: #131212b6;
    border-radius: 10px;
    border: 2px solid white; 
    backdrop-filter: blur(12px);
    margin: 0 5px;
    width: 95%;
    height: auto;
}

.instructions {
    justify-content: center;
    align-items: center;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    background-color: #1c1d1c73;
    color: rgb(255, 255, 255);
}

.login-header {
    margin: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(255, 255, 255);
}

.login-button-div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-button {
    width: 30%;
    margin: 15px 0;
}

.footer-div {
    padding: 50px 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

form {
    margin: 0;
    padding: 0;
}

.toggle-icon {
    color: khaki;
}

/*
    01110100 01101000 01100101 00100000 01100011 01110010 01100101 01100001 01110100 01101111 01110010 00100000 01101111 01100110 00100000 01110100 01101000 01101001 01110011 00100000 01110000 01110010 01101111 01101010 01100101 01100011 01110100 00100000 01101001 01110011 00100000 01101010 01101111 01110011 01101000 00100000 01100111 01110010 01100101 01100111 01101111 01110010 00100000 01111001 01101110 01101111 01110100 00100000 01110101 01110010 01110011 01100001 01101100 00100000 01100010 01101111 01110010 01101110 00100000 01101001 01101110 00100000 01101101 01100001 01110010 01100011 01101000 00100000 00110001 00110011 00101100 00100000 00110001 00111001 00111001 00110110 00101100 00100000 01101000 01101001 01110011 00100000 01101101 01101111 01110100 01101000 01100101 01110010 00100111 01110011 00100000 01101110 01100001 01101101 01100101 00100000 01101001 01110011 00100000 01100001 01101110 01101001 01110100 01100001 00100000 01111001 01101110 01101111 01110100 00100000 01110101 01110010 01110011 01100001 01101100
    - .... . / -.-. .-. . .- - --- .-. / --- ..-. / - .... .. ... / .--. .-. --- .--- . -.-. - / .. ... / .--- --- ... .... / --. .-. . --. --- .-. / -.-- -. --- - / ..- .-. ... .- .-.. / -... --- .-. -. / .. -. / -- .- .-. -.-. .... / .---- ...-- --..-- / .---- ----. ----. -.... --..-- / .... .. ... / -- --- - .... . .-. .----. ... / -. .- -- . / .. ... / .- -. .. - .- / -.-- -. --- - / ..- .-. ... .- .-..
*/



.inputBox {
    position: relative;
  }
  
.inputBox input {
    width: 100%;
    padding: 0.625rem 0;
    font-size: 1rem;
    color: #fff;
    letter-spacing: 0.062rem;
    margin-bottom: 0;
    border: none;
    border-bottom: 0.065rem solid #fff;
    outline: none;
    background: transparent;
  }
  
.inputBox label {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.625rem 0;
    font-size: 1rem;
    color: #fff;
    pointer-events: none;
    transition: 0.5s;
  }
  
.inputBox input:focus ~ label,
.inputBox input:valid ~ label,
.inputBox input:not([value=""]) ~ label {
    top: -1.125rem;
    left: 0;
    color: #4eb5e9;
    font-size: 0.85rem;
  }