:root {
    --color: #7fffbf;
}

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

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

    /* x-offset y-offset blur color */
    text-shadow: 0 0 2px #0f0, -2px 0 2px #f00, 2px 0 2px #00f;
}

h1 {
    font-size: 6rem;
}

p {
    font-size: 2rem;
}

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>section#main {
    grid-column: 2;
    grid-row: 2;
}

main>section {
    text-align: center;
}


main>section>p:after {
    content: "";
    width: 1ch;
    height: 0.6em;
    background: var(--color);
    display: inline-block;

    animation: blink 1.5s steps(2) infinite;
}

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