body {
    margin: 0 10px;

    height: 100vh;
    width: calc(100% - 20px);

    background-color: #000000;
    color: #ff6ffc;
    font-family: 'Gilroy';
    font-size: 18pt;

    image-rendering: pixelated;
}

a {
    color: inherit;
}

/* font: https://www.tinkov.info/gilroy.html */
@font-face {
    font-family: 'Gilroy';
    src: url('/fonts/Gilroy-ExtraBold.woff2') format('woff2'),
         url('/fonts/Gilroy-ExtraBold.otf') format('opentype');
    font-weight: bold;
}

@font-face {
    font-family: 'Gilroy';
    src: url('/fonts/Gilroy-Light.woff2') format('woff2'),
         url('/fonts/Gilroy-Light.otf') format('opentype');
    font-weight: lighter;
}

#title {
    margin: 40px auto;
    width: clamp(0px, 550px, 100%);
    height: auto;

    display: flex;
    justify-content: center;
    align-items: center;
}

#title img {
    width: auto;
    height: 100%;
}

#explainer {
    width: clamp(0px, 550px, 100%);
    margin: auto;
    text-align: center;
}

#games {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    
}

.game {
    text-align: center;
}

.gametitle {
    font-weight: bold;
    font-size: 24pt;
}

.gameart {
    width: 300px;
    image-rendering: auto;
}

.gamedate {
    font-style: italic;
    color: #623860;
}

.gamebuttons {
    display: flex;
    justify-content: center;
    gap: 1em;
}

/* === WRITEUP STUFF === */

#writeup {
    width: clamp(0px, 100%, 1000px);
    margin: 0 auto;
}

#writeupsupertitle {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-direction: row;
}

@media (orientation: portrait) {
    #writeupsupertitle {
        flex-direction: column;
    }
}

#writeuptitle {
    font-weight: bold;
    font-size: 72pt;
}

#writeupdate {
    font-size: 36pt;
    color: #623860;
    text-align: right;
}

.writeupimage {
    width: clamp(0px, 400px, 100%);
    margin: 0 auto;
    image-rendering: auto;
}

.writeupimage img {
    width: 100%;
}

.writeupheader {
    font-size: 36pt;
    font-weight: bold;
}

#returnbutton {
    width: 100%;
    text-align: center;
}