:root {
    --page-padding: 24%;
    --bg-lighter: #26262668;
    --bg: transparent;
    --bg-darker: #000000;
    --border: rgb(83, 93, 84);
    --text: #dadada;
    --text-darker: #bcbcbc;
    --inverse-text: white;
    --primary: rgb(82, 193, 97);
    --primary-hover: rgb(23, 81, 74);
    --accent: #ff9f1b;
    --danger: rgb(192, 29, 29);
    --card-bg: rgba(0, 0, 0, 0.608);
    --card-bg-hover: rgba(121, 121, 121, 0.901);
    --radius: 4px;
    --spacing-small: 8px;
    --spacing-medium: 24px;
    --spacing-large: 52px;
    --header-top-height: 34px;
}

@media screen and (max-width: 1200px) {
    :root {
        --page-padding: 8%;
    }
}


@media screen and (max-width: 600px) {
    :root {
        --page-padding: 1rem;
        --spacing-small: 6px;
        --spacing-medium: 12px;
        --spacing-large: 44px;
    }
}

html {
    background-image: url(/resources/themes/japan/japan.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

header {
    background-color: rgba(0, 0, 0, 0.808);
    color: var(--text);
}