html, body {
    background-image: url(/image-resize/1024/home/bg.png);
    background-repeat: repeat;
    background-size: 500px;
    overflow-x: hidden;
}
body {
    overflow-y: hidden;
}

global-header nav,
global-header #banner,
global-footer {
    display: none;
}

global-header #logo {
    display: unset;
}

main {
    min-height: 100dvh;
}

section {
    position: relative;
    width: 100vmin;
    max-width: 1200px;
    min-width: 100px;
    margin: auto;
}
section#intro {
    aspect-ratio: 0.7;
}
section#stream-safe {
    aspect-ratio: 3.5;
}

section > * {
    position: absolute;
    transition: 1s opacity ease 0.5s, 1s transform ease 0.5s;
    transform: none;
    opacity: 1;
}

section:not(.visible) > .deco{
    transform: translateY(-5vmax);
    opacity: 0;
}

section > a:not(.visible) {
    opacity: 0;
}
section > a.from-right:not(.visible) {
    transform: translateX(5vmax);
}
section > a.from-left:not(.visible) {
    transform: translateX(-5vmax);
}

section > a.transition-finish {
    transition-duration: 0.25s;
    transition-delay: 0s;
}

section > a.visible:hover {
    transform: scale(1.1);
    transition-duration: 0.25s;
    transition-delay: 0s;
    /* z-index: 10; */
}

section > * > img {
    position: relative;
    width: 100%;
}

section > a.prompt {
    animation: prompt_wiggle;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}

.deco.logo {
    top: -1%;
    left: 1%;
    width: 40%;
    z-index: 4;
}

.deco.cup {
    top: -1%;
    left: 1%;
    width: 40%;
    z-index: 5;
}

.deco.polaroid1 {
    top: 22.2%;
    left: 5.9%;
    width: 26.5%;
    z-index: 4;
    rotate: 8deg;
}

.deco.polaroid2 {
    top: 24.6%;
    left: 27.2%;
    width: 26.5%;
    z-index: 3;
    rotate: -11deg;
}

a.magazine {
    width: 76.3%;
    top: -4.1%;
    right: -9%;
    z-index: 4;
    rotate: 9deg;
}

.deco.magazine .petzone.alt {
    position: absolute;
    top: 34%;
    left: 20%;
    width: 27%;
    height: 44%;
    rotate: -25deg;
}

.deco.magazine .petzone.axl {
    position: absolute;
    top: 13%;
    right: 24%;
    width: 27%;
    height: 55%;
    rotate: -25deg;
}

.deco.message {
    width: 52%;
    top: 39%;
    left: 10%;
    z-index: 5;
    rotate: -3deg;
    background-image: url(/image-resize/full/home/message.png);
    background-size: contain;
    aspect-ratio: 94/59;
}
.deco.stream-safe {
    width: 45%;
    top: -45%;
    left: 26%;
    z-index: 3;
    background-image: url(/image-resize/full/home/message_flipped.png);
    background-size: contain;
    aspect-ratio: 94/59;
    rotate: 3deg;
}

a.cake {
    width: 42%;
    top: 43.2%;
    right: 2%;
    z-index: 6;
}

.deco.pen {
    top: 62.4%;
    width: 31.7%;
    left: 0%;
    z-index: 6;
    rotate: -90deg;
}

a.corkboard {
    width: 28.7%;
    top: 58.5%;
    left: 25.1%;
    z-index: 5;
    rotate: -8deg;
}

a.keychain {
    width: 25.9%;
    top: 72%;
    left: 10.9%;
    z-index: 6;
    rotate: -20deg;
}

a.receipt {
    width: 31.9%;
    top: 69%;
    left: 49.9%;
    z-index: 5;
    rotate: 9deg;
}

a.pin {
    width: 22%;
    top: 74.9%;
    left: 74.2%;
    z-index: 5;
    rotate: 33deg;
}

a.eds {
    width: 20%;
    top: 85%;
    left: 37%;
    rotate: 5deg;
    z-index: 4;
}

section .message .message-container,
section .stream-safe .message-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 75%;
    height: 65%;
    margin: 15%;
    margin-bottom: 10%;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-color: var(--dark) transparent;
}

section .message .message-container {
    margin-right: 15%;
}

section .stream-safe .message-container {
    margin-top: 18%;
    margin-left: 15%;
    width: 72%;
    height: 60%;
    font-size: 0.8em;
    line-height: 1;
}
section .stream-safe .message-container i {
    font-size: 0.8em;
    line-height: 1;
    display: block;
}

section .message p,
section .stream-safe p {
    color: var(--dark);
    font-family: "Nanum Pen Script", serif;
    font-weight: normal;
    font-size: 1em;
    margin: 0;
}

@media only screen and (min-aspect-ratio: 3 / 2) {
    /* section .message p {
        font-size: 1.25em;
    } */
}
@media only screen and (max-width: 600px) {
    section .message p {
        font-size: 0.75em;
    }
}

@keyframes prompt_wiggle {
    0% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(0deg); }
    50% { transform: scale(1.1) rotate(-10deg); }
    75% { transform: scale(1.1) rotate(10deg); }
    100% { transform: scale(1) rotate(0deg); }
}