@font-face {
    font-family: 'Lekton';
    src: url("/font/Lekton-Regular.ttf") format("truetype");
    font-weight: 400;
    ascent-override: 100%;
    font-display: swap;
}

@font-face {
    font-family: 'Lekton';
    src: url("/font/Lekton-Bold.ttf") format("truetype");
    font-weight: 700;
    ascent-override: 100%;
    font-display: swap;
}

@font-face {
    font-family: 'Lekton';
    src: url("/font/Lekton-Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    ascent-override: 100%;
    font-display: swap;
}

@font-face {
    font-family: 'Monk Base';
    src: url("/font/Monk-Base.otf") format("opentype");
    font-weight: 700;
    ascent-override: 100%;
    font-display: swap;
}

:root {
    --base1: 228, 33, 40;
    --base2: 61 212 234;
    --dark: 29, 30, 28;
    --dark2: 39, 39, 39;
    --dark3: 147, 147, 147;
    --gray-950: 3, 7, 18;
    --gray-300: 209, 213, 219;
    --gray-400: 156, 163, 175;
    --gray-500: 107, 114, 128;
    --gray-100: 243, 244, 246;
    --font-secondary: 'Lekton', sans-serif;

    --dark-mode-body-bg: 51, 51, 51;
    --white: 255, 255, 255;
    --white2: 243, 243, 243;

    /* From: easings.min.css */
    --ease-elastic-out-3: cubic-bezier(.5, 1.25, .75, 1.25);
    --ease-elastic-3: var(--ease-elastic-out-3);
    --ease-elastic-out-4: cubic-bezier(.5, 1.5, .75, 1.25);
    --ease-elastic-4: var(--ease-elastic-out-4);
    --ease-3: cubic-bezier(.25, 0, .3, 1);
    --ease-out-5: cubic-bezier(0, 0, 0, 1);
}

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

ul, ol {
    list-style-type: none;
}

a {
    text-decoration: none;
}

.color-base1 {
    color: #E42128;
}

.pl-2 {
    padding-left: 8px;
}

/* General Styles */
html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    font-family: 'Monk Base', sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex-grow: 1;
}

body.dark-mode {
    background-color: rgb(var(--dark-mode-body-bg));
}

body.dark-mode main {
    color: rgb(var(--white));
}

body.dark-mode a {
    color: rgb(var(--base1));
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: default;
}

.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}

/*md*/
@media (min-width: 768px) {

    .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {

    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {

    .container {
        max-width: 1280px;
    }
}

@media (min-width: 1536px) {

    .container {
        max-width: 1536px;
    }
}