@font-face {
    font-family: 'Geom';
    src: url('../fonts/Geom-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    /* full weight range */
    font-style: normal;
    font-display: swap;
}

:root {
    --color-light-blue: #2e81a5;
    --color-blue: #256885;
    --color-dark-blue: #1a4c61;
    --color-sand-dark: #d9b280;
    --color-sand-bright: #ffdebb;
    --color-sand-bright-light: rgb(255, 232, 221);

    --icon-kofi: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M23.881 8.948c-.773-4.085-4.859-4.593-4.859-4.593H.723c-.604 0-.679.798-.679.798s-.082 7.324-.022 11.822c.164 2.424 2.586 2.672 2.586 2.672s8.267-.023 11.966-.049c2.438-.426 2.683-2.566 2.658-3.734 4.352.24 7.422-2.831 6.649-6.916m-11.062 3.511c-1.246 1.453-4.011 3.976-4.011 3.976s-.121.119-.31.023c-.076-.057-.108-.09-.108-.09-.443-.441-3.368-3.049-4.034-3.954-.709-.965-1.041-2.7-.091-3.71.951-1.01 3.005-1.086 4.363.407 0 0 1.565-1.782 3.468-.963s1.832 3.011.723 4.311m6.173.478c-.928.116-1.682.028-1.682.028V7.284h1.77s1.971.551 1.971 2.638c0 1.913-.985 2.667-2.059 3.015" fill="rgb(255, 247, 231)"/></svg>');
}

* {
    margin: 0;
    padding: 0;
    font-family: "Geom", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

h1,
h2,
h3,
h4,
p {
    padding-bottom: 0.5em;
}

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: url(../img/BG1.png);
    background-position: center;
    background-size: cover;
    filter: brightness(0.7);
}

header {
    height: 80vh;
    min-height: 600px;
    width: 100%;
    position: relative;
}

body {
    background-color: var(--color-sand-bright);
    display: flex;
    flex-direction: column;
    align-items: center;
}

footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 21px;
    width: 100%;
    min-height: 100px;
    background-color: var(--color-dark-blue);
    padding: 21px;
    box-sizing: border-box;

    & a,
    p,
    span {
        color: var(--color-sand-bright-light);
    }
}

a.with-icon {
    &::before {
        content: '';
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-right: 0.5ex;
        vertical-align: text-bottom;
        background-image: var(--icon-kofi);
        background-position: center;
        background-size: cover;
        color: var(--color-sand-bright-light)
    }
}

a.text-link {
    text-decoration: none;

    &::after {
        content: '';
        height: 2px;
        background: currentColor;
        display: block;
        margin: auto;
        transition: 0.5s;
        width: 80%;
    }

    &:hover::after {
        width: 100%;
    }
}

nav {
    z-index: 10;
    display: flex;
    padding: 13px 6%;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    background: linear-gradient(#000000bb, #00000000);
    box-sizing: border-box;

    & img {
        width: 60px;
        border-radius: 50%;
    }

    & .nav-links {
        flex: 1;
        text-align: right;

        & ul li {
            list-style: none;
            display: inline-block;
            padding: 8px 12px;
            position: relative;

            a {
                color: var(--color-sand-bright);
                text-decoration: none;
                font-size: 20px;
                font-style: normal;
                font-weight: 500;
            }

            &::after {
                content: '';
                width: 0%;
                height: 2px;
                background: var(--color-sand-bright);
                display: block;
                margin: auto;
                transition: 0.5s;
            }

            &:hover::after {
                width: 100%;
            }
        }
    }
}

.game-header {
    display: flex;
    flex-direction: column;
    gap: 34px;
    align-items: center;
    justify-content: center;

    & .feature-graphic {
        object-fit: cover;
    }

    & .game-title {
        width: 100%;
        max-width: 800px;
        padding: 0 21px;
        box-sizing: border-box;
    }
}

main {
    padding: 0 21px;
    max-width: 1100px;
    width: 100%;
    box-sizing: border-box;

    & h2 {
        padding: 0 0 0.5em;
        font-size: 34pt;
        color: var(--color-blue);
        font-weight: 900;
    }

    & .section {
        padding: 21px 0 34px;
    }
}

.post-preview-container {
    display: flex;
    flex-wrap: wrap-reverse;
    align-items: center;
    gap: 21px;

    & .post-preview {
        display: flex;
        flex-grow: 0;
        flex-direction: column;
        flex: 1 1 250px;
        min-width: 200px;
        background-color: var(--color-sand-bright-light);
        border-radius: 13px;
        padding: 13px;
        gap: 13px;

        & .preview-text {
            padding: 0 8px 8px;

            & h3 {
                font-size: 16pt;
                font-weight: 700;
                color: var(--color-dark-blue);
                padding: 0 0 .5em;
            }

            & p {
                font-size: 11pt;
                color: rgb(138, 138, 138);
                padding: 0 0 .5em;
            }
        }

        & img {
            height: 180px;
            object-fit: cover;
        }
    }
}

nav .fa {
    display: none;
}

#insta-icon {
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913a5.9 5.9 0 0 0 1.384 2.126A5.9 5.9 0 0 0 4.14 23.37c.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558a5.9 5.9 0 0 0 2.126-1.384 5.9 5.9 0 0 0 1.384-2.126c.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913a5.9 5.9 0 0 0-1.384-2.126A5.85 5.85 0 0 0 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0m0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227a3.8 3.8 0 0 1-.899 1.382 3.74 3.74 0 0 1-1.38.896c-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07s-3.586-.015-4.859-.074c-1.171-.061-1.816-.256-2.236-.421a3.7 3.7 0 0 1-1.379-.899 3.64 3.64 0 0 1-.9-1.38c-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844s.016-3.586.061-4.861c.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06zm0 3.678a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 1 0 0-12.324M12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4m7.846-10.405a1.441 1.441 0 0 1-2.88 0 1.44 1.44 0 0 1 2.88 0" fill="%23ffdebb"/></svg>');
}

