:root {
    --color: #7fffbf;
    --compl: #80FFFF;
    /* x-offset y-offset blur color */
    --shadow: 0 0 3px #0f0, -2px 0 3px #f00, 2px 0 3px #00f;
}

@font-face {
    font-family: "DejaVuSansMono";
    src: url("./assets/DejaVuSansMono.ttf");
}

* {
    overflow: hidden;
}

body {
    background-color: black;
    color: var(--color);
    font-family: "DejaVuSansMono", monospace;

    text-shadow: var(--shadow);
}

a {
    color: var(--compl);
    text-decoration: underline;
}

h1 {
    font-size: 6rem;
}

h3 {
    font-size: 1.5rem;
}

.x76 {
    text-decoration: underline;
}

main {
    width: 100%;
    height: 100%;

    display: grid;
    column-gap: 3rem;
    row-gap: 3rem;

    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 25% 1fr 1fr;

}

#main {
    grid-column: 2;
    grid-row: 2;
}

#links {
    grid-column: 2;
    grid-row: 3;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
}


main>section {
    text-align: center;
}


.blinking-cursor {
    padding: 0;
    margin: 0 -0.666em;
    content: "";
    width: 1ch;
    height: 1em;
    background: var(--color);
    display: inline-block;

    box-shadow: var(--shadow);
    animation: blink 1.5s steps(2) infinite;
}

@keyframes blink {
    0% {
        opacity: 0;
    }
}