:root {
    --zerory: #070707;
    --primary: #131313;
    --primary-secondary: #1b1b1b;
    --secondary: #232323;
    --secondary-tertiary: #2b2b2b;
    --tertiary: #333333;
    --tertiary-quaternary: #3b3b3b;
    --quaternary: #444444;
    --white: #efefef;
    --gray: #a9a9a9;
    --gray-15: rgba(169, 169, 169, 0.15);
    --gray-50: rgba(169, 169, 169, 0.5);
    --masaszurke: #bcbcbc;
    --highlight: skyblue;
    --skyblue-75: rgba(135, 206, 235, 0.75);
    --slateblue: slateblue;
    --lastmove: moccasin;
    --transparent: transparent;
    --blue: #3366ff;
    --orange: #ffaa33;
    --green: #99dd44;
    --primarygreen: #88bb44;
    --secondarygreen: #46763e;
    --tertiarygreen: #7FFF00;
    --logo: #25C912;
    --logo-15: rgba(37, 201, 18, 0.15);
    --logo-75: rgba(37, 201, 18, 0.75);
    --logo-500: rgba(37, 201, 18, 0.5);
    --logo-50: rgb(105, 115, 73);
    --red: #E63946;
    --red-50: rgb(119, 89, 62);
}

@font-face {
    font-family: 'Soleil';
    src: url('fonts/Soleil-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Soleil';
    src: url('fonts/Soleil-Semi-Bold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Soleil';
    src: url('fonts/Soleil-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Soleil';
    src: url('fonts/Soleil-Extra-Bold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'ClarityCity';
    src: url('fonts/claritycity/ClarityCity-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'ClarityCity';
    src: url('fonts/claritycity/ClarityCity-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'ClarityCity';
    src: url('fonts/claritycity/ClarityCity-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'ClarityCity';
    src: url('fonts/claritycity/ClarityCity-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ClarityCity';
    src: url('fonts/claritycity/ClarityCity-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'ClarityCity';
    src: url('fonts/claritycity/ClarityCity-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'ClarityCity';
    src: url('fonts/claritycity/ClarityCity-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'ClarityCity';
    src: url('fonts/claritycity/ClarityCity-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'ClarityCity';
    src: url('fonts/claritycity/ClarityCity-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

::-webkit-scrollbar {
    width: 0.75vw;
    background-color: var(--primary);
}

::-webkit-scrollbar-thumb {
    background-color: var(--tertiary);
    border-radius: 5vh;
    border: 0.1vw solid var(--zerory);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--gray);
}

h1, h2, h3, p, span, input, textarea {
    all: unset;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    font-family: 'ClarityCity', sans-serif;
    line-height: 0;
}

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

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