#steam-icon {
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11.979 0C5.678 0 .511 4.86.022 11.037l6.432 2.658a3.4 3.4 0 0 1 1.912-.59q.094.001.188.006l2.861-4.142V8.91a4.53 4.53 0 0 1 4.524-4.524c2.494 0 4.524 2.031 4.524 4.527s-2.03 4.525-4.524 4.525h-.105l-4.076 2.911.004.159a3.39 3.39 0 0 1-3.39 3.396 3.41 3.41 0 0 1-3.331-2.727L.436 15.27C1.862 20.307 6.486 24 11.979 24c6.627 0 11.999-5.373 11.999-12S18.605 0 11.979 0M7.54 18.21l-1.473-.61c.262.543.714.999 1.314 1.25a2.551 2.551 0 0 0 3.337-3.324 2.547 2.547 0 0 0-3.255-1.413l1.523.63a1.878 1.878 0 0 1-1.445 3.467zm11.415-9.303a3.02 3.02 0 0 0-3.015-3.015 3.015 3.015 0 1 0 3.015 3.015m-5.273-.005a2.264 2.264 0 1 1 4.531 0 2.267 2.267 0 0 1-2.266 2.265 2.264 2.264 0 0 1-2.265-2.265" fill="%23ffdebb"/></svg>');
}

#itchio-icon {
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3.13 1.338C2.08 1.96.02 4.328 0 4.95v1.03c0 1.303 1.22 2.45 2.325 2.45 1.33 0 2.436-1.102 2.436-2.41 0 1.308 1.07 2.41 2.4 2.41 1.328 0 2.362-1.102 2.362-2.41 0 1.308 1.137 2.41 2.466 2.41h.024c1.33 0 2.466-1.102 2.466-2.41 0 1.308 1.034 2.41 2.363 2.41 1.33 0 2.4-1.102 2.4-2.41 0 1.308 1.106 2.41 2.435 2.41C22.78 8.43 24 7.282 24 5.98V4.95c-.02-.62-2.082-2.99-3.13-3.612-3.253-.114-5.508-.134-8.87-.133-3.362 0-7.945.053-8.87.133m6.376 6.477a2.7 2.7 0 0 1-.468.602c-.5.49-1.19.795-1.947.795a2.8 2.8 0 0 1-1.95-.795 2.6 2.6 0 0 1-.446-.59 2.8 2.8 0 0 1-.486.59 2.8 2.8 0 0 1-1.95.795.8.8 0 0 1-.264-.052 40 40 0 0 0-.168 2.95v.005l-.006 1.167c.02 2.334-.23 7.564 1.03 8.85 1.952.454 5.545.662 9.15.663 3.605 0 7.198-.21 9.15-.664 1.26-1.284 1.01-6.514 1.03-8.848l-.006-1.167v-.004a40 40 0 0 0-.168-2.95.9.9 0 0 1-.263.052 2.8 2.8 0 0 1-1.95-.795 2.7 2.7 0 0 1-.486-.59c-.127.22-.265.412-.447.59a2.8 2.8 0 0 1-1.95.794c-.76 0-1.446-.303-1.948-.793a2.7 2.7 0 0 1-.468-.602 2.7 2.7 0 0 1-.463.602 2.8 2.8 0 0 1-1.95.794h-.16a2.8 2.8 0 0 1-1.95-.793 2.7 2.7 0 0 1-.464-.602zm-2.004 2.59v.002c.795.002 1.5 0 2.373.953A20 20 0 0 1 12 11.253c.72 0 1.438.035 2.125.107.873-.953 1.578-.95 2.372-.953.376 0 1.876 0 2.92 2.934l1.123 4.028c.832 2.995-.266 3.068-1.636 3.07-2.03-.075-3.156-1.55-3.156-3.025-1.124.184-2.436.276-3.748.277-1.312 0-2.624-.093-3.748-.277 0 1.475-1.125 2.95-3.156 3.026-1.37-.004-2.468-.077-1.636-3.072l1.122-4.027c1.045-2.934 2.545-2.934 2.92-2.934zM12 12.714c-.002.002-2.14 1.964-2.523 2.662l1.4-.056v1.22c0 .056.56.033 1.123.007.562.026 1.124.05 1.124-.008v-1.22l1.4.055C14.138 14.677 12 12.713 12 12.713z" fill="%23ffdebb"/></svg>');
}

