@font-face {
    font-family: 'Orbitron';
    src: url('../../fonts/Orbitron-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: block;
}
html {
    background-color: #000;
    & body {
        position: relative;
        font-family: 'Montserrat';
    }
}
#login-button {
    position: fixed;
    top: 3rem;
    right: 3rem;
    font-family: 'Orbitron', sans-serif;
    color: #fff;
    height: 8rem;
    width: 8rem;
    border-radius: 50%;
    background-image: linear-gradient(to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.5), inset -2px -2px 3px rgba(0, 0, 0, 0.3);
    background-color: #008d02;
    &:hover, &:active, &:focus {
        outline: transparent;
        background-color: #00bc03;  
    } 
}
#container {
    align-items: center;
    background-color: #000;
    background-image: radial-gradient(transparent, #000), url("/images/background.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr max-content;
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
    opacity: 0;
    transition: opacity 0.5s ease;
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
    }
    &.fade-in {
        opacity: 1;
    }
    & section {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, max-content);
        place-items: center;
        row-gap: 2rem;
        & h1 {
            position: relative;
            font-family: 'Orbitron', sans-serif;
            font-size: clamp(8rem, 6dvw, 22rem);
            color: #fff;
            text-shadow: 4px 4px 5px rgb(7 195 10 / 20%);
            background-color: rgba(156, 255, 140, 0.03);
            backdrop-filter: blur(3px);
            border-top: 1px solid rgba(255, 255, 255, 0.4);
            border-left: 1px solid rgba(255, 255, 255, 0.4);
            border-right: 2px inset rgba(255, 255, 255, 0.04);
            border-bottom: 2px inset rgba(255, 255, 255, 0.04);
            box-shadow: 2px 2px 12px rgba(0,0,0,0.7);            
            padding: clamp(2rem, 2dvw, 4rem);
            border-radius: 20px;
            z-index: 1;
        }
        & #card-wrapper {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            width: 90dvw;
            gap: 1rem;
            & .card {
                background-color: rgba(156, 255, 140, 0.03);
                backdrop-filter: blur(3px);
                border-top: 1px solid rgba(255, 255, 255, 0.4);
                border-left: 1px solid rgba(255, 255, 255, 0.4);
                border-right: 2px inset rgba(255, 255, 255, 0.04);
                border-bottom: 2px inset rgba(255, 255, 255, 0.04);
                box-shadow: 2px 2px 12px rgba(0,0,0,0.7);            
                padding: .8rem;
                border-radius: 8px;
                & img {
                    margin: 0;
                    width: clamp(35px, 4dvw, 60px);
                }
            }
        }
    }
    & footer p{
        color: #b0b0b0;
        position: relative;
        z-index: 1;
    }
}
dialog {
    /* backdrop for all dialogs */
    margin: 30rem auto 0;
    &::backdrop {
        background-color: rgba(0, 0, 0, 0.562);
        backdrop-filter: blur(8px);

    }
    /* when the dialog is open */
    &[open] {
        animation: slide-up 500ms forwards,
            fade-in 500ms forwards;
    }
    /* modal specific rules */
    &#login-dialog {
        padding: 4rem 3rem;
        z-index: 10;
        width: 90vw;
        max-width: 500px;
        border-radius: 8px;
        background-color: rgba(156, 255, 140, 0.03);
        backdrop-filter: blur(3px);
        border-top: 1px solid rgba(255, 255, 255, 0.4);
        border-left: 1px solid rgba(255, 255, 255, 0.4);
        border-right: 2px inset rgba(255, 255, 255, 0.04);
        border-bottom: 2px inset rgba(255, 255, 255, 0.04);
        box-shadow: 2px 2px 12px rgba(0,0,0,0.7);
        & form {
            display: grid;
            gap: 4rem;
            & .form-group {
                display: grid;
                row-gap: .5rem;
                column-gap: 1rem;
                &.button-wrapper {
                    grid-template-columns: 1fr 1fr;
                }
                & label {
                    text-transform: uppercase;
                    font-size: 1.8rem;
                    color: #fff;
                }
                & input[type="text"],
                & input[type="password"] {
                    padding: 1rem;
                    font-family: inherit;
                    font-size: 1.6rem;
                    border-radius: 0.5rem;
                    width: 100%;
                    background-color: rgba(156, 255, 140, 0.05) !important;
                    color: #fff !important;
                    caret-color: white;
                    appearance: none;
                    -webkit-appearance: none;
                }
                & input:-webkit-autofill,
                & input:-webkit-autofill:hover,
                & input:-webkit-autofill:focus,
                & input:-webkit-autofill:active {
                    -webkit-background-clip: text;
                    font-family: inherit !important;
                    font-size: 1.6rem;
                    -webkit-text-fill-color: white !important;
                    caret-color: white;
                    /* Changes the background color */
                    -webkit-box-shadow: 0 0 0 30px rgba(156, 255, 140, 0.05) inset !important; 
                    transition: background-color 5000s ease-in-out 0s; /* Smooths the transition so it doesn't flicker */
                    /* box-shadow: none !important; */
                }
                & input::placeholder {
                    font-family: 'Montserrat', sans-serif;
                }
                & button {
                    font-family: inherit;
                    color: #fff;
                    background-color: #008d02;
                    background-image: linear-gradient(to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0));
                    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.5), inset -2px -2px 3px rgba(0, 0, 0, 0.3);
                    transition: background-color 300ms;
                    font-size: 1.6rem;
                    padding: 1rem;
                    cursor: pointer;
                    border-radius: 0.5rem;
                    border: 2px solid #004e01;
                    &:hover, &:active, &:focus {
                        background-color: #00bc03;
                    }
                }
            }
        }
    }
}
/* dialog animations */
/* frames cannot be nested */
@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes slide-up {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0%);
    }
}
/* dialog animations */
/* login button animation */
@keyframes moveGradient {
  0% {
    background-position: 0% 50%; /* Start position */
  }
  100% {
    background-position: 100% 50%; /* End position */
  }
}
/* login button animation */