/* ------------------ */
/* body and constants */
/* ------------------ */
@charset "UTF-8";

:root {
    --font-primary: "Funnel Display", serif;
    --font-secondary: serif;
    /* --color-primary-4: #0b0b0b; */
    /* --color-primary-3: #0c0942; */
    /* --color-primary-2: #001c3d; */
    /* --color-primary: #171837; */
    --color-primary: #d1d1d1;
    --color-primary-alt: #0b0b0b;
    --color-primary-hover: #555555;
    --color-on-primary: #fefefe;
    --color-on-primary-hover: #ffffff;
    --color-secondary: #de4c3f;
    --color-secondary-hover: #d62828;
    --color-on-secondary: #fefefe;
    --color-on-secondary-hover: #ffffff;
    --color-surface: #d1d1d1;
    --color-surface-inverse: #0f0f0f;
    --color-on-surface: #0f0f0f;
    --color-on-surface-inverse: #d1d1d1;
    --color-scrim-big: rgba(50, 50, 50, 0.5);
    --color-scrim-medium: rgba(0, 0, 0, 0.85);
    --color-scrim-small: rgba(0, 0, 0, 0.7);
    --color-shadow: rgba(10, 10, 10, 0.5);
    --radius-small: 0.2rem;
    --radius-big: 0.4rem;
    --radius-huge: 1rem;
    --blur: 80px;
}

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

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body {
    font-family: var(--font-primary);
    overflow-x: hidden;
    width: 100vw;
    background-color: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cpattern id='hexagons' width='50' height='43.4' patternUnits='userSpaceOnUse' patternTransform='scale(3) translate(2) rotate(20)'%3E%3Cpolygon points='24.8,22 37.3,29.2 37.3,43.7 24.8,50.9 12.3,43.7 12.3,29.2' id='hex' fill='%23ffffffff' stroke-width='0.5' stroke='%23232a2a28'/%3E%3Cuse xlink:href='%23hex' x='25' /%3E%3Cuse xlink:href='%23hex' x='-25' /%3E%3Cuse xlink:href='%23hex' x='12.5' y='-21.7' /%3E%3Cuse xlink:href='%23hex' x='-12.5' y='-21.7' /%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23hexagons)' /%3E%3C/svg%3E");
}

a {
    text-decoration: none;
    color: inherit;
}

.body-filter {
    position: relative;
    backdrop-filter: blur(4px) grayscale(20%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}


/* ---------- */
/* page title */
/* ---------- */
.page-title {
    color: var(--color-on-surface);
    text-align: center;
    margin-top: 1rem;
    padding-bottom: 2rem;
}

.page-title-alt {
    color: var(--color-on-surface-inverse);
    text-align: center;
    margin-top: 1rem;
    padding-bottom: 2rem;
}


/* ------ */
/* header */
/* ------ */
header {
    width: 100%;
    top: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 999;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 1rem 3rem;
    width: 100%;
    height: 5rem;
}

.header-title {
    display: flex;
    align-items: center;
}

    .header-title h2 {
        display: none;
        margin: 0;
        letter-spacing: 2px;
        margin-left: 1rem;
        color: var(--color-on-surface);
    }

    .header-title h3 {
        display: flex;
        margin: 0;
        letter-spacing: 2px;
        margin-left: 1rem;
        color: var(--color-on-surface);
    }

    .header-title img {
        width: 2.5rem;
        height: auto;
        border-radius: var(--radius-small);
    }

.header-menu-toggle {
    width: 2rem;
    height: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%230f0f0fff'%3E%3Cpath d='M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    color: var(--color-on-surface);
    cursor: pointer;
    position: relative;
}


/* ----------- */
/* regular nav */
/* ----------- */
.big-nav {
    display: none;
    align-items: center;
    gap: 1.2rem;
}

    .big-nav a {
        color: var(--color-on-surface);
        text-decoration: none;
        font-size: 1rem;
    }


/* ---------- */
/* mobile nav */
/* ---------- */
.small-nav {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1000 !important;
    overflow: hidden;
    background-color: var(--color-surface-inverse);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

    .small-nav.show {
        position: fixed;
        opacity: 1;
        visibility: visible;
        pointer-events: all;
    }

    .small-nav .header-content {
        position: absolute;
        justify-content: end;
        z-index: 1001 !important;
    }

.small-nav-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 1.2rem 0;
    width: 100%;
    height: 100%;
    gap: 2rem;
}

    .small-nav-content a {
        color: var(--color-on-surface-inverse);
        text-decoration: none;
        font-size: 1.5rem;
    }


/* ------------ */
/* main content */
/* ------------ */
.content {
    padding: 0rem 1rem;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

    .content::-webkit-scrollbar {
        display: none; /* Chrome, Safari and Opera */
    }


/* ------ */
/* footer */
/* ------ */
footer {
    bottom: 0;
    width: 100%;
    padding-top: 4rem;
    padding-right: 1.2rem;
    padding-bottom: 2rem;
    padding-left: 1.2rem;
    color: var(--color-on-surface);
    text-align: center;
    margin-top: auto;
}


    footer p {
        margin-bottom: 0.8rem;
    }

.social-icons a {
    color: var(--color-on-surface);
    margin: 0 0.8rem;
    background-position: center;
    background-repeat: no-repeat;
    width: 1.4rem;
    height: 1.4rem;
    cursor: pointer;
    display: inline-block;
}

.instagram {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000000' viewBox='0 0 448 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E");
}

.facebook {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000000' viewBox='0 0 320 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5c16.3 0 29.4 .4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 159.4v42.1H14v97.8H80z'/%3E%3C/svg%3E");
}

.twitter {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000000' viewBox='0 0 512 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/%3E%3C/svg%3E");
}


/* --------------------- */
/* mobile responsiveness */
/* --------------------- */
@media (min-width: 600px) {
    .content {
        padding: 0rem 4rem;
    }

    footer {
        padding-top: 4rem;
        padding-right: 2.8rem;
        padding-bottom: 2rem;
        padding-left: 2.8rem;
    }
}

@media (min-width: 768px) {
    .content {
        padding: 0rem 7rem;
    }

    .header-content {
        padding: 1rem 3rem;
        height: 8rem;
    }

    .header-title h3 {
        margin-left: 2rem;
        font-size: 2rem;
    }

    .header-title img {
        width: 4rem;
    }

    .header-menu-toggle {
        width: 3rem;
        height: 3rem;
    }

    .small-nav-content a {
        font-size: 2rem;
    }
}

@media (min-width: 1068px) {
    .content {
        padding: 0rem 9rem;
    }

    footer {
        padding-left: 3.3rem;
        padding-right: 3.3rem;
    }
}

@media (min-width: 1280px) {
    .content {
        padding: 0rem 10rem;
    }

    .header-menu-toggle {
        display: none;
    }

    .small-nav {
        display: none;
    }

    .big-nav {
        display: flex;
    }

    footer {
        padding-left: 5rem;
        padding-right: 5rem;
    }
}