@font-face {
    font-family: 'Roboto Variable';
    src: url('../fonts/Roboto/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900; /* Specify the weight range */
    font-stretch: 50% 200%; /* Specify the width range */
}

html {
    font-size: 62.5%;
    /* --main-color-h: 0;
    --main-color-s: 100%;
    --main-color-l: 50%;
    --main-color: hsl(var(--main-color-h), var(--main-color-s), var(--main-color-l)); */
}

body {
    font-family: 'Roboto Variable', sans-serif;
    margin: 0;
    padding: 0;
    --mg-lr: clamp(30px, calc(-183.165px + 27.72vw), 216px);
    --mx-w-hero-txt: 500px;
    --w-card: 366px;
    --pd-lr: 3rem;
}

* {
    box-sizing: border-box !important;
}

*,button {
    line-height: 1.3;
    /* https://kittygiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-line-height/ formel ursprung */
    line-height: calc(2px + 2ex + 2px);
}

img {
    max-width: 100%;
    height: auto;
}

h1 {
    margin-bottom: 1.5em;
}

strong {
    margin-bottom: 0.5em;
}

#app {
    display: flex;
    align-items: center;
    flex-direction: column;
}

button:focus-visible, a.focus-visible{
    outline: 2px solid black;
    outline-offset: 2px;
}

button:hover{
    cursor: pointer;
}

h1:focus-visible{
    outline: none;
}