:root {
    /* light theme */
    --color-background-light: #ffffff;
    --color-text-primary-light: #2e2e2e;
    --color-text-body-light: #696969;
    --color-text-secondary-light: #b2b2b2;

    /* dark theme */
    --color-background-dark: #000000;
    --color-text-primary-dark: #f0f0f0;
    --color-text-body-dark: #dadada;
    --color-text-secondary-dark: #a1a1a1;

    --padding-small: 16px;
    --padding-medium: 32px;
    --padding-large: 48px;
    --padding-xlarge: 64px;

    font-family: "HankenGrotesk", sans-serif;
    --font-size-title: 24px;
    --font-size-footer: 90%;
}

* {
    box-sizing: border-box;
}

p {
    margin: 0;
}

html,
body {
    font-size: 14px;
    line-height: 1.5;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: var(--color-background-light);
    display: flex;
    flex-direction: column;
}

.main-container {
    flex: 1 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

main {
    display: flex;
    justify-content: center;
    align-items: top;
}

.phone-demo {
    height: 600px;
    width: 300px;
    vertical-align: top;
    display: inline-block;
    flex: 0 0 auto;
    order: 1;
    position: relative;
    margin: var(--padding-small);
}

.phone-demo-border {
    height: auto;
    width: 100%;
    display: block;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
}

@keyframes screenshot-transition {

    0%,
    100% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    15% {
        opacity: 1;
    }

    20% {
        opacity: 0;
    }
}

.phone-demo-screenshot {
    position: absolute;
    z-index: 1;
    top: 12px;
    left: 12px;
    height: calc(100% - 12px);
    width: calc(100% - 24px);
    display: block;
    visibility: hidden;
    opacity: 0;
    transition: opacity 1.75s ease, visibility 1.75s ease;
    clip-path: inset(0% 0% 0% 0% round 38px);
}

.phone-demo-screenshot-visible {
    visibility: visible;
    opacity: 1;
}

.header {
    vertical-align: top;
    display: inline-block;
    flex: 0 0 auto;
    order: 2;
    padding-top: var(--padding-xlarge);
}

.header-title-container {
    display: flex;
    justify-content: center;
}

.header-title-logo {
    height: 64px;
    width: 64px;
    display: inline-block;
    margin-right: 8px;
}

.header-title h1 {
    display: inline-block;
    vertical-align: top;
    color: var(--color-text-primary-light);
}

.header-subtitle {
    display: flex;
    justify-content: center;
}

.header-subtitle p {
    text-align: center;
    max-width: 300px;
    color: var(--color-text-body-light);
}

.app-stores-container {
    display: flex;
    justify-content: center;
    margin-top: var(--padding-small);
}

.download-apple-app-store {
    width: 150px;
    height: 64px;
    background: url('../assets/image/Download-on-the-App-Store/US/Download_on_App_Store/White_lockup/SVG/Download_on_the_App_Store_Badge_US-UK_RGB_wht_092917.svg') no-repeat center center;
    background-size: contain;
}

a:link,
a:visited,
a:active,
a:hover {
    text-decoration: none;
    font-weight: normal;
}

a,
a:link,
a:visited {
    color: var(--color-text-secondary-light);
}

a:active,
a:hover {
    color: var(--color-text-primary-light);
}

.footer-container {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    padding: var(--padding-medium);
    padding-bottom: var(--padding-xlarge);
    color: var(--color-text-secondary-light);
    font-size: var(--font-size-footer);
}

.footer-item {
    margin-right: 4px;
}

@font-face {
    font-family: "HankenGrotesk";
    src: url('../assets/fonts/Hanken_Grotesk/HankenGrotesk-VariableFont_wght.ttf') format("truetype");
    font-display: swap;
}

h1 {
    font-size: var(--font-size-title);
    font-weight: 600
}

p {
    font-size: var(--font-size-body);
}

@media screen and (max-width: 640px) {
    main {
        flex-direction: column;
    }

    .header {
        order: 1;
    }

    .phone-demo {
        order: 2;
        flex: 0 0 auto;
    }

    .footer-container {
        display: inline-block;
    }

    .footer-item {
        display: inline-block;
        color: var(--color-text-secondary-dark);
    }
}

@media (prefers-color-scheme: dark) {

    body,
    html {
        background: var(--color-background-dark);
    }

    .header-title h1 {
        color: var(--color-text-primary-dark);
    }

    .header-subtitle p {
        color: var(--color-text-body-dark);
    }

    .download-apple-app-store {
        background: url('../assets/image/Download-on-the-App-Store/US/Download_on_App_Store/Black_lockup/SVG/Download_on_the_App_Store_Badge_US-UK_RGB_blk_092917.svg') no-repeat center center;
    }

    a,
    a:link,
    a:visited {
        color: var(--color-text-secondary-dark);
    }

    a:active,
    a:hover {
        color: var(--color-text-primary-dark);
    }

    .footer-container {
        color: var(--color-text-secondary-dark);
    }
}