:root {
    --highlight: #0b77bf;
    --highlight-dark: #0b1dbf;
    --bg-1: #ffffff;
    --bg-2: #e2f5fb;
    --text-light-1: #f8fdfe;
    --text-light-2: #b5e6f5;
    --text-dark-1: black;

    --header-height: calc(40px + 3vh);


    font-family: 'Roboto', sans-serif;
    --mail-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath fill='%23fff' d='M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z'/%3E%3C/svg%3E");
    --phone-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath fill='%23fff' d='M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z'/%3E%3C/svg%3E");

    font-size: calc(0.9em + 0.2vw);
}

html {
    scroll-behavior: smooth;
}

:target {
    scroll-margin-top: calc(var(--header-height) - 2px);
}

*, *::after, *::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
}

.content {
    all: inherit;
    box-shadow: none;
    margin: 0 auto;
    padding: 0;
    width: 95%;
    max-width: 1200px;
    height: 100%;
}

.button {
    display: inline-block;
    padding: 0.5em;
    box-shadow: black 3px 3px 4px;
    background-color: var(--highlight);
    color: var(--text-light-1);
}

a, a:visited {
    text-decoration: none;
    display: block;

    &, &:visited {
        color: var(--text-light-1);
    }
}

section {
    padding: 2rem 0;
}

section:nth-child(odd) {
    background-color: var(--bg-2);
}

section:nth-child(even) {
    background-color: var(--bg-1);
}

h2 {
    text-align: center;
    padding-bottom: 0.8em;
}

p {
    margin: auto;
    padding-bottom: 1em;
    text-align: center;
}

.tel:before {
    content: var(--phone-icon);
    display: inline-block;
    width: 1em;
    margin-right: 0.2em;
    vertical-align: middle;
}

.mailto:before {
    content: var(--mail-icon);
    display: inline-block;
    width: 1em;
    margin-right: 0.2em;
    vertical-align: middle;
}