* {
    margin: 0;
    box-sizing: border-box;
    overscroll-behavior: none;
}
:root {
    --size: min(80vw, 80vh);
    --neg-size: calc(-1 * var(--size));
    --half-size: calc(var(--size) / 2);
    --neg-half-size: calc(var(--neg-size) / 2);
}
body {
    background-color: #00101a;
    color: ghostwhite;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    align-content: center;
    justify-items: center;
    timeline-scope: --scroller;
    overflow: clip;

    perspective: max(150vw, 150vh);
    perspective-origin: center;
}

marquee {
    padding: 10px;
    background-color: #333a;
    border: 1px solid currentColor;
    border-radius: 10px;
    margin-right: 10px;
    backdrop-filter: blur(1.5px);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 5px auto;
    font-family: Verdana;
    text-transform: uppercase;
    font-size: .8em;

    span {
        margin: 0 50px;
    }
}

nav::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: inherit;
    background: linear-gradient(to right, #00101a00, #00101a9a, #00101a00);
}

main {
    width: var(--size);
    height: var(--size);
    transform-style: preserve-3d;
    /* transform: rotateX(90deg); */
    animation: rotatehr 5s linear 0s 1 normal forwards;
    /* animation: rotatehr; */
    animation-timeline: --scroller;
}
#scroll {
    top: 0;
    left: 0;
    border: none;
    padding: 0;
    overflow-x: clip;
    overflow-y: scroll;
    background-color: transparent;
    scroll-timeline: --scroller block;

    div {
        height: 100vh; 
    }
}
.content {
    height: 100%;
    background: linear-gradient(to right, black, transparent);
    align-content: center;
}

section {
    width: inherit;
    height: inherit;
    position: absolute;
    backface-visibility: hidden;
    border: 20px groove rgba(248, 248, 255, .5);
}

h1 {
    text-shadow: 1.2px 1px 0 goldenrod;
    -webkit-text-stroke: darkgoldenrod .7px;
    text-align: center;
    position: relative;
    width: 50%;
    padding-bottom: 5px;
}
h1::before {
    content: "";
    height: 2px;
    width: 192%;
    position: absolute;
    left: 4%;
    bottom: 0;
    background: linear-gradient(to right, goldenrod, transparent);
}
p {
    font-size: 1.2em;
    width: 50%;
    margin: 10px;
    color: ghostwhite;
    text-align: center;
    text-shadow: 1px 1px 2px black;
}
#face1 {
    background: url("images/IMG1.jpg")  top center / cover no-repeat;
    transform: translateZ(var(--half-size));
    opacity: 0;
    animation-timeline: auto;
    animation: face1 2s ease 1s 1 normal forwards;

    h1 {
        animation: face1H .5s ease-in-out 1.5s 1 normal forwards;
        opacity: 0;
    }
    p {
        animation: face1p 1s ease-in-out 2s 1 normal forwards;
        opacity: 0;
    }
}

#face2 {
    background: url("images/IMG2.jpg")  top center / cover no-repeat;
    transform: translateX(var(--half-size)) rotateY(90deg);
    animation: face2 linear;
    animation-timeline: --scroller;
    opacity: 0;

    p {
        animation: face2p linear;
        animation-timeline: --scroller;
        opacity: 0;
    }
}


#face3 {
    background: url("images/IMG3.jpg")  top center / cover no-repeat;
    transform: translateZ(var(--neg-half-size)) rotateY(180deg);
    animation: face3 linear;
    animation-timeline: --scroller;
    opacity: 0;

    p {
        animation: face3p linear;
        animation-timeline: --scroller;
        opacity: 0;
    }
}

#face4 {
    background: url("images/IMG4.jpg")  top center / cover no-repeat;
    transform: translateX(var(--neg-half-size)) rotateY(-90deg);
    animation: face4 linear;
    animation-timeline: --scroller;
    opacity: 0;

    p {
        animation: face4p linear;
        animation-timeline: --scroller;
        opacity: 0;
    }
}

