body{
    padding:0;
    margin: 0;
    overflow: hidden;
    font-family: Helvetica, Arial, Sans-Serif;
}
.full {
    position: absolute;
    width: min(100vw, calc(100vh * 16 / 9));
    height: min(100vh, calc(100vw * 9 / 16));
    overflow: hidden;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background-color: #FBE4A8;
    cursor: grab;
}
.full:active {
    cursor: grabbing;
}
.layer {
    position: absolute;
    bottom: 0;
    height: 100%;
    width: 300%;
    background-size: contain;
    background-repeat: repeat-x;
    transition: opacity 0.5s ease;
}
.layer--fixed {
    pointer-events: none;
    bottom: 0;
}
.layer--half {
    pointer-events: none;
    bottom: -33%;
}
.layer--normal {
    bottom: -84%;
    transform: scale(2);
}
.layer--twice {
    transform: scale(4);
    bottom: -200%;
    pointer-events: none;
    -webkit-filter: blur(.5px); filter: blur(.5px);
}

.hidden {
    visibility: hidden;
}
.layer.hidden {
    visibility: visible;
    opacity: 0;
    pointer-events: none;
}
.layer:not(.hidden) {
    opacity: 1;
}

.bubble {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.nav-arrow {
    position: absolute;
    right: 8px;
    width: 50px;
    height: 55px;
    z-index: 4;
    cursor: pointer;
    opacity: 0.85;
}
.nav-arrow:hover {
    opacity: 1;
}
body.has-bubble .nav-arrow {
    opacity: 0;
    pointer-events: none;
}
.nav-arrow::before,
.nav-arrow::after {
    content: '';
    position: absolute;
    inset: 0;
}
.nav-arrow--up {
    top: 6px;
    clip-path: polygon(57% 0%, 100% 74%, 35% 100%, 30% 93%, 0% 93%, 0% 49%, 39% 49%, 41% 49%);
}
.nav-arrow--up::before {
    clip-path: polygon(57% 0%, 100% 74%, 35% 100%, 41% 49%);
}
.nav-arrow--up::after {
    clip-path: polygon(0% 49%, 39% 49%, 30% 93%, 0% 93%);
}
.nav-arrow--down {
    bottom: 6px;
    clip-path: polygon(57% 100%, 100% 26%, 35% 0%, 30% 7%, 0% 7%, 0% 51%, 39% 51%, 41% 51%);
}
.nav-arrow--down::before {
    clip-path: polygon(57% 100%, 100% 26%, 35% 0%, 41% 51%);
}
.nav-arrow--down::after {
    clip-path: polygon(0% 51%, 39% 51%, 30% 7%, 0% 7%);
}
#day .nav-arrow {
    background: #202a31;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
}
#day .nav-arrow::before,
#day .nav-arrow::after {
    background: #4c757d;
}
#night .nav-arrow {
    background: #cc8b42;
    filter: drop-shadow(0 2px 6px rgba(245,233,206,0.5));
}
#night .nav-arrow::before,
#night .nav-arrow::after {
    background: #f5e9cd;
}