body, html {
    overflow: auto;
}

body {
    /* background-color: #C5C6C7;  */
    /* background: linear-gradient(180deg, #0B0C10, #1F2833, #45A29E); */
    /* background-color: #45A29E; */

    margin: 0;
    background-image: url('/images/ai-generated-8536301_1280.jpg');
    background-size: cover; /* This ensures the image covers the entire background */
    background-position: center; /* This centers the background image */
    background-repeat: no-repeat; /* This prevents the image from repeating */
}

.login-wrapper {
    display: flex;
    justify-content: center;
    padding-bottom: 50px;
}

.login-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.63); /* Transparent background */
    width:650px;
    height: 650px;
    border: 5px solid rgb(0, 0, 0); /* Visible border */
    margin-top: 2%;
    margin-bottom: 2%;
    border-radius: 10px;
    position: relative;
    backdrop-filter: blur(6px); /* Blurs the background behind the element */
}

.login-form{
    margin-top: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#username, #password{
    height: 30px;
    width:300px;
    border: 2px solid #000000;
    border-radius: 6px;
}

.login-heading{
    text-align: center;
    color: #66FCF1;
    font-size: 5em;
    margin-top: 3%;
    font-family: "Oswald", sans-serif;
    /* font-family: "Rubik Glitch", system-ui; */
    position: relative;
    z-index: 1;
}

.login-heading .stack {
    display: grid;
    grid-template-columns: 1fr;
}

.login-heading .stack span {
    font-weight: bold;
    grid-row-start: 1;
    grid-column-start: 1;
    --stack-height: calc(100% / var(--stacks) - 1px);
    --inverse-index: calc(calc(var(--stacks) - 1) - var(--index));
    --clip-top: calc(var(--stack-height) * var(--index));
    --clip-bottom: calc(var(--stack-height) * var(--inverse-index));
    clip-path: inset(var(--clip-top) 0 var(--clip-bottom) 0);
    animation: stack 340ms cubic-bezier(.46,.29,0,1.24) 1 backwards calc(var(--index) * 120ms), glitch 2s ease infinite 2s alternate-reverse;
}

.login-heading .stack span:nth-child(odd) { --glitch-translate: 8px; }
.login-heading .stack span:nth-child(even) { --glitch-translate: -8px; }

@keyframes stack {
    0% {
        opacity: 0;
        transform: translateX(-50%);
        text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
    };
    60% {
        opacity: 0.5;
        transform: translateX(50%);
    }
    80% {
        transform: none;
        opacity: 1;
        text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
    }
    100% {
        text-shadow: none;
    }
}

@keyframes glitch {
    0% {
        text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
        transform: translate(var(--glitch-translate));
    }
    2% {
        text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
    }
    4%, 100% {  text-shadow: none; transform: none; }
}

.login_label{
    margin-right: 65%;
    font-family: "Oswald", sans-serif;
    font-size: 1.5em;
}

.register-link{
    font-family: "Oswald", sans-serif;
    font-size: 1em;

}

.login-button{
    background-color: #1F2833;
    color: #ffffff;
    text-decoration: none;
    padding: 20px 120px;
    margin-top: 20px;
    font-family: "Oswald", sans-serif;
    position: relative;
    font-size: 1.5em;
    letter-spacing: 0.1em;
    cursor: pointer;
    overflow: hidden;
}

.login-button:hover{
    background-color: #e13f6b;
    font-style: italic;
}

.login-button.glitch::before,
.login-button.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1F2833;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-button.glitch::before {
    left: 2px;
    text-shadow: -2px 0 #ff00c1;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
}

.login-button.glitch::after {
    left: -2px;
    text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
    animation: glitch-anim2 1s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% {
        clip: rect(31px, 9999px, 94px, 0);
        transform: skew(0.06deg);
    }
    5% {
        clip: rect(55px, 9999px, 30px, 0);
        transform: skew(0.69deg);
    }
    100% {
        clip: rect(67px, 9999px, 34px, 0);
        transform: skew(0.32deg);
    }
}

@keyframes glitch-anim2 {
    0% {
        clip: rect(65px, 9999px, 119px, 0);
        transform: skew(0.02deg);
    }
    5% {
        clip: rect(47px, 9999px, 43px, 0);
        transform: skew(0.05deg);
    }
   
    100% {
        clip: rect(14px, 9999px, 56px, 0);
        transform: skew(0.48deg);
    }
}

.color-block {
    background-color: #1F2833;
    border-top: #ffffff00 2px solid;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    width: 100%; 
    height: 150px; 
    position: absolute;
    top: 0; /*top of container must combo with position absolute in both color block and login container*/
}

.error-message {
    margin-top: 10px;
    font-size: 14px;
    color: red;
}