#face5 {
    background: url("images/IMG5.jpg")  top center / cover no-repeat;
    transform: translateY(var(--neg-half-size)) rotateX(90deg);
    animation: face5 linear;
    animation-timeline: --scroller;
    opacity: 0;

    p {
        animation: face5p linear;
        animation-timeline: --scroller;
        opacity: 0;
    }
}

#face6 {
    background: url("images/IMG6.jpg")  top center / cover no-repeat;
    transform: translateY(var(--half-size)) rotateX(-90deg);
    animation: face6 linear;
    animation-fill-mode: forwards;
    animation-timeline: --scroller;

    p {
        animation: face6p linear forwards;
        animation-timeline: --scroller;
        opacity: 0;
    }
}

@keyframes rotatehr {
    0%  {transform: rotateY(0deg)} /* face1 */
    16.67% {transform: rotateY(-90deg)} /* face2 */
    33.33% {transform: rotateY(-180deg)} /* face3 */
    50% {transform: rotateY(-270deg)} /* face4 */
    66.67% {transform: rotateY(-360deg) rotateX(-90deg)} /* face5 */
    100% {transform: rotateY(-360deg) rotateX(90deg)} /* face6 */
}

@keyframes face1 { 
    from {opacity:0}
    to {opacity:1;}
}
@keyframes face1H {
    from {transform: translateX(-20%);opacity: 0}
    to {opacity: 1}
}
@keyframes face1p {
    from {transform: translateY(40%); opacity: 0}
    to {opacity: 1}
}

@keyframes face2 {
    0%, 3.33% {opacity: 0;} /*out of 600vh - 0, 20vh*/
    25%, 36.67% {opacity: 1;} /*out of 600vh - 150vh, 220vh*/
    50% {opacity: 0;} /*out of 600vh - 300vh*/
}
@keyframes face2p {
    00.00% {opacity: 0; transform: translateY(100%)}
    16.67% {opacity: 1} /*100*/
    25.00% {transform: translateY(0)}
    33.33% {opacity: 0; transform: translateY(-100%)} 
}
@keyframes face3 {
    0%, 20% {opacity: 0;} /*out of 600vh - 0, 120vh*/
    41.67%, 53.33% {opacity: 1;} /*out of 600vh - 250vh, 320vh*/
    66.67% {opacity: 0;} /*out of 600vh - 400vh*/
}
@keyframes face3p {
    16.67% {opacity: 0; transform: translateY(100%)}
    33.33% {opacity: 1} /*200*/
    41.67% {transform: translateY(0)}
    50.00% {opacity: 0; transform: translateY(-100%)} 
}
@keyframes face4 {
    0%, 36.67% {opacity: 0;} /*out of 600vh - 0, 220vh*/
    41.67%, 53.33% {opacity: 1;} /*out of 600vh - 350vh, 420vh*/
    66.67% {opacity: 0;} /*out of 600vh - 400vh*/
}
@keyframes face4p {
    33.33% {opacity: 0; transform: translateY(100%)}
    50.00% {opacity: 1} /*300*/
    58.33% {transform: translateY(0)}
    66.67% {opacity: 0; transform: translateY(-100%)} 
}
@keyframes face5 {
    0%, 53.33% {opacity: 0;} /*out of 600vh - 0, 320vh*/
    58.33%, 70% {opacity: 1;} /*out of 600vh - 450vh, 520vh*/
    83.33% {opacity: 0;} /*out of 600vh - 500vh*/
}
@keyframes face5p {
    50.00% {opacity: 0; transform: translateY(100%)}
    66.67% {opacity: 1} /*400*/
    75.00% {transform: translateY(0)}
    83.33% {opacity: 0; transform: translateY(-100%)} 
}
@keyframes face6 {
    0%, 53.33% {opacity: 0;} /*out of 600vh - 0, 320vh*/
    58.33%, 70% {opacity: 1;} /*out of 600vh - 450vh, 520vh*/
    83.33% {opacity: 0;} /*out of 600vh - 500vh*/
}
@keyframes face6p {
    66.67% {opacity: 0; transform: translateY(100%)}
    83.33% {opacity: .8} /*500*/
    91.67% {transform: translateY(0)}
    100% {opacity: .8;}
}