body {
    margin: 0;
    background-color: black;
    touch-action: pan-y;
}

a {
    color: #0E85C8;
}

#landscape_message {
    position: fixed;
    text-align: center;
    color: black;
    background-color: white;
    font-family: Arial, Helvetica, sans-serif;
    border: none;
    border-radius: 0px;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 4;
    visibility: hidden;
}

#desktop_message {
    position: fixed;
    text-align: center;
    color: black;
    background-color: black;
    font-family: Arial, Helvetica, sans-serif;
    border: none;
    border-radius: 0px;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 4;
    visibility: hidden;
    background-image: url(../images/desktop_message.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#top_nav {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    box-sizing: border-box;
    align-items: center;
    z-index: 5;
}

#top_nav img {
    max-width: 32px;
}

#mobile_menu {
    position: fixed;
    top: 65px;
    left: 0px;
    background-color: black;
    z-index: 10;
    height: 100vh;
    width: 100vw;
    /* display: none; */
    transform: translateX(100%);
    transition: 0.25s all;
}

#mobile_menu img {
    max-width: 100%;
}

#site_hero,
#site_banner {
    width: 100%;
}

#site_banner {
    display: none;
}

.feature-section {
    display: flex;
    flex-flow: column;
    align-items: center;
    margin-top: 60px;
    position: relative;
}

.section-number {
    width: 20%;
    margin-bottom: 40px;
}

.section-headline {
    margin-top: 40px;
    margin-bottom: 40px;
    max-height: 14px;
}

button {
    margin: 2% 4%;
    background-color: white;
    border: none;
    max-width: 60%;
}

button img {
    max-width: 100%;
}

.frame {
    background-color: white;
    border: 20px solid #0E85C8;
    width: 75vw;
    height: 50vw;
    position: relative;
}

.frame video {
    width: 100%;
}

.frame canvas {
    width: 100%;
    height: 100%;
}

.wallpaper .frame {
    margin-bottom: 40px;
}

.zoom .frame {
    margin-bottom: 40px;
}

#frame1 {
    background-image: url(../images/phone-filter-fallback.jpg);
    background-size: cover;
    background-position: center;
}

#frame1::before {
    content: url(../images/scarf.png);
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    transform: scale(0.5) translate(-96%, -62%);
}

#frame2 {
    background-image: url(../images/frame2.jpg);
    background-size: cover;
    background-position: center;
}

#frame2::after {
    content: url(../images/Pretzel\ Sticks.png);
    position: absolute;
    bottom: 0px;
    right: 0px;
    z-index: 2;
    transform: scale(0.45) translate(93%, 100%);
}

#frame3 {
    background-image: url(../images/zoom2.jpg);
    background-size: cover;
    background-position: center;
}

#frame3::before {
    content: url(../images/goldfish.png);
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 2;
    transform: scale(0.45) translate(-100%, 100%);
}

#frame4 {
    background-image: url(../images/frame4.jpg);
    background-size: cover;
    background-position: center;
}

#frame4::after {
    content: url(../images/CAPE\ CHIPS.png);
    position: absolute;
    bottom: 0px;
    right: 0px;
    z-index: 2;
    transform: scale(0.45) translate(93%, 100%);
}

#wallpaper1 {
    background-image: url(../images/wallpaper1.jpg);
    background-size: cover;
    background-position: center;
}

#wallpaper2 {
    background-image: url(../images/wallpaper2.jpg);
    background-size: cover;
    background-position: center;
}

#wallpaper3 {
    background-image: url(../images/wallpaper3.png);
    background-size: cover;
    background-position: center;
}

#wallpaper4 {
    background-image: url(../images/wallpaper4.jpg);
    background-size: cover;
    background-position: center;
}

#wallpaper5 {
    background-image: url(../images/wallpaper5.png);
    background-size: cover;
    background-position: center;
}

#wallpaper6 {
    background-image: url(../images/wallpaper6.jpg);
    background-size: cover;
    background-position: center;
}

#zoom1 {
    background-image: url(../images/zoom1.jpg);
    background-size: 85%;
    background-repeat: no-repeat;
    background-position: center;
}

#zoom2 {
    background-image: url(../images/zoom2.jpg);
    background-repeat: no-repeat;
    background-size: 85%;
    background-position: center;
}

#zoom3 {
    background-image: url(../images/zoom3.jpg);
    background-repeat: no-repeat;
    background-size: 85%;
    background-position: center;
}

#soccer-ball-bottom {
    max-width: 50vw;
    margin: auto;
    margin-bottom: -28%;
    position: relative;
    display: flex;
}

.tap-to-save {
    position: absolute;
    bottom: 10px;
    margin: auto;
    font-size: 24px;
    color: white;
    font-family: sans-serif;
    width: 100%;
    text-align: center;
}

.legal-footer {
    background-color: white;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    text-align: center;
    padding: 20px;
    margin-top: 60px;
    position: relative;
}

#embeddedScene {
    display: flex;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background-color: black;
    position: fixed;
    transform: translateX(100%);
    transition: all 0.5s;
    z-index: 100;
}

#embeddedScene a-scene {
    position: fixed;
    transition: all 0.5s;
    height: 100vh;
    width: 46vh;
}

#camera_controls {
    position: fixed;
    z-index: 200;
    height: 100vh;
    width: 100vw;
    display: none;
}

#camera_button {
    max-width: 80px;
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    filter: drop-shadow(0 0 10px #333);
}

#close_button {
    max-width: 40px;
    position: absolute;
    top: 20px;
    left: 20px;
    filter: drop-shadow(0 0 10px #333);
}

#site_wrapper {
    height: 100vh;
    width: 100vw;
}