:root {
 --main-bg: #fafafa;
 --secondary-bg: #1750a5;
 --yellow-text: #fce300;
 --blue-text: #001c45;
 --link-text: #1750a5;
 --muted-text: #acb8ca;
}

/*General styling*/
body {
    overflow-x: hidden;
    background-color: var(--main-bg);
}
body main.page-wrapper {
    max-width: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
}
.inner-wrapper {
    width: min(1400px, 90vw);
    min-height: 100vh;
}
/* Typography */
p, a, li span, li {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

h1,h2,h3,h4 {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
}

h1 {
    font-size: clamp(24px, 8vw ,48px);
}

h2 {
    font-size: clamp(20px, 6vw,32px);
}

h3 {
    font-size: clamp(16px, 4vw,24px)
}

a {
    color: var( --link-text);
    text-decoration: underline;
    transition: 200ms ease-in-out all;
    position: relative;
}

a:hover {
    color: var(--blue-text);
}

i, h1, h2, h3, h4, p, li, li span {
    color: var(--blue-text);
}

i {
    font-size: 1.5rem;
    margin-right: 0.5rem;
    width: 24px;
}

.yellow-text {
    color: var(--yellow-text);
    text-align: center;
    padding: 0.5rem 0.5rem;
}

.muted span {
    color: var(--muted-text);
}

.padding-top {
    padding-top: 1rem;
}

/* Logo + link */
header.header{
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    width: min(1400px, 90vw);
}

header.header section {
    display: flex;
    align-items: center;
}

header.header section img {
    height: auto;
    width: 300px;
    padding: 1.5rem 0;
}

/* Blue info bar */
section.info-bar {
    background-color: var(--secondary-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    width: max(1400px, 100vw);
    right: calc(100vw - 1400px);
}
section.info-bar p {
    width: min(1400px, 90vw);
}
/* Text top */
section.text-top {
    padding-top: min(80px, 2.5vh);
    padding-bottom: min(40px, 2vh);
}

section.text-top p {
    width: min(485px, 100%);
    padding-top: min(1rem, 2vh);
    padding-bottom: 0.5rem;
}


/* Images */
section.images {
    display: flex;
    flex-flow: row;
    gap: 1rem;
}

section.images .image-right {
    display: flex;
    flex-flow: column;
    gap: 1rem;
}

/* contact */
section.contact h2 {
    padding-top: min(1rem, 2vh);
}
section.contact h3 {
    padding-top: min(1rem, 2vh);
    padding-bottom: min(1rem, 2vh);
}
section.contact .contact-container {
    display: flex;
    gap: min(168px, 5vw)
}
section.contact .openingstijden {
    width: 211px;
}
section.contact .openingstijden li {
    display: flex;
    justify-content: space-between;
}

section.contact .contact-container div:first-child ul li {
    display: flex;
    flex-flow: row;
}

section.contact .contact-container div:first-child ul li.no-icon {
    padding-left: calc(24px + 0.5rem);
}

/* footer */
footer {
    display: flex;
    justify-content: center;
    margin-top: min(120px, 48px);
    padding: min(80px, 40px) 0;
    border-top: 1px solid var(--link-text);
}
footer img {
    height: auto;
    width: 300px;
}