:root {
    --bg: #405661;
    --left-padding: clamp(1.875rem, -1.6461rem + 15.0235vw, 11.875rem);
    --content-size: clamp(1.125rem, 0.993rem + 0.5634vw, 1.5rem);
}

html {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: white;

    * {
        box-sizing: border-box;
    }
}

html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

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

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

@media (max-width: 966px) {
    body > svg:first-of-type {
        display: none;
    }
    body > svg {
        right: auto;
        top: auto;
        max-width: 60svw;
        bottom: 0;
        left: 50%;
        height: max-content;
        transform: translateX(-50%);
    }
}

@media (min-width: 967px) {
    body > svg:last-of-type {
        display: none;
    }
}

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: 60px 30px 0;
        /* text-align: center; */
    }
}

.tagline {
    margin-bottom: 0;
    max-width: 605px;
    font-size: clamp(1.25rem, 1.0739rem + 0.7512vw, 1.75rem);
    line-height: calc( 10px + clamp(1.25rem, 1.0739rem + 0.7512vw, 1.75rem));

    strong {
        display: block;
    }
}

@media (max-width: 600px) {
    .tagline {
        max-width: 300px;
        margin: 60px auto 0;
    }
}

.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));
    display: block;
    color: white;
    text-decoration: none;
    width: max-content;
    
}

@media (max-width: 966px) {
    .content > a  {
        margin: 0 auto;
    }
}

.line {
    margin: 45px 0;
    width: 60px;
    height: 2px;
    background-color: rgba(255,255,255,0.10);
}

@media (max-width: 966px) {
    .line  {
        margin: 45px auto;
    }
}

.content > a:last-of-type {
    color: #72CB21;
}

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

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