@font-face {
    font-family: "VT323";
    src: url("/src/fonts/VT323.ttf") format('truetype');
}

body {
    font-family: "VT323";
    font-size: 2vw;
    background-color: #000;
    color: var(--page-accent);
    text-align: center;
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow-x: hidden;
}

#gradient-canvas {
    filter: blur(50px);
    overflow: hidden;
    top: 0;
    left: 0;
    max-height: 100%;
    --gradient-color-1: var(--gradientColor1);
    --gradient-color-2: var(--gradientColor2);
    --gradient-color-3: #333040;
    --gradient-color-4: #000000; 
    z-index: -1;
    position: fixed;
    scale: 1.8;
    filter: blur(50px);
    opacity: 1;
}

#headerText {
    font-size: 10vw;
    letter-spacing: -2px;
    color: #d6c5c8;
    text-shadow:  0.05em 0.05em var(--page-accent), 0.09em 0.1em #0c1017;
    transition: text-shadow 1s
}

#headerText:hover {
    text-shadow: var(--shadowY) var(--shadowX) var(--page-accent), var(--shadowX) var(--shadowY) #0c1017;
    transition: text-shadow 0s;
}

.pageTitle {
    line-height: 0.8vw;
}

a {
    color: inherit
}

button {
    transition-duration: .4s;
    font-family: "VT323";
    border: 2px solid var(--page-accent);
    background-color: #222;
    color: var(--page-accent);
    border-radius: 4px;
    font-size: 24px
}

button:hover {
    background-color: var(--page-accent);
    color: #222;
    cursor: pointer
}

li {
    list-style-position: inside;
}

@media screen and (max-width: 768px) {
    body {
        padding: 1rem;
        font-size: max(16px, 6vw);
        min-height: 100vh;
    }

    #headerText {
        font-size: 25vw;
        letter-spacing: -2px;
        color: #d6c5c8;
        text-shadow:  0.05em 0.05em var(--page-accent), 0.09em 0.1em #0c1017;
        transition: text-shadow 1s
    }

    .pageTitle {
        line-height: 6.8vw;
    }
}