:root {
    --ratio: 1.35;

    /* --backgroud-color: #F9F1B0; */

    /* Farbe der Steine um den Pool */
    --backgroud-color: #d8ccb4;
    --background-color-shade-1: #c2b7a2;
    --background-color-shade-2: #aca390;
    --background-color-shade-3: #978E7D;
    --favicon-color: #88A997;
    --favicon-color-shade-3: #5f7669;
    --wall-color: #ececec;

    /* --backgroud-color: #F9F1B0; */
    --primary-color: #EDB446;
    --secondary-color: #EBD378;
}

body {
    background: var(--backgroud-color);
    background-image: linear-gradient(to bottom right, var(--backgroud-color), var(--background-color-shade-1));

}

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

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

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Cormorant';
    font-weight: initial;
    font-variation-settings: "wght"550;
    text-align: center;
}

h1 {
    font-size: var(--s4);
}

h2 {
    font-size: calc(var(--s3) * 0.9);
}

h3 {
    font-size: calc(var(--s2) * 1.1);
}

p {
    font-family: 'Nunito';
    font-size: var(--s1);
    font-variation-settings: "wght"450;
    text-align: center;
}

a,
a:visited {
    color: inherit;
}