/* WEBFONTS ---------------------------- */

@font-face {
    font-family: 'SuisseIntl';
    src: url('webfonts/SuisseIntl-Regular-WebXL.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'SuisseIntl';
    src: url('webfonts/SuisseIntl-RegularItalic-WebXL.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
}

/* VARIABLES --------------------------- */

:root {
    --indent: 100px; 
    --bg-color: #FFF;
    --text-color: #121111;
    --accent-color: #e0dbd5;
    --highlight-color: #ff4e08;
}

@media (max-width: 500px) {
    :root {
        --indent: 60px; 
    }
}

@media (max-width: 400px) {
    :root {
        --indent: 40px; 
    }
}

@media (max-width: 350px) {
    :root {
        --indent: 0px; 
    }
}

/* GENERAL ----------------------------- */

body {
    margin: 0;
    background: var(--bg-color);
    font-family: 'SuisseIntl', 'Helvetica', 'Arial', sans-serif;
    font-size: 12pt;
    letter-spacing: 0.15px;
    line-height: 1.5;
    color: var(--text-color);
}

a {
    color: #121111;
    text-decoration: underline;
}

a:hover {
    text-decoration-style: double;
}

/* HEADER ------------------------------ */

header {
    width: 100%;
    top: 0;
    position: fixed;
    z-index: 100;
}

header a {
    display: block;
    width: 160px;
    margin: 30px auto;
}

header img {
    margin: 0;
    width: 100%;
}

/* MAIN -------------------------------- */

main {
    width: 100%;
}

main section.intro {
    margin: 20px auto 20px 50px;
}

main section.image {
    width: 100%;
    background: rgb(204, 204, 204);
}

main section img {
    display: block;
    width: 100%;
}