@import url('/css/navbar.css');
@import url('/css/footer.css');

@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;
}

* {
    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;
}

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

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;
    }
}