@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('./playfair-display-latin.woff') format('woff');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Poltawski Nowy';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('./poltawski-nowy-700-latin.woff') format('woff');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Poltawski Nowy';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('./poltawski-nowy-700-italic-latin.woff') format('woff');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('./poppins-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/** 
  * Theme by hash navigation
  */

/* Default */
:root {
    --color-bg: #ffae70;
    --color-primary: #000;
    --color-faded: #0009;
    --font-size-root: 16px;
    --link-color: #0b1ac6;
    --hover-bg: #000;
    --hover-text: #fff;
    --theme-selector-background: #ffae70;
    --theme-selector-text: #0009;
}

/* Cyberpunk */
html[data-theme="dark"] {
    --color-bg: linear-gradient(235deg, #000 0%, #000 10vw, #fff 10vw, #fff 12vw, #000 12vw, #000 16vw, #fff 16vw, #fff 20vw, #000 20vw);
    --color-primary: #ffffff;
    --color-faded: #ffffff99;
    --link-color: #ff2f97;
    --hover-bg: #fff;
    --hover-text: #000;
    --theme-selector-background: #000;
    --theme-selector-text: #fff;
    --theme-selector-active-bg: #fff;
    --theme-selector-active-text: #ff2f97;
    --theme-selector-hover-bg: #fff;
    --theme-selector-hover-text: #000;
}

/**
 * Shell
 */

body {
    /* Structure */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    max-width: 900px;
    margin: 0 auto;

    /* Skin */
    font-family: sans-serif;
    font-size: var(--font-size-root);
    background: var(--color-bg);
    color: var(--color-primary);
    transition: background 0.3s ease, color 0.3s ease;
}

/**
  * Core Hover/Tabbing Focus Styles
  * as a rule, all navigation hover hints are the same.
*/
a:focus-visible,
a:active,
a:hover {
    background: var(--hover-bg) !important;
    color: var(--hover-text) !important;
    text-decoration: none !important;

    outline: none !important;
}


/**
 * Header 
 */

@media (orientation: landscape) {
    header {
        margin: 8rem 1rem 2rem 1rem;
    }
}

@media (orientation: portrait) {
    header {
        margin: 1rem;
    }
}

header {
    text-align: center;
    padding: 1rem;

    h1 {
        font-family: "Poltawski Nowy", serif;
        font-size: 3.5rem;
        font-weight: 700;
        text-transform: uppercase;
        margin: 0rem;
    }

    h2 {
        font-family: "Poppins", san-serif;
        font-weight: 700;
        font-size: 1.25rem;
        text-transform: uppercase;
        margin: 0;
    }

    p {
        font-size: 1.6rem;
        font-family: "Playfair Display", serif;
        font-weight: 400;
        margin: 0;
    }


    nav {
        margin: 0.75rem 0;
    }

    nav ul {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        margin: 0;
        padding: 0;
    }

    nav ul li {
        list-style-type: none;
        display: flex;
        justify-content: center;
    }

    nav li a,
    nav li a:visited {
        /* Structure */
        text-decoration: none;
        border: none;

        /* Skin */
        font-size: 1rem;
        font-weight: 700;
        text-transform: lowercase;
        color: var(--color-faded);
        transition: color 0.3s ease;
    }


    /* Add space after each link */
    nav li:after {
        /* Structure */
        content: "  ";
        white-space: pre;

        /* Skin */
        opacity: 0.4;
    }

    nav li:last-child:after {
        /* Structure */
        content: "";
    }
}



/**
  * Main Sections
  */

main {
    section {
        margin: 0.5rem 1rem;
        padding: 0.5rem;
    }


    h1,
    p {
        margin: 0;
    }

    h1 {
        /* Skin */
        font-family: "Playfair Display", serif;
        font-size: 1.4rem;
        font-weight: 700;
    }

    /* Subtitle */
    h1+p {
        font-weight: 300;
        font-style: italic;
    }

    a,
    a:visited {
        color: var(--link-color);
        font-weight: 700;
        text-decoration: underline dotted;
        transition: color 0.3s ease;
    }
}