:root {
    /* Colors */
    --accent: #4368a1;
    --hover: #34517d;
    --background: #eee;
    --textColor: #464f56;
    --border: #a7a7a7;
    --red: #e30612;   
    /* FontSizes */
    --textBaseSize: 1rem; /* 16px */
    --textBaseLineHeight: 1.4rem;
    --textSmallSize: 0.75rem;
    --h1FontSize: 2rem;
    --h1LineHeight: 3rem;
}

* {
    font-family: "Open Sans", sans-serif;
    box-sizing: border-box;
}

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

body {
    font-family: "Open Sans", sans-serif;
    font-size: var(--textBaseSize);
    line-height: var(--textBaseLineHeight);
    font-weight: 300;
    color: var(--textColor);
    margin: 0;
}

h1, h2, h3, h4, h5 {
    font-family: "Open Sans", sans-serif;
}

h2 {
    font-size: 19px;
    line-height: 29px;
    color: var(--accent);
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 0px;
}

p, span, .text-base {
    font-size: var(--textBaseSize);
    font-weight: 400;
}

a {
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}

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

.text-sm {
    font-size: var(--textSmallSize);
}

.leading-base {
    line-height: var(--textBaseLineHeight);
}

main {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.singleButtonCentered {
    display: flex;
    justify-content: center;
}

.button, .button:visited {
    text-decoration: none;
    display: inline-box;
    color: #ffffff;
    background-color: var(--red);
    font-size: var(--textBaseSize);
    font-weight: 700;
    line-height: var(--textBaseLineHeight);
    text-transform: uppercase;
    padding: 6px 25px;
    transition: all 0.2s ease;
    cursor: pointer;
    align-items: center;
    position: relative;
    outline: 0;
}

/* Hover state */
.button:hover {
    background-color: var(--red);
    color: #ffffff;
    box-shadow: 2px 2px 14px 0 rgba(0, 0, 0, .08);
}

.button:focus-visible {
    outline: 2px solid var(--red);
}

.uploadFieldContainer .button {
    background-color: var(--accent);
    height: 58px;
    padding: 0px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uploadFieldContainer .button:hover {
    background-color: var(--hover);
}

/* Header & Logo */
header {
    height: 64px;
    width: 100%;
    background-color: var(--accent);
}

.logoHolder {
    max-width: 740px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
}

header .logoHolder a {
    position: absolute;
    top: 12px;
    left: 0px;
}

header .logoHolder svg {
    width: 160px;
    height: auto;
}

/* Hero */
#hero {
    width: 100%;
    margin: 0 auto;
}

#hero img {
    display: flex;
    width: 100%;
    max-height: 300px;
    object-fit: cover;
}

/* Page Title */
#pageTitle {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 740px;
    padding-left: 10px;
    padding-right: 10px;
}

h1 {
    font-weight: 700;
    font-size: var(--h1FontSize);
    line-height: var(--h1LineHeight);
    color: var(--accent);
    margin: 0;
}

#pageTitle span {
    font-size: 19px;
    line-height: 29px;
    font-weight: 600;
    color: var(--textColor);
}

#pageTitle #pensum-value {
    display: contents;
    color: var(--secondary);
}

/* Content */
.pageContent {
    margin: 0 auto;
    width: 100%;
    max-width: 740px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 124px;
}

/* Headless select boxes */
ul[data-anchor="top center"] {
    border-radius: 8px 8px 0 0;
}

button[data-dropdown-anchor="top"] {
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}
button[data-dropdown-anchor="bottom"] {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}

/* Responsive */
@media screen and (max-width:767px) {
    :root {
        /* Header & Logo */
        --logoWidth: 6.25rem;
        --logoHeight: 2.6875rem;
        /* FontSizes */
        --textBaseSize: 1.125rem;
        --textBaseLineHeight: 1.675rem;
        --textSmallSize: 0.9rem;
        --h1FontSize: 2rem;
        --h1LineHeight: 2.6rem;
    }
    .pageContent {
        padding-bottom: 3rem;
    }
    .button, .button:visited {
        line-height: var(--textBaseLineHeight);
    }
}