:root {
    --green-1: #BFFFDA;
    --green-2: #00E794;
    --green-3: #00BB77;
    --green-4: #00915B;
    --green-5: #006941;
    --green-6: #004328;
    --green-7: #002111;
    --app-color: var(--green-3);
    --background-color: var(--app-color);
    --on-background-color: #FFFFFF;
    --body-padding: 8vw;
}

@font-face {
    font-family: "Wagon Sans";
    src: url("arialroundedmtbold.ttf");
}

a.secondary {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
}

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

html {
    font-family: "Wagon Sans", "Arial", sans-serif;
}

body {
    padding: 4vh 0;
    background-color: var(--background-color);
    color: var(--on-background-color);
}

main {
    padding: 7vh 0;
    gap: 4vw;
}

@media (max-width:1100px) {
    main {
        flex-direction: column-reverse;
    }

    main>.iPhone {
        height: auto;
        width: 70vw;
    }
}

h1 {
    font-size: max(22px, 3.5vw);
    letter-spacing: -0.1vw;
    margin-top: 0;
}

p {
    opacity: 0.7;
    font-size: max(16px, 1.5vw);
}

.footer {
    margin-top: 5vh;
}

nav {
    display: flex;
    justify-content: space-between;
}

nav>div {
    display: flex;
    align-items: start;
    gap: 1vw;
}

nav img {
    height: 4vh;
}

nav div span {
    font-size: max(16px, 4vh);
}

.primary,
.secondary {
    display: grid;
    place-items: center;
    padding: 1vh 1vw;
    background-color: var(--on-background-color);
    color: var(--background-color);
    text-decoration: none;
    border-radius: 999px;
}

.primary span,
.secondary span {
    font-size: max(14px, 2vh);
}

.primary:hover,
.secondary:hover {
    opacity: 0.7;
}

.testflightbutton,
.googleplaybutton {
    text-decoration: none;
}

.testflightbutton img,
.googleplaybutton img {
    height: max(5vw, 4vh);
    width: auto;
    user-select: none;
}

footer {
    font-size: max(12px, 2vh);
}

footer.bottom {
    max-width: 42vw;
    position: absolute;
    bottom: 7vh;
}

footer span {
    color: #fff9
}

footer strong {
    color: var(--on-background-color);
    font-weight: normal;
}

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

ul.regions span {
    opacity: 0.50;
}

.hero {
    padding: 0;
    display: flex;
    flex-direction: row-reverse;
    gap: 80px;
    padding-right: var(--body-padding);
}

.hero>img {
    display: block;
    border: none;
    width: 46vw;
    height: auto;
}

@media (max-width: 800px) {
    .hero {
        flex-direction: column;
        gap: 0;
    }

    .hero>div {
        padding: 0 var(--body-padding);
    }

    .hero>img {
        width: min(400px, 100vw);
    }
}

.sendBetaEmail {
    display: flex;
    gap: 18px;
}

.sendBetaEmail p {
    margin: 0;
}

.sendBetaEmail h3 {
    margin: 0;
    margin-bottom: 8px;
}

.sendBetaEmail a {
    user-select: none;
    font-size: 22px;
    color: unset;
}

h2 {
    font-size: 32px;
    margin: 0;
}

section:has(article) h2,
section:has(article) p {
    padding-left: var(--body-padding);
    max-width: 600px;
}

section:has(article) {
    max-width: 100vw;
    padding: 44px 0;
}

section:has(article)>div::before,
section:has(article)>div::after {
    display: block;
    content: "";
    min-width: calc(var(--body-padding) - 28px);
    height: 1px;
    background: transparent;
}

section:has(article)>div {
    overflow: auto;
    max-width: 100vw;
    display: flex;
    gap: 20px;
}

section article {
    --width: max(300px, 24vw);
    overflow: hidden;
    background-color: var(--green-7);
    border-radius: 28px;
    min-width: var(--width);
    max-width: var(--width);
}

section article>img {
    width: 100%;
    height: auto;
}

section article>p {
    margin: 0;
    padding: 28px 18px;
}

section.map {
    padding-left: var(--body-padding);
    max-width: max(400px, 44vw);
    min-height: 40vw;
    position: relative;
}

.mapAnchor {
    margin-top: 120px;
    position: relative;
}

.mapAnchor img {
    position: absolute;
    right: 0;
    top: 0;
    width: 80vw;
    height: auto;
    user-select: none;
    pointer-events: none;
}

@media (max-width: 900px) {
    .mapAnchor img {
        position: relative;
        width: 100vw;
    }
}