@font-face {
    font-family: "C64Pro";
    src: url("/static/website/fonts/C64_Pro-STYLE.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
}

@font-face {
    font-family: "C64ProMono";
    src: url("/static/website/fonts/C64_Pro_Mono-STYLE.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
}

:root {
    --c64-black: #000000;
    --c64-white: #FFFFFF;
    --c64-red: #813338;
    --c64-cyan: #75CEC8;
    --c64-purple: #8E3C97;
    --c64-green: #56AC4D;
    --c64-blue: #2E2C9B;
    --c64-yellow: #EDF171;
    --c64-orange: #8E5029;
    --c64-brown: #553800;
    --c64-light-red: #C46C71;
    --c64-grey-1: #4A4A4A;
    --c64-grey-2: #7B7B7B;
    --c64-light-green: #A9FF9F;
    --c64-light-blue: #706DEB;
    --c64-grey-3: #B2B2B2;

    --color-news: var(--c64-red);
    --color-history: var(--c64-orange);
    --color-members: var(--c64-yellow);
    --color-releases: var(--c64-green);
    --color-gallery: var(--c64-blue);

    --color-page-background: var(--c64-light-blue);

    --color-header-text: var(--c64-white);

    --color-article-background: var(--c64-blue);
    --color-article-text: var(--c64-light-blue);
    --color-article-link: var(--c64-cyan);

    --color-footer-text: var(--c64-blue);
    --color-footer-link: var(--c64-blue);

    --header-height: 40px;
    --main-section-height: 60px;
    --outer-margin: 1.5em;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--color-page-background);
    margin: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

div.page {
    flex: 1;
}

footer {
    margin-left: var(--outer-margin);
    margin-right: var(--outer-margin);
    margin-top: calc(var(--outer-margin) / 2);
    margin-bottom: calc(var(--outer-margin) / 2);
    border-top: 2px solid var(--color-footer-text);
    padding-top: .5em;
    font-size: 0.75em;
    color: var(--color-footer-text);

    div.links {
        display: inline;
        margin-left: 2em;

        span {
            margin-right: .5em;
        }

        span:not(:first-child):before {
            content: "|";
            margin-right: .5em;
        }
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "C64Pro";
}

header {
    color: var(--color-header-text);
    margin: var(--outer-margin);
}

nav {
    display: flex;
    flex-direction: row;
    flex-grow: 0;
    height: var(--header-height);
    vertical-align: middle;

    span.separator {
        flex: auto;
    }

    span.sections {
        display: inline-block;
        flex: none;
        height: var(--header-height);
        vertical-align: middle;

        a {
            display: inline-flex;
            align-items: center;
            height: var(--header-height);
            vertical-align: middle;
            padding-left: calc(var(--header-height) / 2);
            padding-right: calc(var(--header-height) / 2);
            border-radius: 100vw;
            margin-left: .5em;
            margin-right: .5em;
            color: inherit;
            text-decoration: none;
        }

        span {
            display: inline;
            font-family: "C64Pro";
            text-transform: uppercase;
            font-size: 0.75em;
        }
    }

    span.icon {
        display: inline-block;
        width: var(--header-height);
        height: var(--header-height);

        img {
            width: 100%;
            height: 100%;
        }
    }

    span.links {
        display: inline-flex;
        flex: none;
        height: var(--header-height);
        align-items: center;
        vertical-align: middle;

        span {
            display: inline-flex;
            height: 100%;
            align-items: center;
            vertical-align: middle;
            margin-left: .5em;
            margin-right: .5em;

            a {
                display: inline-flex;
                align-items: center;
                color: inherit;
                text-decoration: none;
                height: 100%;
            }

            img {
                display: block;
                height: 100%;
                width: auto;
            }
        }

        .hvsc,
        .csdb {
            height: 40%;
        }

        .github {
            height: 50%;
        }
    }
}

.sections {
    .news {
        background-color: var(--color-news);
    }

    .history {
        background-color: var(--color-history);
    }

    .members {
        background-color: var(--color-members);
    }

    .releases {
        background-color: var(--color-releases);
    }

    .gallery {
        background-color: var(--color-gallery);
    }
}

div.page_content {
    margin: var(--outer-margin);
    padding: 1em;
}

article.members img {
    border-color: var(--color-members);
}

article.releases img {
    border-color: var(--color-releases);
}

article.news img {
    border-color: var(--color-news);
}

article.gallery img {
    border-color: var(--color-gallery);
}

article.history img {
    border-color: var(--color-history);
}

article,
div.page_content {
    background-color: var(--color-article-background);
    color: var(--color-article-text);
    border-radius: .5em;

    a {
        color: var(--color-article-link);
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }
}

article {
    display: grid;
    gap: 1em;
    margin: var(--outer-margin);
    padding: 1em;
    grid-template-columns: 1fr 2fr;
    grid-template-areas: "x heading" "image content";
    text-align: left;


    .title {
        grid-area: heading;
        font-family: "C64Pro";
        font-size: 1.5em;
    }

    .image {
        grid-area: image;
        display: flex;
        align-items: flex-start;
        justify-content: center;

        img {
            max-width: 100%;
            max-height: auto;
            border-radius: 1.5em;
            border-width: 5px;
            border-style: solid;
        }


    }

    .text {
        grid-area: content;
    }
}


section.articles {
    article:nth-child(even) {
        grid-template-columns: 2fr 1fr;
        grid-template-areas: "heading x" "content image";
        text-align: right;
    }

}

div.main-image {
    position: relative;
    width: 100%;

    img {
        display: block;
        width: 100%;
        height: auto;
    }

    div.sections {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: var(--outer-margin);
        height: var(--main-section-height);
        color: var(--color-header-text);

        display: flex;
        flex-direction: row;
        gap: 1em;
        justify-content: center;

        a {
            display: inline-flex;
            align-items: center;
            height: var(--main-section-height);
            vertical-align: middle;
            padding-left: calc(var(--main-section-height) / 2);
            padding-right: calc(var(--main-section-height) / 2);
            border-radius: 100vw;
            color: inherit;
            text-decoration: none;

            span {
                display: inline;
                font-family: "C64Pro";
                text-transform: uppercase;
                font-size: calc(var(--main-section-height) / 3);
            }
        }
    }
}

div.heading {
    position: relative;
    margin-left: var(--outer-margin);
    margin-right: var(--outer-margin);
    margin-bottom: var(--outer-margin);

    img.background {
        display: block;
        width: 100%;
        height: auto;
    }

    div.disk {
        position: absolute;
        top: 0;
        right: var(--outer-margin);
        width: auto;
        height: 100%;

        img {
            display: block;
            width: auto;
            height: 100%;
        }

        h1 {
            position: absolute;
            top: 27%;
            left: 47%;
            transform: translate(-25%, -73%) rotate(25.8deg);
            font-family: "C64Pro";
            color: var(--color-header-text);
            font-size: 1.25em;
            text-transform: uppercase;
            padding: 15px;
            width: 175px;
            height: 21px;
            text-align: center;
            border-radius: .5em;
        }

        h1.blank {
            color: black;
            background-color: white;
            font-family: inherit;
            font-size: .6em;
        }

        .news {
            background-color: var(--color-news);
        }

        .history {
            background-color: var(--color-history);
        }

        .members {
            background-color: var(--color-members);
        }

        .releases {
            background-color: var(--color-releases);
        }

        .gallery {
            background-color: var(--color-gallery);
        }
    }

    img.logo {
        position: absolute;
        top: 50%;
        left: var(--outer-margin);
        transform: translate(0, -50%);
        width: 66%;
        height: auto;
    }
}

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

    a {
        color: var(--color-footer-link);
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }
}

span.links {
    display: inline;
    margin-left: 2em;

    span {
        margin-right: .5em;
    }

    span:not(:first-child):before {
        content: "|";
        margin-right: .5em;
    }

    img {
        display: inline-block;
        height: 1em;
        width: auto;
    }
}