:root {
    /* Color A */
    --clr-primary-a0: #5c0b0b;
    --clr-primary-a10: #6e0101;
    --clr-primary-a20: #c22020;

    --clr-surface-a0: #b72323;
    --clr-surface-a10: #a0153e;
    --clr-surface-a20: #d04646;
    --clr-surface-a30: #c05f5f;
    --clr-primary-a40: #fb917f;
    --clr-surface-a50: #f5b8ac;

    /* Color B */
    --clr-primary-b0: #0b376d;
    --clr-primary-b10: #144582;
    --clr-primary-b20: #2673d2;

    --clr-surface-b0: #4145ca;
    --clr-surface-b10: #24276e;
    --clr-surface-b20: #4970d1;
    --clr-surface-b30: #697fc2;
    --clr-primary-b40: #97adeb;
    --clr-surface-b50: #b8c1e1;

    --clr-gold: #ffd700;
}

* {
    margin: 0;
    padding: 0;
    border: none;
    color: black;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
    line-height: 1;
}

a {
    text-decoration: none;
}

button {
    cursor: pointer;
}

img {
    user-select: none;
}

.hidden-scroll-bar {
    overflow: auto;
    /* For Firefox */
    scrollbar-width: none;
    /* For Internet Explorer and Edge */
    -ms-overflow-style: none;
}

.hidden-scroll-bar::-webkit-scrollbar {
    /* For Chrome, Safari, and newer Edge */
    display: none;
}

.hidden {
    display: none;
}

button:disabled,
button[disabled] {
    cursor: not-allowed;
}

/* Fonts */

@font-face {
    font-family: "Carter One";
    src: url("../assets/fonts/CarterOne-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

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

@font-face {
    font-family: "Roboto";
    src: url("../assets/fonts/Roboto-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: bold;
}

@font-face {
    font-family: "Roboto Mono";
    src: url("../assets/fonts/RobotoMono-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}