@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 "pagination.css";
@import "card.css";
@import "teaser.css";
@import "page.css";
@import "summary.css";
@import "utils.css";
@import "banner.css";
@import "search.css";
@import "form.css";

@import "block.css";
@import "block__quote.css";
@import "block__img.css";
@import "block__text.css";
@import "block__team.css";
@import "block__slideshow.css";
@import "block__faq.css";
@import "block__button.css";
@import "block__downloads.css";
@import "block__media.css";
@import "block__search.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:not(.socials a) {
    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 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;
}

img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

figure{
    margin: 0;
    padding: 0;
}


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


h2{
    color: var(--color-black);
    margin-top: 3rem;
}

h2:first-of-type{
    margin-top: 0rem;
}

h3{
    color: var(--color-accent);
    margin-top: 2rem;
}

a{
    color: var(--color-accent);
}

a:hover{
    background: var(--color-bg-light);
    color: var(--color-black);
    text-decoration: none;
}

strong, b{
    font-family: var(--font-semibold);
}

.color-bg-light{
    background-color: rgba(34, 146, 151, 0.1);
    background-color: var(--color-bg-light);
    background-color: #e7f1f2;
}

section{
    margin: 4rem 0;
}