:root {
    --blue: #273546;
    --left-padding: clamp(1.875rem, -2.5264rem + 18.7793vw, 14.375rem);

    --content-size: clamp(1.375rem, 1.287rem + 0.3756vw, 1.625rem);
}

html {
    font-family: 'Tonos', sans-serif;
    color: white;
    * {
        box-sizing: border-box;
    }
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--blue);
}

body > svg {
    transition: all .4s ease-in-out;
    animation: patternFade .4s ease-in-out forwards;
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: 0;
}

@media (max-width: 966px) {
    body > svg  {
        width: 40%;
        height: auto;
    }
}

@media (max-width: 660px) {
    body > svg  {
        width: 60%;
        height: auto;
    }
}

body {
    display: grid;
    place-items: start center;
    text-align: center;
    min-height: 100svh;
}

@media (min-width: 966px) {
    body {
        place-items: center left; 
        text-align: left;
    }
}

.content {
    padding: 0 0 0 var(--left-padding);
}

@media (max-width: 966px) {
    .content {
        padding: 80px 0 0 0;
    }
}

.tagline {
    text-transform: uppercase;
    margin-bottom: 2.5rem;
    font-size: clamp(1.875rem, 1.6989rem + 0.7512vw, 2.375rem);
    line-height: calc( 2px + clamp(1.875rem, 1.6989rem + 0.7512vw, 2.375rem));
}

.coming-soon {
    font-size: var(--content-size);
    line-height: calc( 10px + var(--content-size));
    margin: 0;
}

.content > a {
    font-size: var(--content-size);
    line-height: calc( 10px + var(--content-size));
    color: white;
    text-decoration: none;
}

.content > a:hover {
    text-decoration: underline;
}

@keyframes patternFade {
    to {
        opacity: 1;
    }
}