* {
    font-family: "Zalando Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;

    --space-xs: 0.25rem;
    --space-s: 0.5rem;
    --space-m: 1rem;
    --space-l: 2rem;
    --space-xl: 4rem;

    --max-width: 700px;

    --colour-link: rgb(21, 142, 255);

    font-size: 1.1rem;
}

.txt-ondark{
    color: rgb(255, 255, 255);
}
.txt-ondark-g{
    color: rgb(168, 168, 168);
}

body{
    margin: 0;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    height: 100%;
}

main{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--max-width);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-xl);
    margin-left: var(--space-m);
    margin-right: var(--space-m);
    gap: var(--space-l);
}

main.width{
    max-width: var(--max-width-wide);
}

a{
    color: var(--colour-link);
    text-decoration: none;
    font-weight: 400;
}
a:hover{
    text-decoration: underline;
}

p a{
        font-size: 1rem;
}

h3{
    font-weight: 400;
    padding: 0;
    margin: 0;
}
p{
    margin: 0;
    font-weight: 200;
    font-size: 1rem;

    color: rgb(90, 90, 90);

}

ul{
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}

li{
    list-style: none;
}


.grid-2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-s);
}
.grid-3{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-s);
}


.grid-1{
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-s);
}

iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto; /* optional but safe */
  display: block; /* recommended for iframes */
}
img{
    width: 100%;
}

em{
    color: white
}