@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
    --zerory: #070707;
    --zerory-primary: #101010;
    --primary: #131313;
    --primary-secondary: #1b1b1b;
    --secondary: #232323;
    --secondary-tertiary: #2b2b2b;
    --tertiary: #333333;
    --tertiary-quaternary: #3b3b3b;
    --quaternary: #444444;

    --white: #efefef;
    --white-secondary: #d4d4d4;
    --gray: #a9a9a9;

    --green-25: #fafdf3;
    --green-50: #f7fcea;
    --green-75: #f3fae1;
    --green-100: #f0f9d8;
    --green-200: #def3b3;
    --green-300: #c9ec8e;
    --green-400: #b4e569;
    --green-500: #99dd44;
    --green-600: #7cc231;
    --green-700: #609c21;
    --green-800: #467515;
    --green-900: #2d4f0b;

    --black-25: rgba(0, 0, 0, 0.025);
    --black-50: rgba(0, 0, 0, 0.050);
    --black-75: rgba(0, 0, 0, 0.075);
    --black-100: rgba(0, 0, 0, 0.1);
    --black-200: rgba(0, 0, 0, 0.2);
    --black-300: rgba(0, 0, 0, 0.3);
    --black-400: rgba(0, 0, 0, 0.4);
    --black-500: rgba(0, 0, 0, 0.5);
    --black-600: rgba(0, 0, 0, 0.6);
    --black-700: rgba(0, 0, 0, 0.7);
    --black-800: rgba(0, 0, 0, 0.8);
    --black-900: rgba(0, 0, 0, 0.9);

    --box-shadow-1: 0 0 var(--space-1) var(--black-100);

    --logo: #E63946;

    --transparent: transparent;

    --text-05: clamp(0.75rem, 0.72rem + 0.15vw, 0.875rem);
    --text-1: clamp(0.95rem, 0.91rem + 0.2vw, 1.06rem);
    --text-2: clamp(1.2rem, 1.13rem + 0.36vw, 1.4rem);
    --text-4: clamp(1.5rem, 1.36rem + 0.73vw, 1.9rem);
    --text-6: clamp(1.875rem, 1.6rem + 1.4vw, 2.825rem);
    --text-8: clamp(2.25rem, 1.84rem + 2.08vw, 3.75rem);
    --text-16: clamp(3.375rem, 2.61rem + 3.82vw, 6.125rem);
    --text-32: clamp(4.5rem, 3.25rem + 6.25vw, 9.5rem);
    --text-64: clamp(6.0rem, 4.0rem + 10.0vw, 14.0rem);

    --space-025: clamp(0.125rem, 0.11rem + 0.0625vw, 0.1625rem);
    --space-05: clamp(0.25rem, 0.22rem + 0.125vw, 0.325rem);
    --space-1: clamp(0.5rem, 0.44rem + 0.25vw, 0.65rem);
    --space-2: clamp(0.875rem, 0.77rem + 0.5vw, 1.25rem);
    --space-3: clamp(1.1875rem, 1.035rem + 0.75vw, 1.75rem);
    --space-4: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
    --space-8: clamp(2.5rem, 2.14rem + 1.8vw, 3.75rem);
    --space-16: clamp(4.5rem, 3.77rem + 3.6vw, 7rem);
    --space-32: clamp(8rem, 6.55rem + 7.25vw, 13rem);
    --space-64: clamp(14rem, 11.1rem + 14.5vw, 24rem);

    --highlight: skyblue;
    --lastmove: moccasin;

    --secondarygreen: #46763e;
    --tertiarygreen: #7FFF00;
    --discord-burple: #5865F2;
}

link, button, h1, h2, h3, h4, h5, h6, p, fieldset, span, div, a, img, input, textarea, select, option, strong, label, ul, li, ol, table, tr, td, th, form, section, header, footer, nav, aside, article, figure, figcaption, address, video, audio, canvas, iframe, embed, object {
    all: unset;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}

.col {
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    min-height: 0;
}

.row {
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    box-sizing: border-box;
    min-height: 0;
}