@import "vars.css";
@import "fonts.css";
@import "grid.css";
@import "footer.css";
@import "header.css";
@import "cookie.css";
@import "breadcrumbs.css";
@import "button.css";
@import "banner.css";
@import "teaser.css";
@import "page.css";
@import "utils.css";

*, *::before, *::after {
    box-sizing: border-box;
}

:focus {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}

a:focus {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}

a[href*="https"]:after {
    content: "";
    min-width: 23px;
    min-height: 23px;
    -webkit-mask: var(--icon-url);
    mask: var(--icon-url);
    background-color: currentColor;
    display: inline-block;
    position: relative;
    top: 5px;
    -webkit-mask-size: contain;
    mask-size: contain;
}

html {
    font-size: 100%;
    width: 100%;
    height: 100%;
    scroll-behavior: smooth;
}

body {
    color: var(--color-black);
    background: var(--color-white);

    font-size: var(--font-size-regular);
    line-height: var(--line-height-regular);
    font-family: var(--font-regular);

    margin: 0;
    padding: 0;

    width: 100%;
    height: 100%;
}

/* aligning the footer at the bottom always */

body{
    min-height: 100%;
    display: grid;
    grid-template-areas:
    "cookie"
    "header"
    "main"
    "footer";
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 100%;
}

footer{
    grid-area: footer;
    align-self: end;
}


p, ul, ol{
    margin: 0 0 1rem 0;
}

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

figure{
    margin: 0;
    padding: 0;
}


h1, h2, h3, h4, h5, h6{
    margin: 0 0 1rem 0;
    line-height: var(--line-height-tight);
}


h2, h3{
    margin-top: 2rem;
}