/* Variables */
html {
    /* Color semantics */
    --color-content-neutral: #fff;

    --color-text-body: #fff;
    --color-text-heading: #fff;
    --color-text-note: #ddd;

    --color-button-default: #fff;
    --color-button-selected: #ddd;
    --color-button-content-default: #ddd;
    --color-button-content-selected: #fff;

    --color-link-default: #fff;
    --color-link-selected: #ddd;

    /* Essentially the default text */
    --text-body-font-family: avenir,helvetica,arial,sans-serif;
    --text-body-font-size: 1em;
    --text-body-line-height: 1.6;

    /* Headings */
    --text-heading-font-family: futura,"Trebuchet MS",arial,sans-serif;
    --text-heading-font-size: 2em;
    --text-heading-line-height: 2;

    --text-subheading-font-family: futura,"Trebuchet MS",arial,sans-serif;
    --text-subheading-font-size: 1.1em;
    --text-subheading-line-height: 1.5;

    /* Terms */
    --text-note-font-family: avenir,helvetica,arial,sans-serif;
    --text-note-font-size: 0.9em;
    --text-note-line-height: 1;

    /* Layout dimensions */
    --dimension-layout-horizontal-margin: 128px;
    --dimension-layout-vertical-margin: 32px;

    --dimension-content-horizontal-margin: 0;
    --dimension-content-vertical-margin: 32px;

    /* Composites */
    --spacing-content-small: 16px;
    --spacing-content-large: 32px;

    --spacing-button-accent: 16px 32px 12px;

    --spacing-content-accent: var(--dimension-content-vertical-margin) var(--dimension-content-horizontal-margin) var(--dimension-content-vertical-margin);
    --spacing-content-neutral: 0 0 0;


    --spacing-layout-neutral: var(--dimension-layout-vertical-margin) var(--dimension-layout-horizontal-margin) var(--dimension-layout-vertical-margin);
}

.grid {
    display: grid;
    align-content: center;
    text-align: center;
    min-height: 100%;
}

.layout {
}

.layout .vertical {
    display: flex;
    flex-direction: column;
}

.layout .w-full {
    width: 100%;
}

.layout .justify-center {
    justify-content: center;
}

.layout .align-items-center {
    align-items: center;
}

.layout .gap-small {
    gap: var(--spacing-content-small);
}

.layout .gap-large {
    gap: var(--spacing-content-large);
}

.content-accent {
    margin: 0;
}

.content-neutral {
    margin: var(--spacing-content-neutral);
}

.margin-vertical-content {
    margin: var(--spacing-layout-neutral);
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overscroll-behavior: none;
}

html * {
    font-weight: 100;
    font-family: var(--text-body-font-family);
    font-size: var(--text-body-font-size);
    line-height: var(--text-body-line-height);
    padding: 0;
}

body {
    background-color: black;
    background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.75)), url('../images/background-image.jpeg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

a {
    text-decoration: none;
    color: var(--color-link-default);
    font-size: var(--text-body-font-size);
    font-family: var(--text-body-font-family);
    line-height: var(--text-body-line-height);
}

a:hover {
    color: var(--color-link-selected);
}

h1 {
    color: var(--color-text-heading);
    font-size: var(--text-heading-font-size);
    font-family: var(--text-heading-font-family);
    line-height: var(--text-heading-line-height);
    text-transform: uppercase;
}

h1:first-letter {
    font-size: 1.4em;
}

h2 {
    color: var(--color-text-heading);
    font-size: var(--text-subheading-font-size);
    font-family: var(--text-subheading-font-family);
    line-height: var(--text-subheading-line-height);
    text-transform: uppercase;
}

h2:first-letter {
    font-size: 1.2em;
}

p {
    color: var(--color-text-body);
    font-size: var(--text-body-font-size);
    font-family: var(--text-body-font-family);
    line-height: var(--text-body-line-height);
}

.note {
    color: var(--color-text-note);
    font-family: var(--text-note-font-family);
    font-size: var(--text-note-font-size);
    line-height: var(--text-note-line-height);
}

ul {
    list-style-type: none;
}

.button {
    position: relative;
    display: inline-block;
    color: var(--color-button-content-default);
    padding: var(--spacing-button-accent);
    border: 2px solid var(--color-button-default);
    text-transform: uppercase;
    letter-spacing: .4em;
    width: 250px;
    font-size: var(--text-subheading-font-size);
    font-family: var(--text-body-font-family);
}

.button:hover {
    color: var(--color-button-content-selected);
    border: 2px solid var(--color-button-selected);
}

li.icon svg {
    padding: var(--spacing-content-accent);
    fill: var(--color-link-default);
}

li.icon:hover svg {
    fill: var(--color-link-selected);
}

@media screen and (max-width: 768px) {
    html {
        /* Essentially the default text */
        --text-body-font-size: 1em;
        --text-body-line-height: 1.6;

        /* Headings */
        --text-heading-font-size: 1.7em;
        --text-heading-line-height: 1.7;

        --text-subheading-font-size: 1.1em;
        --text-subheading-line-height: 1.5;

        /* Terms */
        --text-note-font-size: 0.8em;
        --text-note-line-height: 1;

        /* Layout dimensions */
        --dimension-layout-horizontal-margin: 32px;
        --dimension-layout-vertical-margin: 32px;

        --dimension-content-horizontal-margin: 0;
        --dimension-content-vertical-margin: 16px;
    }
}