* { box-sizing: border-box; }
html, body { margin: 0; padding: 0 }

:root {
    font-size: 20px;
    font-family: 'Anonymous Pro', monospace;
    
    --text-color: #CCCCCC;

    --background-color: #792368;

    --overlay-background: rgb(0 0 0 / 100%);
}

a         { color: #FFAAAA;   }
a:visited { color: #808080; }
a:hover   { color: red;     }

html {
    color: var(--text-color);

    background: url('./world-of-bitsy.jpg');
    background-position-x: center;
    background-size: 200%;
}

body {
    width: 100%;
    min-height: 100vh;
    margin: auto;
}

#column {
    width: 100%;
    max-width: 35em;
    margin: auto;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1em;
}

h2 { font-size: 1.2em; }
h3 { margin-top: 0; }
p { margin-bottom: 0; }

h1, h2, h3, #column > p, .webring > *, .links > *, section, #column > time, #column li, details {
    margin: 0;
    padding: 1rem 1rem;
    background: var(--overlay-background);
}

img.pixel {
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

#column > .indent {
    margin-left: 2em;
}

#column time {
    font-size: xx-large;
    width: 100%;
}

#column ul {
    display: flex;
    flex-direction: column;
    gap: inherit;
    
    margin: 0;
    padding: 0;
}

#column li {
    margin-left: 2em;
    list-style: none;
}

.gallery {
    width: 100%;

    margin: 0;
    padding: 0;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.screenshot {
    width: 100%;

    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
}

.screenshot > p { 
    margin-right: auto; 
    padding: 1rem;
    background: var(--overlay-background);
}

.screenshot > img, .screenshot > video {
    margin-right: auto;
    max-width: 100%;
    background: black;
}

section {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

ul, h3, p {
    margin: 0;
}

li {
    margin: 1em 0;
}

em {
    color: red;
}

.links {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    
    align-content: stretch;
    justify-content: center;

    gap: .5em;
}

.links > a.icon {
    --icon-width: 0;
    padding-left: calc(3rem);

    background-repeat: no-repeat;
    background-position: calc(1.5rem - var(--icon-width)/2) 50%;
}

.links > a.icon.zone {
    --icon-width: 24px;
    background-image: url('icon-zone.png');
}

.links > a.icon.bitsy {
    --icon-width: 30px;
    background-image: url('icon-bitsy.png');
}

.links > a.icon.flicksy {
    --icon-width: 32px;
    background-image: url('icon-flicksy.png');
}

.webring {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    align-items: center;
    align-content: stretch;
    justify-content: center;

    gap: 1em;
}

.webring > .banner {
    padding: 0;
}

.webring > .banner > img {
    display: block;
}

.webring > * {
    white-space: nowrap;
}

.webring > * { white-space: nowrap; }