#kofi-icon {
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M23.881 8.948c-.773-4.085-4.859-4.593-4.859-4.593H.723c-.604 0-.679.798-.679.798s-.082 7.324-.022 11.822c.164 2.424 2.586 2.672 2.586 2.672s8.267-.023 11.966-.049c2.438-.426 2.683-2.566 2.658-3.734 4.352.24 7.422-2.831 6.649-6.916m-11.062 3.511c-1.246 1.453-4.011 3.976-4.011 3.976s-.121.119-.31.023c-.076-.057-.108-.09-.108-.09-.443-.441-3.368-3.049-4.034-3.954-.709-.965-1.041-2.7-.091-3.71.951-1.01 3.005-1.086 4.363.407 0 0 1.565-1.782 3.468-.963s1.832 3.011.723 4.311m6.173.478c-.928.116-1.682.028-1.682.028V7.284h1.77s1.971.551 1.971 2.638c0 1.913-.985 2.667-2.059 3.015" fill="%23ffdebb"/></svg>');
}

#post-section .post-preview-container {
    align-items: flex-start;
    flex-wrap: wrap;

    & .column {
        display: flex;
        flex-direction: column;
        flex: 1 1 300px;
        gap: 21px;

        .post-preview {
            align-items: center;
        }
    }
}

.card {
    text-decoration: none;
    border-radius: 13px;
    padding: 13px;
    transition-duration: 0.2s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);

    &:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
}

.cards {
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 13px;

    & .card {
        background-color: var(--color-blue);
        height: 32px;
        display: flex;
        gap: 21px;
        align-items: center;

        & .icon {
            width: 32px;
            height: 32px;
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            color: var(--color-sand-bright);
        }

        & span {
            font-size: 12pt;
            color: var(--color-sand-bright);
        }

        &:hover {
            filter: saturate(1.1) brightness(1.1);
        }

    }
}

/* ---- news ---- */
.news {
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 100px;
    background-color: var(--color-sand-dark);
}

.news h1 {
    font-size: 36px;
    font-weight: 600;
    color: var(--color-blue);
}

.news-col h3 {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-blue);

}

p {
    color: var(--color-dark-blue);
    font-weight: 400;
}

.row {
    margin-top: 5%;
    margin-left: 5%;
    margin-right: 5%;
    align-items: center;
    display: flex;
    justify-content: space-between;
}

#post-page {

    max-width: 900px;
    display: flex;
    flex-direction: column;
    padding: 0;

    & .banner {
        width: 100%;
        height: 400px;
        object-fit: cover;
    }

    & .post {
        background-color: var(--color-sand-bright-light);
        padding: 0 34px 55px;

        & img {
            object-fit: cover;
        }

        & section {
            display: flex;
            flex-direction: row;
            gap: 13px;
        }

        & article {
            max-width: 600px;
            margin-left: 21px;
        }

        & h1 {
            color: var(--color-dark-blue);
            font-weight: 900;
            font-size: 34pt;
        }

        & h2 {
            color: var(--color-dark-blue);
            font-weight: 900;
            font-size: 26pt;
        }

        & h3 {
            color: var(--color-dark-blue);
            font-weight: 900;
            font-size: 18pt;
        }

        & p,
        li {
            color: var(--color-blue);
            font-weight: 400;
        }

        & ul,
        p {
            margin-left: 1em;
        }
    }
}

@media(max-width:700px) {
    /* .nav-links ul li {
        display: block;
    }

    .nav-links {
        position: absolute;
        background: var(--color-blue);
        height: 100vh;
        width: 200px;
        top: 0;
        right: -200px;
        text-align: left;
        z-index: 2;
        transition: 0.5s;
    }

    nav .fa {
        display: block;
        color: var(--color-sand-dark);
        margin: 10px;
        font-size: 22px;
        cursor: pointer;
    }

    .nav-links ul {
        padding: 30px;
    } */

    .game-header {
        & .game-title {
            padding: 0 5px;
        }
    }

    #post-page .post {
        padding: 0 21px 34px;

        & h1 {
            font-size: 30pt;
        }

        & h2 {
            font-size: 24pt;
        }
    }
}