* {
    box-sizing: border-box;
}

html {
    /* dark backdrop so the overscroll / rubber-band area matches the image
       instead of flashing white */
    background-color: #242238;
    overscroll-behavior: none;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    color: #fff;
    background-color: #242238;
    background-image: url('../images/Bck.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;      /* fallback for older browsers */
    min-height: 100dvh;     /* handles mobile browser chrome */
    display: flex;
    flex-direction: column;
}

.header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    /* fluid padding added on top of the iPhone notch / rounded-corner safe areas,
       so there's always breathing room from the edges */
    padding-top: calc(clamp(15px, 4vw, 20px) + env(safe-area-inset-top));
    padding-bottom: clamp(15px, 4vw, 20px);
    padding-left: calc(clamp(24px, 6vw, 50px) + env(safe-area-inset-left));
    padding-right: calc(clamp(24px, 6vw, 50px) + env(safe-area-inset-right));
}

.header .wordmark {
    /* fluid size: ~1.2em on small phones up to 1.5em on large screens */
    font-size: clamp(1.2rem, 1rem + 1.2vw, 1.5rem);
    font-weight: 700;
    color: #fff;
    text-decoration: none;
}

.hero {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* breathing room on the left/right (plus notch safe areas) so the logo
       never touches the screen edges on mobile */
    padding: env(safe-area-inset-top)
             calc(clamp(24px, 6vw, 60px) + env(safe-area-inset-right))
             env(safe-area-inset-bottom)
             calc(clamp(24px, 6vw, 60px) + env(safe-area-inset-left));
}

.hero .logo {
    /* fluid size, capped so it never overflows the padded container on mobile */
    width: clamp(240px, 44vw, 820px);
    max-width: 100%;
    height: auto;
    display: block;
}

/* larger share of the screen on phones/small tablets */
@media (max-width: 768px) {
    .hero .logo {
        width: 90vw;
    }
}