/* You can add global styles to this file, and also import other style files */
:root {
    --size: 1;
    --header-height: calc(120px * var(--size));
    --header-background-width: calc(var(--content-width)), 1px;
    --content-width: calc(100vh * (768 / 1080)), 1px;
    --content-after-padding: calc((100vh * (768 / 1080)) - (var(--content-padding-width) * 2));
    --content-min-height: calc(97.5% - var(--header-height) - 137px - 10px), 1px;
    --content-padding-width: 2%;
    --content-padding-height: 2%;
    --inner-content-padding-height: 2%;
    --footer-padding: 10px;
    --background-image: url('../img/backgroundHighestResolution.webp');
    --background-dark-image: url('../img/backgroundHighestResolutionDark.webp');

    --text-size-xx-large: calc(50px * var(--size));
    --text-size-x-large: calc(40px * var(--size));
    --text-size-large: calc(30px * var(--size));
    --text-size-mid: calc(24px * var(--size));
    --text-size-small: calc(20px * var(--size));
    --text-size-x-small: calc(18px * var(--size));
    --text-size-xx-small: calc(16px * var(--size));

    --text-weight-large: 900;
    --text-weight-mid: 750;
    --text-weight-small: 600;
    --text-weight-x-small: 500;
    --text-weight-xx-small: 300;

    --spacing-xx-large: calc(64px * var(--size));
    --spacing-x-large: calc(32px * var(--size));
    --spacing-large: calc(24px * var(--size));
    --spacing-mid: calc(16px * var(--size));
    --spacing-small: calc(8px * var(--size));
    --spacing-x-small: calc(4px * var(--size));
    --spacing-xx-small: calc(2px * var(--size));

    --button-xxx-large: calc(500px * var(--size));
    --button-xx-large: calc(375px * var(--size));
    --button-x-large: calc(250px * var(--size));
    --button-large: calc(125px * var(--size));
    --button-mid: calc(100px * var(--size));
    --button-small: calc(80px * var(--size));
    --button-x-small: calc(60px * var(--size));
    --button-xx-small: calc(45px * var(--size));
    --button-xxx-small: calc(30px * var(--size));

    --border-xxx-large: calc(128px * var(--size));
    --border-xx-large: calc(96px * var(--size));
    --border-x-large: calc(64px * var(--size));
    --border-large: calc(48px * var(--size));
    --border-mid: calc(32px * var(--size));
    --border-small: calc(16px * var(--size));
    --border-x-small: calc(8px * var(--size));
    --border-xx-small: calc(4px * var(--size));
    --border-xxx-small: 1px;

    --color-primary: #fffc;
    --color-secondary: #ffffff26;
    --color-accent: #312633;
    --color-text-base: var(--color-primary);
    --color-text-accent-base: #FFF;
    --color-text-popup: #201c21;
    --color-text-accent-popup: #3e006b;
    --color-background-base: var(--color-secondary);
    --color-background-accent-base: var(--color-accent);
    --color-background-popup: #fffde9;
    --color-background-accent-popup: #dfddcc;
    --color-background-active: var(--color-active);
    --color-background-warning: var(--color-warning);
    --color-background-transparent: #ffffff0d;
    --color-border-base: var(--color-primary);
    --color-border-popup: var(--color-text-popup);
    --color-border-active: var(--color-active);
    --color-border-warning: #e8565666;
    --color-warning: #e85656e6;
    --color-active: #81f78180;

}


* {
    padding: 0;
    /* Remove default padding */
    margin: 0;
    /* Remove default margin */
    box-sizing: border-box;
    font-family: sans-serif; }

html {
    height: 100%; }

@media (max-aspect-ratio: 768/1080) {
    :root {
        --header-background-width: 100%;
        --content-width: 100vw;
        --content-padding-width: 0;
        --content-padding-height: 0;
        --inner-content-padding-width: 0%;
        --content-after-padding: 100vw;
        --content-min-height: calc(100% - var(--header-height) - (var(--size) * 145px) - 10px) !important; } }

@media (max-aspect-ratio: 768/1080) and (min-height: 801px) {
    :root {
        --content-min-height: calc(100% - var(--header-height) - (var(--size) * 120px) - 10px) !important; } }

@media (max-width: 2559px) and (max-height: 1439px) {
    :root {
        --size: 0.8;
        --background-image: url('../img/backgroundHighResolution.webp');
        --background-dark-image: url('../img/backgroundHighResolutionDark.webp');
        --content-min-height: calc(97.5% - var(--header-height) - 123px - 10px) } }

@media (max-width: 1919px) and (max-height: 1079px) {
    :root {
        --size: 0.6;
        --background-image: url('../img/backgroundMidResolution.webp');
        --background-dark-image: url('../img/backgroundMidResolutionDark.webp');
        --content-min-height: calc(97.5% - var(--header-height) - 99px - 10px) } }

@media (max-width: 1279px) and (max-height: 719px) {
    :root {
        --size: 0.5;
        --background-image: url('../img/backgroundLowResolution.webp');
        --background-dark-image: url('../img/backgroundLowResolutionDark.webp');
        --content-min-height: calc(97.5% - var(--header-height) - 95px - 10px) } }

@media (max-width: 330px) and (max-height: 650px) {
    :root {
        --size: 0.4;
        --background-image: url('../img/backgroundLowestResolution.webp');
        --background-dark-image: url('../img/backgroundLowestResolutionDark.webp');
        --content-min-height: calc(97.5% - var(--header-height) - 91px - 10px) } }