@font-face {
    font-family: "Source Sans 3";
    src:
        local("Source Sans 3"),
        url("./fonts/SourceSans3-VariableFont_wght.ttf"),
        url("./fonts/static/SourceSans3-Regular.ttf");
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
}

:root {
    --border: 0.4rem solid red;
}

body {
    background-color: black;
    color: white;

    margin: 0 auto;
    max-width: 60rem;
    border: var(--border);

    font-family: "Source Sans 3", sans-serif;
    font-size: 2rem;
}

h1, h2 {
    border-bottom: 0.2rem solid red;
}

header {
    text-align: center;
    font-size: 4rem;
}

hr {
    border: var(--border);
    border-bottom: 0;
    margin: 0;
}

main {
    padding: 0 1rem;
}

.download {
    display: flex;
    justify-content: space-around;
}

a {
    padding: 0.2rem 0.4rem;
    border: var(--border);
    border-width: 0.2rem;

    color: inherit;
    /* text-decoration: none; */
}

a:hover {
    background-color: rgb(255, 255, 255, 25%);
}

small {
    color: rgb(255, 255, 255, 50%);
}

.screenshots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.screenshots figure {
    max-width: 37.5%;
}

.screenshots figure img {
    max-width: 100%;
}

.screenshots figcaption {
    text-align: center;
    font-size: 1rem;
}