html {
    scroll-behavior: smooth;
}

:root {
    --background-color: rgba(70, 255, 248, 0.13);
    --accent-color: rgba(70, 255, 248, 0.82);
}

header {
    background: linear-gradient(2590deg, var(--background-color) 50%, var(--accent-color) 50%);
}


.scroll-padding {
    scroll-padding: 50px;
}


/**
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior?retiredLocale=de
 */
.example a {
    display: inline-block;
    width: 50px;
    text-decoration: none;
}

.example nav,
.scroll-container {
    display: block;
    margin: 0 auto;
    text-align: center;
}

.example nav {
    width: 339px;
    padding: 5px;
    border: 1px solid black;
}

.scroll-container {
    width: 350px;
    height: 200px;
    overflow-y: scroll;
    scroll-behavior: smooth;
}

.scroll-page {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 5em;
}