@font-face {
    font-family: 'argesta_displayregular';
    src: url('argestadisplay-regular-webfont.eot');
    src: url('argestadisplay-regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('argestadisplay-regular-webfont.woff2') format('woff2'),
        url('argestadisplay-regular-webfont.woff') format('woff'),
        url('argestadisplay-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: heming-variable;
    src: url('heming-variable.ttf');
}

@font-face {
    font-family: "Heming Variable";
    src: url('Heming\ Variable.ttf');
}

:root {
    --font-heading: Zodiak, Georgia, "Times New Roman", serif;
    --font-heading-2: "Heming Variable", Calibri, monospace;
    --font-body: "JetBrains Mono", "Segoe UI", Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: light) {
    :root {

        --text-50: #f1f0f4;
        --text-100: #e3e2e9;
        --text-200: #c7c5d3;
        --text-300: #aaa8bd;
        --text-400: #8e8ba7;
        --text-500: #726e91;
        --text-600: #5b5874;
        --text-650: #54516c;
        --text: #444257;
        --text-800: #2e2c3a;
        --text-900: #17161d;
        --text-950: #0b0b0f;

        --background-50: #f3f2f2;
        --background-100: #e7e4e4;
        --background: #e2dfdf;
        --background-200: #cfc9c9;
        --background-300: #b6afaf;
        --background-400: #9e9494;
        --background-500: #867979;
        --background-600: #6b6161;
        --background-700: #504949;
        --background-800: #363030;
        --background-900: #1b1818;
        --background-950: #0d0c0c;

        --primary-50: #faeaf4;
        --primary-100: #f5d6e9;
        --primary-200: #ecacd3;
        --primary-300: #e283be;
        --primary-400: #d85aa8;
        --primary: #d13d98;
        --primary-500: #cf3092;
        --primary-600: #a52775;
        --primary-700: #7c1d58;
        --primary-800: #53133a;
        --primary-900: #290a1d;
        --primary-950: #15050f;

        --secondary-50: #f1f5f0;
        --secondary-100: #e4eae1;
        --secondary-200: #c9d5c3;
        --secondary: #becdb7;
        --secondary-300: #adc0a5;
        --secondary-400: #92ab87;
        --secondary-500: #779669;
        --secondary-600: #5f7854;
        --secondary-700: #475a3f;
        --secondary-800: #303c2a;
        --secondary-900: #181e15;
        --secondary-950: #0c0f0a;

        --accent-50: #faeaf5;
        --accent-100: #f5d6eb;
        --accent-200: #ecacd7;
        --accent-300: #e283c2;
        --accent-400: #d85aae;
        --accent-500: #cf309a;
        --accent-600: #a5277b;
        --accent: #882066;
        --accent-700: #7c1d5c;
        --accent-800: #53133e;
        --accent-900: #290a1f;
        --accent-950: #15050f;

    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --text-50: #0d0d0c;
        --text-100: #191b18;
        --text-200: #333531;
        --text-300: #4c5049;
        --text-400: #656a62;
        --text-500: #7e857a;
        --text: #9da29a;
        --text-600: #989d95;
        --text-700: #b2b6af;
        --text-800: #ccceca;
        --text-900: #e5e7e4;
        --text-950: #f2f3f2;

        --background-50: #0d0c0c;
        --background-100: #1b1818;
        --background: #201d1d;
        --background-200: #363030;
        --background-300: #504949;
        --background-400: #6b6161;
        --background-500: #867979;
        --background-600: #9e9494;
        --background-700: #b6afaf;
        --background-800: #cfc9c9;
        --background-900: #e7e4e4;
        --background-950: #f3f2f2;

        --primary-50: #12070e;
        --primary-100: #250e1c;
        --primary-200: #4a1c38;
        --primary-300: #6f2a55;
        --primary-400: #943871;
        --primary: #a63f7f;
        --primary-500: #b9468d;
        --primary-600: #c76ba4;
        --primary-700: #d590bb;
        --primary-800: #e3b5d1;
        --primary-900: #f1dae8;
        --primary-950: #f8edf4;

        --secondary-50: #0b0b0f;
        --secondary-100: #16161d;
        --secondary-200: #2c2d3a;
        --secondary: #404154;
        --secondary-300: #424357;
        --secondary-400: #585974;
        --secondary-500: #6e6f91;
        --secondary-600: #8b8ca7;
        --secondary-700: #a8a9bd;
        --secondary-800: #c5c6d3;
        --secondary-900: #e2e2e9;
        --secondary-950: #f0f1f4;

        --accent-50: #14050f;
        --accent-100: #280b1e;
        --accent-200: #51153c;
        --accent-300: #79205a;
        --accent-400: #a12b78;
        --accent-500: #c93696;
        --accent-600: #d45eab;
        --accent-700: #df86c0;
        --accent: #e49aca;
        --accent-800: #eaaed5;
        --accent-900: #f4d7ea;
        --accent-950: #faebf4;
    }
}

body {
    margin: 0;
    background: var(--background);
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.6;
}

h1 {
    font-size: 4rem;
    font-weight: 200;
    font-family: var(--font-heading);
    color: var(--primary);
}

h2,
h3 {
    font-size: 2rem;
    font-weight: 800;
    font-family: var(--font-heading-2);
    color: var(--accent);
}


.grid-holder {
    border: 0.2em solid var(--secondary);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr) minmax(300px, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(50px, 1fr) repeat(16, 2fr);


}

.container {
    grid-column: span 2 / span 2;
    grid-row: span 16 / span 16;
    grid-column-start: 2;
    grid-row-start: 2;
    text-align: center;
    border: 0.2em 0em solid var(--secondary);
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

.cte {
    grid-column: span 2 / span 2;
    grid-row: span 3 / span 3;
}

.container2 {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
    grid-column-start: 2;
}

.container3 {
    grid-column: span 2 / span 2;
    grid-row: span 3 / span 3;
    grid-column-start: 2;
}

footer {
    text-align: center;
    padding: 2rem 0;
}

a {
    color: var(--secondary);
}