@font-face {
    font-family: Lalezar;
    src: url("./fonts/Lalezar-Regular.woff2");
}
@font-face {
    font-family: TiltWarp;
    src: url("./fonts/TiltWarp-Regular-VariableFont.woff2");
}

:root {
    color: white;
    background-color: #0a0c12;
    /* text-shadow: 1px 1px 2px #d500aeff; */
}

body {
    margin: 0;
    width: 100dvw;
    height: 100dvh;
    overflow: hidden;
    background-color: #0a0c12;
}

main {
    width: 100%;
    position: absolute;
    z-index: 20;
    top: 0;
    display: flex;
    justify-content: center;
    font-family: TiltWarp;
    letter-spacing: 2px;
}
footer {
    width: 100%;
    position: absolute;
    z-index: 10;
    bottom: 0;
    display: flex;
    justify-content: center;
    font-family: TiltWarp;
}

footer > * {
    font-size: 1rem;
    letter-spacing: 1px;
}

canvas#space {
    position: absolute;
    top: 0;
    z-index: 0;
}
canvas#galaxy {
    position: absolute;
    top: 0;
    z-index: 0;
}

h1,
h2 {
    background: rgba(155, 155, 155, 0.25);
    backdrop-filter: blur(1px);
    padding: 0.25rem 1rem;
    border-radius: 0.5rem;
}