/* Thank you https://quietmuffin.itch.io/ for the background :) */

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

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.blink {
    animation: blink 1s step-start infinite;
}

html {
    font-family: 'VT323';
    image-rendering: pixelated;
}

#content {
    display: flex;
    flex-wrap: wrap;
    row-gap: 25px;
    column-gap: 15px;
    box-sizing: border-box;
    justify-content: center;

    max-width: 9in;
    margin: 0 auto;
    padding: 10px 30px;

    border: 2px solid var(--primary-color);
    border-radius: 3px;
    
    background: var(--background-color);
    color: var(--primary-color);
}

.box {
    padding: 10px;
    vertical-align: top;
    border: 2px solid var(--primary-color);
    border-radius: 3px;
}

.no-border {
    border: none;
}

.b15 {
    flex: 12%;
}

.b33 {
    flex: 26.4%;
}

.b40 {
    flex: 32%;
}

.b50 {
    flex: 40%;
}

.b60 {
    flex: 48%;
}

.b85 {
    flex: 68%;
}

.b100 {
    flex: 90%;
}

h1, h2, h3, h4 {
    margin: 0;
}

ul {
    padding: 0;
    list-style-type: none;
}

a {
    color: var(--primary-color);
}

@media (max-width: 768px) {
    ul li {
        display: inline;
        margin-right: 10px;
    }
}