@font-face {
    font-family: 'BerlinSansFBDemi-Bold';
    src: url('../fonts/berlin-sans-fb-demi-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CTCSplashRounded-Bold';
    src: url('../fonts/ctc-splash-rounded.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: 'CTCSplashRounded-Bold', Arial, sans-serif;
    color: #00C5E5;
}

.header {
    position: relative;
    height: 650px;
    background: url('../img/illustration_header.webp') no-repeat center bottom;
    background-size: cover;
}

.scroll-down {
    position: absolute;
    left: 50%;
    bottom: 1em;
    transform: translateX(-50%);
    color: inherit;
    animation: arrow-anim 2s infinite;
}

@keyframes arrow-anim {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 12px); }
}

main { display: block; }

.section-install {
    text-align: center;
    padding: 40px 1rem 0;
    max-width: 1170px;
    margin: 0 auto;
}

.section-install h1 {
    font-family: 'BerlinSansFBDemi-Bold', Arial, sans-serif;
    color: #00C5E5;
    text-transform: uppercase;
    font-size: clamp(1.6rem, 6vw, 2.5rem);
    line-height: 1.1;
    padding-bottom: 10px;
    margin: 0 0 0.5em;
    overflow-wrap: break-word;
}

.download-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.download-list li {
    display: inline-block;
    margin: 0 0.5rem 2.5rem;
}

.download-list a { padding: 1.375rem; display: inline-block; }
.download-list img { max-width: 100%; height: auto; }

.section-footer {
    text-align: center;
    padding: 40px 1rem;
    max-width: 1170px;
    margin: 0 auto;
}

.section-footer a { color: #00C5E5; }
.section-footer img { display: inline-block; }

@media (max-width: 1050px) { .header { height: 625px; } }
@media (max-width: 1010px) { .header { height: 600px; } }
@media (max-width: 970px)  { .header { height: 575px; } }
@media (max-width: 930px)  { .header { height: 550px; } }
@media (max-width: 890px)  { .header { height: 525px; } }
@media (max-width: 850px)  { .header { height: 500px; } }
@media (max-width: 810px)  { .header { height: 475px; } }
@media (max-width: 770px)  { .header { height: 450px; } }
@media (max-width: 730px)  { .header { height: 425px; } }
@media (max-width: 690px)  { .header { height: 400px; } }
@media (max-width: 650px)  { .header { height: 375px; } }
@media (max-width: 610px)  { .header { height: 350px; } }
@media (max-width: 570px)  { .header { height: 325px; } }
@media (max-width: 530px)  { .header { height: 300px; } }
@media (max-width: 490px)  { .header { height: 275px; } }
@media (max-width: 450px)  { .header { height: 250px; } }
@media (max-width: 420px)  { .header { height: 220px; } }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .scroll-down { animation: none; }
}