@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');
:root {

    --font-size-h1: 2em;
    --font-size-h2: 1.7em;
    --font-size-h3: 1.5em;
    --font-size-p: 1em;
    --font-size-link: 1em;

    --size-icon: 2.5em;
    --size-image: 15em;
}

html[data-theme="dark"] {
    --color-surface: #191624;
    --color-background: #06050c;
    --color-text: #ffffff;
    --color-accent: #d68584;
    --color-shadow: #000000;
}

html[data-theme="light"] {
    --color-surface: #d68584;
    --color-background: #ffffff;
    --color-text: #000000;
    --color-accent: #686085;
    --color-shadow: #000000;
}

body {
    font-family: 'Questrial','Roboto', Arial, Helvetica;
    display: grid;
    grid-template-columns: 5% auto 5%; 
    grid-template-rows: auto auto auto;
    grid-template-areas:
        ". header ."
        ". main ."
        ". footer .";

    max-width: 1920px;
    margin: 0 auto;     
    /*user-select: none;*/
    background-color: var(--color-background);
    color: var(--color-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}

header {
    grid-area: header;
}

main {
    grid-area: main;
}

footer {
    grid-area: footer;
}