:root {
    --bg-master-light: oklch(88% 0.01 90);
    --bg-master-dark: oklch(20% 0.01 90);

    --bg-color-dark: light-dark(oklch(from var(--bg-master-light) l c h), oklch(from var(--bg-master-dark) l c h)); /*Hintergrundvariationen*/
    --bg-color-medium: light-dark(oklch(from var(--bg-color-dark) 91% c h), oklch(from var(--bg-color-dark) 25% c h));
    --bg-color-light: light-dark(oklch(from var(--bg-color-dark) 94% c h), oklch(from var(--bg-color-dark) 30% c h));

    --shadow-color: light-dark(oklch(from var(--bg-color-dark) 70% c h), oklch(from var(--bg-color-dark) 10% c h));

    --text-color: light-dark(oklch(from var(--bg-master-dark) l c h), oklch(from var(--bg-master-light) l c h));
    --text-color-light: light-dark(oklch(from var(--bg-master-light) l c h), oklch(from var(--bg-master-light) 84% c h)); /* farbe, die immer hell ist */
    --text-color-dark: light-dark(oklch(from var(--bg-master-dark) l c h), oklch(from var(--bg-master-dark) l c h));  /* farbe, die immer dunkel ist */

    --primary-color-dark: light-dark(oklch(45% 0.192 32), oklch(40% 0.168 32));
    --primary-color-medium: light-dark(oklch(from var(--primary-color-dark) 58% 0.18 h), oklch(from var(--primary-color-dark) 50% c h));
    --primary-color-light: light-dark(oklch(from var(--primary-color-dark) 67% 0.15 h), oklch(from var(--primary-color-dark) 60% c h));

    --red-color: light-dark(oklch(80% 0.3 30), oklch(50% 0.2 30));
    --green-color: light-dark(oklch(80% 0.18 140), oklch(60% 0.16 140));
    --dialog-bg-color: light-dark (oklch(from var(--bg-color-dark) 80% c h / 0.5), oklch(from var(--bg-color-dark) 30% c h / 0.5));
}

html {
    --font-header: "verdana", "tahoma", sans-serif;
    --font-text: "arial", "helvetica", sans-serif;
}

h1 {
    text-align: center;
    font-size: 3rem;
    font-family: var(--font-header);
    color: var(--primary-color-medium);
}

body {
    width: 60%;
    @media (max-width: 60rem) {
        width: 90%;
    }
    margin-inline: auto;

}

p {
    font-family: var(--font-text);
    font-size: 1.5rem;
}

.textlink {
    color: light-dark(var(--primary-color-dark), var(--primary-color-light));
    text-decoration: none;
    font-weight: 600;
    background:
    linear-gradient(currentColor 0 0)
    bottom /var(--d, 0) 2px
    no-repeat;
    transition:0.5s;
        &:hover {
            --d: 100%;
        }
}