/*===============GOOGLE FONTS============*/

@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@500&family=Open+Sans:wght@300&family=Raleway:wght@300&display=swap');

/*======= VARIABLES CSS ======== */

:root {
    --header-height: 3.5rem;
    /*=========Colors========*/
    /*color mode HSL(hue, sturation, lightness)*/
    --first-color: hsl(195, 100%, 30%);
    --gradient-color: linear-gradient(90deg, hsl(210, 55%, 20%), hsl(192, 62%, 25%));
    --title-color: hsl(210, 55%, 20%);
    --text-color: hsl(210, 24%, 15%);
    --white-color: #fff;
    --body-color: hsl(210, 55%, 85%);
    /*font and typography*/
    /*0.5rem =8px */
    --body-font: "Dosis", sans-serif;
    --second-font: "Raleway", sans-serif;
    --biggest-font-size: 2.25rem;
    --normal-font-size: 0.938rem;
    --small-font-size: .813rem;
    /*===== Font weight =========*/
    --font-regular: 400;
    --font-medium: 500;
    --font-semi-bold: 600;
    /*======= z-index ========*/
    --z-tooltip: 10;
    --z-fixed: 100;
}


/*========= responsive typography =======*/

@media screen and (min-width: 1024px) {
     :root {
        --biggest-font-size: 4rem;
        --normal-font-size: 1rem;
        --small-font-size: .875rem;
    }
}


/*============BASE=============*/

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    font-weight: var(--font-medium);
    background-color: var(--body-color);
    color: var(--text-color);
}

.rot {
    background-color: red;
}

.gelb {
    background-color: yellow;
}

.gruen {
    background-color: green;
}

tr {
    margin: 0.6rem;
}