@font-face {
    font-family: 'SF Pro Display';
    font-style: normal;
    font-weight: 400;
    src: local('SF Pro Display'), url('../fonts/SFPRODISPLAYREGULAR.OTF') format('opentype')
}

@font-face {
    font-family: 'SF Pro Display';
    font-style: normal;
    font-weight: 500;
    src: local('SF Pro Display'), url('../fonts/SFPRODISPLAYMEDIUM.OTF') format('opentype')
}

@font-face {
    font-family: 'SF Pro Display';
    font-style: normal;
    font-weight: 700;
    src: local('SF Pro Display'), url('../fonts/SFPRODISPLAYBOLD.OTF') format('opentype')
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    appearance: none;
}

:root {
    /* colors */
    --color-background: #FAFAFA;
    --color-text: #363636;
    --color-text-reverse: #FAFAFA;

    --color-accent-primary: #736CED;
    --color-accent-secondary: #5761D8;

    --color-accent-light: #D4C1EC;

    --color-input-primary: #F0F0F0;
    --color-input-secondary: #DEDEDE;

    --color-error: #f35f5f;
    --color-error-secondary: #e85050;

    --color-border: #DEDEDE;

    --margin-5: .5rem;
    --margin-10: 1rem;
    --margin-20: 2rem;
    --margin-40: 4rem;
    --margin-60: 6rem;
    --margin-100: 10rem;
    --margin-140: 14rem;
    --margin-220: 22rem;

    --font-size-large-title: 3.4rem;
    --font-size-title-1: 2.8rem;
    --font-size-title-2: 2.2rem;
    --font-size-title-3: 2rem;
    --font-size-headline: 1.7rem;
    --font-size-text: 1.7rem;
    --font-size-subhead: 1.5rem;
    --font-size-footnote: 1.3rem;
}



/* === DEFAULTS === */

html,
body,
section {
    width: 100%;
    min-height: 100%;

    background-color: var(--color-background);
}

html {
    font-size: 10px;
}

body {
    font-family: 'SF Pro Display', Helvetica, Arial, sans-serif;
    max-width: 1000px;
    margin: auto;
}

section {
    padding: 30px 16px;
}


/* headings */
h1,
h2,
h3,
h4,
h5 {
    color: var(--color-text);
}

h1 {
    font-size: var(--font-size-large-title);
}

h2 {
    font-size: var(--font-size-title-1);
}

h3 {
    font-size: var(--font-size-title-2);
}

h4 {
    font-size: var(--font-size-title-3);
}

h5 {
    font-size: var(--font-size-headline);
}


/* paragraph & anchor */
p,
a {
    font-size: var(--font-size-text);
    color: var(--color-text);
    text-decoration: none;
}

p {
    margin-bottom: var(--margin-10);
}


/* hr */

hr {
    max-width: 50px;
    height: 2px;

    color: var(--color-border);
    margin-top: var(--margin-50);
    margin-bottom: var(--margin-50);
}

/* input & button */

button,
input {
    width: 100%;
    height: 5rem;

    border: none;
    border-bottom: .4rem solid;
    border-radius: 4px;

    padding: 1.5rem;

    font-size: var(--font-size-text);
}

input {
    background-color: var(--color-input-primary);
    border-bottom-color: var(--color-input-secondary);
}

    input.error {
        border-bottom-color: var(--color-error);
    }

button {
    background-color: var(--color-accent-primary);
    border-bottom-color: var(--color-accent-secondary);

    font-weight: 700;
    color: var(--color-text-reverse);

    margin-bottom: var(--margin-40);

    transition: border .2s ease-in;
}

button:hover,
button:focus {
    border-bottom-color: var(--color-accent-primary);
    cursor: pointer;
}

/* input labels */
label {
    font-size: 1.7rem;
    font-weight: bold;
}

label + input {
    margin-top: var(--margin-10);
}

/* Form */

.form input:not(:last-of-type) {
    margin-bottom: var(--margin-20);
}

.form input:last-of-type {
    margin-bottom: var(--margin-40);
}

.form p {
    margin-bottom: var(--margin-40);
}

.form p.input-error {
    font-size: 1.3rem;
    color: var(--color-error);
    margin: 1rem 0;
    font-weight: bold;
}

/* header */

header p {
    margin-bottom: 2px;
}

header:not(.additional),
header.additional > div:first-child {
    display: flex;
    flex-direction: row;
    align-items: center;
}

header:not(.border-bottom),
header.additional > div:first-child {
    margin-bottom: var(--margin-20);
}

header:not(.large) {
    margin-bottom: var(--margin-40);
}

header:not(.large)>i,
header:not(.large)>div:first-child i {
    font-size: 3rem;
    margin-right: var(--margin-20);
    color: var(--color-accent-primary);
}

header.large {
    display: block;
}

header.large>i {
    font-size: 5rem;
    color: var(--color-accent-primary);
    margin-bottom: var(--margin-20);
}

header.large>h2 {
    margin-bottom: var(--margin-10);
}

header.large>p {
    margin-bottom: var(--margin-20);
}

header.bottom-space::after {
    content: '';
    display: block;

    width: 50px;
    height: 2px;

    background-color: var(--color-border);

    margin: var(--margin-40) 0;
}



/* === CUSTOM CLASSES === */

/* popup */

.popup {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;

    max-width: 1000px;
    margin: auto;

    margin-top: 30px;
    padding: var(--margin-20);

    border-bottom: .4rem solid;
    border-bottom-color: var(--color-input-secondary);
    border-radius: 4px;

    background-color: var(--color-input-primary);
}

    .popup.error {
        background-color: var(--color-error);
        border-bottom-color: var(--color-error-secondary);
    }

    .popup > * {
        color: var(--color-text);
    }

        .popup.error > * {
            color: var(--color-text-reverse);
        }

    .popup h5 {
        margin-bottom: var(--margin-5);
    }

    .popup p {
        margin-bottom: 0;
    }

/* subtext */

.sub {
    font-size: var(--font-size-footnote);
}


/* link */
.link {
    display: flex;
    flex-direction: row;
    align-items: center;

    margin-bottom: var(--margin-20);
}

.link i {
    font-size: var(--font-size-subhead);
    margin-right: var(--margin-5);
    color: var(--color-accent-light);
}

.link p, .link a {
    font-size: var(--font-size-subhead);
    font-weight: 700;
    margin-bottom: 0;
}

.link.large i {
    margin-right: var(--margin-10);
}

.link.large p, .link.large a, .link.large i {
    font-size: var(--font-size-text);
}

.brand-color {
    color: var(--color-accent-primary);
}