/* ==========================================
   Fonts
========================================== */

@font-face {
    font-family: "Quicksand";
    src: url("/assets/fonts/Quicksand-VariableFont_wght.ttf") format("truetype");
}

@font-face {
    font-family: "pokemon";
    src: url("/assets/fonts/pokemonClassic.ttf") format("truetype");
}

/* ==========================================
   CSS Variables
========================================== */

:root {
    --color-primary: #007bff;
    --color-primary-hover: #0056b3;

    --color-text: #333;
    --color-page: #f4f4f4;

    --color-card: rgba(255, 255, 255, 0.9);
    --color-header: rgba(255, 255, 255, 0.8);

    --shadow-small: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
    --shadow-large: 0 8px 32px rgba(0, 0, 0, 0.3);

    --radius-small: 5px;
    --radius-medium: 10px;
    --radius-large: 15px;

    --transition: 0.3s;
}

/* ==========================================
   Global Reset
========================================== */

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

/* ==========================================
   Global Styles
========================================== */

body {
    margin: 0;
    padding: 0;

    min-height: 100vh;

    display: flex;
    flex-direction: column;

    background: var(--color-page);
    color: var(--color-text);
}

body,
button,
input,
textarea,
select,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
.content-box,
.cartridge-cell {
    font-family: "Quicksand", Arial, sans-serif;
}

img {
    display: block;
    max-width: 100%;
}

button {
    font: inherit;
}

input,
textarea {
    font: inherit;
}

.loading {
    visibility: hidden;
}