/*                  Holders                     */

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --fw-reg: 300;
    --fw-bold: 900;
    --clr-light: #fff;
    --clr-dark: #303030;
    --clr-accent: #16e0bd;
    --fs-h1: 3rem;
    --fs-h2: 2.25rem;
    --fs-h3: 1.25rem;
    --fs-body: 1rem;
    --bs: 0.25em 0.25em 0.75em rgba(0, 0, 0, .25), 0.125em 0.125em 0.25em rgba(0, 0, 0, .15);
    --fclr-dark: #000100;
    --nclr-trans: rgba(48, 48, 48, 0.9);
    --rotateSpeed: 5s;
    --rotateSpeed1: 3s;
    --rotateSpeed2: 6s;
    --rotateSpeed3: 7s;
    --rotateSpeed4: 8s;
}

@media (min-width:800px) {
     :root {
        --fs-h1: 4.5rem;
        --fs-h2: 3.75rem;
        --fs-h3: 1.5rem;
        --fs-body: 1.125rem;
    }
}

:focus {
    outline: 3px solid rgba(151, 53, 36, 0.8);
    outline-offset: 3px;
}


/*                  header                  */

header {
    display: flex;
    justify-content: space-between;
    padding: 1em;
}

.logo {
    width: 80px;
}

.heading {
    align-self: center;
    color: rgba(151, 53, 36, 0.9)
}

.nav {
    position: fixed;
    background: var(--nclr-trans);
    color: var(--clr-light);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    transform: translateX(100%);
    transition: transform 250ms cubic-bezier(.5, 0, .5, 1);
}

.nav-toggle {
    padding: 0.5em;
    border: 0;
    background: transparent;
    cursor: pointer;
    height: 20px;
    align-self: center;
    position: relative;
    z-index: 1000;
    right: 2em;
}

.nav__list {
    list-style: none;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    margin: 0;
    padding: 0;
}

.nav__link {
    color: inherit;
    font-weight: var(--fw-bold);
    font-size: var(--fs-h2);
    text-decoration: none;
}

.nav__link:hover {
    color: var(--clr-accent);
}

.nav-open .nav {
    transform: translateX(0);
}

.nav-toggle.nav-open {
    position: fixed;
    right: 4em;
}

.nav-open .hamburger {
    transform: rotate(.625turn);
}

.nav-open .hamburger::before {
    transform: rotate(90deg) translateX(-6px);
}

.nav-open .hamburger::after {
    opacity: 0;
}

.hamburger {
    display: block;
    position: relative;
}

.hamburger,
.hamburger::before,
.hamburger::after {
    background: rgba(151, 53, 36, 0.8);
    width: 2em;
    height: 3px;
    border-radius: 1em;
    transition: transform 250ms ease-in-out;
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
}

.hamburger::before {
    top: 6px;
}

.hamburger::after {
    bottom: 6px;
}

.scene {
    max-width: 100vw;
    position: relative;
}

.scene h2 {
    max-width: 100vw;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(240, 101, 41, 0)), to(rgba(151, 53, 36, 0.7)));
    background: linear-gradient(0deg, rgba(240, 101, 41, 0) 0%, rgba(151, 53, 36, 0.7) 100%);
    text-transform: uppercase;
    max-height: 10vh;
    margin: 0;
    line-height: 20vh;
    text-align: center;
    color: #973524cc;
}

.scene-holder {
    background-color: linear-gradient(0deg, rgba(151, 53, 36, 0) 0%, rgba(240, 101, 41, 0.4) 100%);
    font-family: serif;
    min-height: calc(100vh - 20vh);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 75px;
    -webkit-perspective: 10em;
    perspective: 10em;
    -webkit-perspective-origin: 50% calc(50% - 3em);
    perspective-origin: 50% calc(50% - 3em);
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    top: -3.5em;
    position: relative;
}

.header-scene {
    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.fade-in {
    opacity: 1;
    -webkit-animation-name: fadeInOpacity;
    animation-name: fadeInOpacity;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-perspective: 10em;
    perspective: 10em;
}

.floor {
    position: absolute;
    width: 6em;
    height: 5.5em;
    border-radius: 25%;
    background: rgba(151, 53, 36, 0) radial-gradient(circle, rgba(227, 76, 38, 0.5) 0%, rgba(227, 76, 38, 0.6) 25%, rgba(227, 76, 38, 0.5) 50%, rgba(227, 76, 38, 0) 75%, rgba(240, 101, 41, 0.1) 95%, rgba(240, 101, 41, 0.1) 100%);
    background-size: 100%, 1em 1em;
    -webkit-transform: translate(-50%, -50%) rotateX(90deg);
    transform: translate(-50%, -50%) rotateX(90deg);
    top: 1.5em;
    max-height: 100%;
    opacity: 100%;
}

.scene-background {
    position: absolute;
    max-width: 100vw;
    height: 100vh;
    background-image: url("../img/sunset.jpg");
    background-size: cover;
    opacity: 0.8;
    z-index: -1;
    width: 100%;
}


/*                  Cubes        nmbr1       */

.cuboid {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: absolute;
    width: 1.6em;
    height: 1.6em;
    top: -1.2em;
    left: -3.4em;
    -webkit-transform: translateZ(-1000em);
    transform: translateZ(-1000em);
    -webkit-animation: cubeRotate var(--rotateSpeed) linear 2s, cuboidMove 1.5s ease-out 7.3s forwards;
    animation: cubeRotate var(--rotateSpeed) linear 2s, cuboidMove 1.5s ease-out 7.3s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.cuboid .front,
.cuboid .back {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(151, 53, 36, 0.8);
    -webkit-box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6) inset;
    box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6) inset;
    text-align: center;
    line-height: 100%;
    color: #d5ebfa;
    border-radius: 3%;
}

.cuboid .right,
.cuboid .left {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(151, 53, 36, 0.8);
    -webkit-box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6) inset;
    box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6) inset;
    border-radius: 5%;
}

.cuboid .front {
    -webkit-transform: translateZ(0.8em);
    transform: translateZ(0.8em);
}

.cuboid .back {
    -webkit-transform: translateZ(-0.8em);
    transform: translateZ(-0.8em);
}

.cuboid .right {
    -webkit-transform: rotateY(90deg) translateZ(0.8em) translateX(0em) translateY(0em);
    transform: rotateY(90deg) translateZ(0.8em) translateX(0em) translateY(0em);
}

.cuboid .left {
    -webkit-transform: rotateY(90deg) translateZ(-0.8em) translateX(0em) translateY(0em);
    transform: rotateY(90deg) translateZ(-0.8em) translateX(0em) translateY(0em);
}

.cuboid .bottom,
.cuboid .top {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(151, 53, 36, 0.8);
    -webkit-box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6) inset;
    box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6) inset;
    border-radius: 3%;
}

.cuboid .bottom {
    -webkit-transform: rotateX(90deg) translateZ(-0.8em);
    transform: rotateX(90deg) translateZ(-0.8em);
}

.cuboid .top {
    -webkit-transform: rotateX(270deg) rotateZ(-180deg) translateZ(-0.8em);
    transform: rotateX(270deg) rotateZ(-180deg) translateZ(-0.8em);
}


/*              cuboid nmbr 2           */

.cuboid1 {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: absolute;
    width: 1.5em;
    height: 1.5em;
    top: -1em;
    left: 2.15em;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-animation: cubeRotate1 var(--rotateSpeed) ease-out 3s;
    animation: cubeRotate1 var(--rotateSpeed) ease-out 3s;
    animation-fill-mode: forwards;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.cuboid1 .front1,
.cuboid1 .back1 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(151, 53, 36, 0.8);
    -webkit-box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6) inset;
    box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6) inset;
    text-align: center;
    line-height: 100%;
    color: #d5ebfa;
    border-radius: 3%;
}

.cuboid1 .right1,
.cuboid1 .left1 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(151, 53, 36, 0.8);
    -webkit-box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6) inset;
    box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6) inset;
    border-radius: 3%;
}

.cuboid1 .front1 {
    -webkit-transform: translateZ(0.75em);
    transform: translateZ(0.75em);
}

.cuboid1 .back1 {
    -webkit-transform: translateZ(-0.75em);
    transform: translateZ(-0.75em);
}

.cuboid1 .right1 {
    -webkit-transform: rotateY(90deg) translateZ(-0.75em) translateX(0em) translateY(0em);
    transform: rotateY(90deg) translateZ(-0.75em) translateX(0em) translateY(0em);
}

.cuboid1 .left1 {
    -webkit-transform: rotateY(90deg) translateZ(0.75em) translateX(0em) translateY(0em);
    transform: rotateY(90deg) translateZ(0.75em) translateX(0em) translateY(0em);
}

.cuboid1 .bottom1,
.cuboid1 .top1 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(151, 53, 36, 0.8);
    -webkit-box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6) inset;
    box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6) inset;
    border-radius: 3%;
}

.cuboid1 .bottom1 {
    -webkit-transform: rotateX(90deg) translateZ(-0.75em);
    transform: rotateX(90deg) translateZ(-0.75em);
}

.cuboid1 .top1 {
    -webkit-transform: rotateX(270deg) rotateZ(-180deg) translateZ(-0.75em);
    transform: rotateX(270deg) rotateZ(-180deg) translateZ(-0.75em);
}


/*              Cuboid nmbr 3               */

.cuboid2 {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: absolute;
    width: 2.2em;
    height: 2.2em;
    top: -1.8em;
    left: -1.2em;
    -webkit-animation: cubeRotate3 var(--rotateSpeed3) linear;
    animation: cubeRotate3 var(--rotateSpeed3) linear;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.cuboid2 .front2,
.cuboid2 .back2 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(151, 53, 36, 0.8);
    -webkit-box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6) inset;
    box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6) inset;
    text-align: center;
    line-height: 100%;
    color: #d5ebfa;
    border-radius: 3%;
}

.cuboid2 .right2,
.cuboid2 .left2 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(151, 53, 36, 0.8);
    -webkit-box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6) inset;
    box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6) inset;
    border-radius: 3%;
}

.cuboid2 .front2 {
    -webkit-transform: translateZ(1.1em);
    transform: translateZ(1.1em);
}

.cuboid2 .front2 h3 {
    margin: 0.5em auto;
    opacity: 0;
    -webkit-animation: firstLetter ease-in 1s;
    animation: firstLetter ease-in 1s;
    -webkit-animation-delay: 7s;
    animation-delay: 7s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    color: #ebc981e6;
}

.cuboid2 .back2 {
    -webkit-transform: translateZ(-1.1em);
    transform: translateZ(-1.1em);
}

.cuboid2 .right2 {
    -webkit-transform: rotateY(90deg) translateZ(-1.1em) translateX(0em) translateY(0em);
    transform: rotateY(90deg) translateZ(-1.1em) translateX(0em) translateY(0em);
}

.cuboid2 .left2 {
    -webkit-transform: rotateY(90deg) translateZ(1.1em) translateX(0em) translateY(0em);
    transform: rotateY(90deg) translateZ(1.1em) translateX(0em) translateY(0em);
}

.cuboid2 .bottom2,
.cuboid2 .top2 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(151, 53, 36, 0.8);
    -webkit-box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6) inset;
    box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6) inset;
    border-radius: 3%;
}

.cuboid2 .bottom2 {
    -webkit-transform: rotateX(90deg) translateZ(-1.1em);
    transform: rotateX(90deg) translateZ(-1.1em);
}

.cuboid2 .top2 {
    -webkit-transform: rotateX(270deg) rotateZ(-180deg) translateZ(-1.1em);
    transform: rotateX(270deg) rotateZ(-180deg) translateZ(-1.1em);
}


/*                  cuboid nmbr 4               */

.cuboid3 {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: absolute;
    width: 0.5em;
    height: 0.5em;
    top: -0.5em;
    left: -1.4em;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-animation: cubeRotate2 var(--rotateSpeed1) linear 7s, cuboidThreeScale 1s ease-in forwards 8.5s;
    animation: cubeRotate2 var(--rotateSpeed1) linear 7s, cuboidThreeScale 1s ease-in forwards 8.5s;
    -webkit-animation-play-state: running;
    animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.cuboid3 .front3,
.cuboid3 .back3 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(151, 53, 36, 0.8);
    -webkit-box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6) inset;
    box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6) inset;
    text-align: center;
    line-height: 100%;
    color: #d5ebfa;
    border-radius: 3%;
}

.cuboid3 .right3,
.cuboid3 .left3 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(151, 53, 36, 0.8);
    -webkit-box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6) inset;
    box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6) inset;
    border-radius: 3%;
}

.cuboid3 .front3 {
    -webkit-transform: translateZ(0.25em);
    transform: translateZ(0.25em);
}

.cuboid3 .back3 {
    -webkit-transform: translateZ(-0.25em);
    transform: translateZ(-0.25em);
}

.cuboid3 .right3 {
    -webkit-transform: rotateY(90deg) translateZ(-0.25em) translateX(0em) translateY(0em);
    transform: rotateY(90deg) translateZ(-0.25em) translateX(0em) translateY(0em);
}

.cuboid3 .left3 {
    -webkit-transform: rotateY(90deg) translateZ(0.25em) translateX(0em) translateY(0em);
    transform: rotateY(90deg) translateZ(0.25em) translateX(0em) translateY(0em);
}

.cuboid3 .bottom3,
.cuboid3 .top3 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(151, 53, 36, 0.8);
    -webkit-box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6) inset;
    box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6) inset;
    border-radius: 3%;
}

.cuboid3 .bottom3 {
    -webkit-transform: rotateX(90deg) translateZ(-0.25em);
    transform: rotateX(90deg) translateZ(-0.25em);
}

.cuboid3 .top3 {
    -webkit-transform: rotateX(270deg) rotateZ(-180deg) translateZ(-0.25em);
    transform: rotateX(270deg) rotateZ(-180deg) translateZ(-0.25em);
}


/*              cuboid nmbr 5                   */

.cuboid4 {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: absolute;
    width: 1.6em;
    height: 1.6em;
    top: 1.6em;
    left: -5.1em;
    animation: cubeRotate4 var(--rotateSpeed4) linear;
    animation-fill-mode: forwards;
    animation-play-state: running;
    transform: scale(0);
}

.cuboid4 .right4,
.cuboid4 .left4 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(151, 53, 36, 0.8);
    -webkit-box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6) inset;
    box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6) inset;
    border-radius: 3%;
}

.cuboid4 .top4,
.cuboid4 .bottom4 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(151, 53, 36, 0.8);
    -webkit-box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6) inset;
    box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6) inset;
    border-radius: 3%;
}

.cuboid4 .front4,
.cuboid4 .back4 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(151, 53, 36, 0.8);
    -webkit-box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6) inset;
    box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6) inset;
    border-radius: 3%;
}

.cuboid4 .front4 {
    -webkit-transform: translateZ(0.80em);
    transform: translateZ(0.80em);
}

.cuboid4 .back4 {
    -webkit-transform: translateZ(-0.80em);
    transform: translateZ(-0.80em);
}

.cuboid4 .right4 {
    -webkit-transform: rotateY(90deg) translateZ(0.80em) translateX(0em) translateY(0em);
    transform: rotateY(90deg) translateZ(0.80em) translateX(0em) translateY(0em);
}

.cuboid4 .left4 {
    -webkit-transform: rotateY(90deg) translateZ(-0.80em) translateX(0em) translateY(0em);
    transform: rotateY(90deg) translateZ(-0.80em) translateX(0em) translateY(0em);
}

.cuboid4 .top4 {
    transform: rotateX(90deg) translateZ(0.8em);
}

.cuboid4 .bottom4 {
    transform: rotateX(-90deg) translateZ(-0.8em);
}


/*              cuboid nmbr 6           */

.cuboid5 {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: absolute;
    width: 1.6em;
    height: 1.6em;
    top: 1.6em;
    left: -2.6em;
    transform: translateZ(-1000em);
    animation: cubeRotate5 var(--rotateSpeed4) linear;
    animation-fill-mode: forwards;
    animation-play-state: running;
}

.cuboid5 .right5,
.cuboid5 .left5 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(151, 53, 36, 0.8);
    -webkit-box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6) inset;
    box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6) inset;
    border-radius: 3%;
}

.cuboid5 .top5,
.cuboid5 .bottom5 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(151, 53, 36, 0.8);
    -webkit-box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6) inset;
    box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6) inset;
    border-radius: 3%;
}

.cuboid5 .front5,
.cuboid5 .back5 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(151, 53, 36, 0.8);
    -webkit-box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6) inset;
    box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6) inset;
    border-radius: 3%;
}

.cuboid5 .front5 {
    -webkit-transform: translateZ(0.80em);
    transform: translateZ(0.80em);
}

.cuboid5 .back5 {
    -webkit-transform: translateZ(-0.80em);
    transform: translateZ(-0.80em);
}

.cuboid5 .right5 {
    -webkit-transform: rotateY(90deg) translateZ(0.80em) translateX(0em) translateY(0em);
    transform: rotateY(90deg) translateZ(0.80em) translateX(0em) translateY(0em);
}

.cuboid5 .left5 {
    -webkit-transform: rotateY(90deg) translateZ(-0.80em) translateX(0em) translateY(0em);
    transform: rotateY(90deg) translateZ(-0.80em) translateX(0em) translateY(0em);
}

.cuboid5 .top5 {
    transform: rotateX(90deg) translateZ(0.8em);
}

.cuboid5 .bottom5 {
    transform: rotateX(-90deg) translateZ(-0.8em);
}


/*              Animations                  */

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


/*              first animation                 */

@keyframes cubeRotate {
    0% {
        -webkit-transform: translateZ(-15em) scale(0);
        transform: translateZ(-15em) scale(0);
    }
    6% {
        -webkit-transform: translateZ(0.5em) scale(1);
        transform: translateZ(0.5em) scale(1);
    }
    8% {
        -webkit-transform: translateZ(-0.05em);
        transform: translateZ(-0.05em);
    }
    12% {
        -webkit-transform: rotateX(-360deg);
        transform: rotateX(-360deg);
    }
    15% {
        -webkit-transform: rotateX(-360deg);
        transform: rotateX(-360deg);
    }
    30% {
        -webkit-transform: rotateZ(-360deg);
        transform: rotateZ(-360deg);
    }
    45% {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
    60% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
    85% {
        -webkit-transform: rotateY(-360deg);
        transform: rotateY(-360deg);
    }
    86% {
        -webkit-transform: translateX(0.2em);
        transform: translateX(0.2em);
    }
    87% {
        -webkit-transform: translateX(0.4em);
        transform: translateX(0.4em);
    }
    88% {
        -webkit-transform: translateX(0.6em);
        transform: translateX(0.6em);
    }
    89% {
        -webkit-transform: translateX(0.8em);
        transform: translateX(0.8em);
    }
    90% {
        -webkit-transform: translateX(1em);
        transform: translateX(1em);
    }
    91% {
        -webkit-transform: translateX(1.1em);
        transform: translateX(1.1em);
    }
    92% {
        -webkit-transform: translateX(1.2em);
        transform: translateX(1.2em);
    }
    93% {
        -webkit-transform: translateX(1.3em);
        transform: translateX(1.3em);
    }
    94% {
        -webkit-transform: translateX(1.4em);
        transform: translateX(1.4em);
    }
    95% {
        -webkit-transform: translateX(1.5em);
        transform: translateX(1.5em);
    }
    96% {
        -webkit-transform: translateX(1.6em);
        transform: translateX(1.6em);
    }
    97% {
        -webkit-transform: translateX(1.7em);
        transform: translateX(1.7em);
    }
    98% {
        -webkit-transform: translateX(1.8em);
        transform: translateX(1.8em);
    }
    100% {
        -webkit-transform: translateX(1.8em) translateZ(0em);
        transform: translateX(1.8em) translateZ(0em);
    }
}

@keyframes cuboidMove {
    to {
        -webkit-transform: translateY(-0.3em) translateX(3em) translateZ(0.5em);
        transform: translateY(-0.3em) translateX(3em) translateZ(0.5em);
    }
}


/*              second animation                */

@keyframes cubeRotate1 {
    from {
        -webkit-transform: rotateX(360deg) scale(0);
        transform: rotateX(360deg) scale(0);
    }
    50% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    55% {
        -webkit-transform: scale(0.6);
        transform: scale(0.6);
    }
    75% {
        -webkit-transform: rotateX(360deg) scale(1);
        transform: rotateX(360deg) scale(1);
    }
    100% {
        -webkit-transform: rotateX(360deg) scale(1);
        transform: rotateX(360deg) scale(1);
    }
}


/*              third animation             */

@keyframes cubeRotate2 {
    from {
        -webkit-transform: rotateX(-360deg) scale(0);
        transform: rotateX(-360deg) scale(0);
    }
    35% {
        -webkit-transform: rotateX(0deg) scaleX(1) translateZ(0.4em);
        transform: rotateX(0deg) scaleX(1) translateZ(0.4em);
    }
    40% {
        -webkit-transform: scaleX(2) scaleY(2) scaleZ(0.5);
        transform: scaleX(2) scaleY(2) scaleZ(0.5);
    }
    45% {
        -webkit-transform: scaleX(2) scaleY(2) scaleZ(0.2) translateZ(0.4em);
        transform: scaleX(2) scaleY(2) scaleZ(0.2) translateZ(0.4em);
    }
    55% {
        -webkit-transform: scaleX(2) scaleY(2) scaleZ(0.2) translateZ(0.4em);
        transform: scaleX(2) scaleY(2) scaleZ(0.2) translateZ(0.4em);
    }
    to {
        -webkit-transform: scaleX(2) scaleY(2) scaleZ(0.2) translateZ(0.4em);
        transform: scaleX(2) scaleY(2) scaleZ(0.2) translateZ(0.4em);
    }
}


/*          animation               */

@keyframes cubeRotate3 {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    5% {
        -webkit-transform: rotateY(0deg) scale(0);
        transform: rotateY(0deg) scale(0);
    }
    20% {
        -webkit-transform: rotateX(-360deg);
        transform: rotateX(-360deg);
    }
    40% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
    }
    55% {
        -webkit-transform: rotateZ(-360deg);
        transform: rotateZ(-360deg);
    }
    70% {
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
    75% {
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
    85% {
        -webkit-transform: translateY(-75%);
        transform: translateY(-75%);
    }
    90% {
        -webkit-transform: translateY(-75%) translateX(-150%);
        transform: translateY(-75%) translateX(-150%);
    }
    95% {
        -webkit-transform: translateY(-75%) translateX(-150%);
        transform: translateY(-75%) translateX(-150%);
    }
    to {
        -webkit-transform: translateY(0%) translateX(-150%);
        transform: translateY(0%) translateX(-150%);
    }
}

@keyframes cuboidThreeScale {
    to {
        -webkit-transform: translateZ(0.5em) translateY(-0.5em) scaleX(1.8) scaleY(5) scaleZ(1.2);
        transform: translateZ(0.5em) translateY(-0.5em) scaleX(1.8) scaleY(5) scaleZ(1.2);
    }
}


/*              animation 5             */

@keyframes cubeRotate4 {
    from {
        transform: translateZ(-20em) translateX(-15em) scale(0);
    }
    87% {
        transform: scale(0) translateX(-15em) translateZ(-20em);
    }
    88% {
        transform: scale(0.01) translateX(-15em) translateZ(-20em);
    }
    92% {
        transform: scale(0.1) translateX(-15em) translateZ(-20em);
    }
    to {
        transform: translateX(2.8em) translateZ(0em) translateY(0.2em) scale(1);
    }
}


/*              animation 6             */

@keyframes cubeRotate5 {
    from {
        transform: translateZ(-20em) translateX(15em) scale(0);
    }
    87% {
        transform: scale(0) translateX(15em) translateZ(-20em);
    }
    88% {
        transform: scale(0.01) translateX(15em) translateZ(-20em);
    }
    92% {
        transform: scale(0.1) translateX(15em) translateZ(-20em);
    }
    to {
        transform: translateX(3.15em) translateZ(0em) translateY(0.2em) scale(1);
    }
}


/*              letter animations and styles                */

.first-letter {
    margin: 0.5em auto;
    opacity: 100%;
    -webkit-animation: firstLetter ease-in 1s;
    animation: firstLetter ease-in 1s;
    -webkit-animation-delay: 7s;
    animation-delay: 7s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    color: #ebc981e6;
    font-size: 1em;
    position: relative;
    top: 0.1em;
}

@keyframes firstLetter {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


/*          fl end          */

.second-letter {
    font-size: 1em;
    position: absolute;
    top: -0.25em;
    left: 0.1em;
    -webkit-transform: translateZ(0.625em);
    transform: translateZ(0.625em);
    opacity: 0;
    color: #ebc981e6;
    -webkit-animation: fadeInTextLetterI 1.5s ease-out forwards;
    animation: fadeInTextLetterI 1.5s ease-out forwards;
    -webkit-animation-delay: 9.2s;
    animation-delay: 9.2s;
}

@keyframes fadeInText {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeInTextLetterI {
    0% {
        opacity: 0;
        scale: 0;
    }
    50% {
        opacity: 0.5;
        scale: 0.125;
    }
    100% {
        opacity: 1;
        scale: 0.25;
        transform: scaleX(1.2);
    }
}

@-webkit-keyframes fadeInTextLetterI {
    0% {
        opacity: 0;
        scale: 0;
    }
    50% {
        opacity: 0.5;
        scale: 0.125;
    }
    100% {
        opacity: 1;
        scale: 0.25;
        transform: scaleX(1.2);
    }
}


/*          sl end          */

.third-letter {
    font-size: 1em;
    position: absolute;
    top: 0.25em;
    left: 0.45em;
    -webkit-transform: translateZ(1.125em);
    transform: translateZ(1.125em);
    opacity: 0;
    color: #ebc981e6;
    -webkit-animation: fadeInText 1s ease-out forwards;
    animation: fadeInText 1s ease-out forwards;
    -webkit-animation-delay: 9s;
    animation-delay: 9s;
}


/*          tl end             */

.fourth-letter {
    font-size: 1em;
    position: absolute;
    top: 0.1em;
    left: 0.45em;
    -webkit-transform: translateZ(1.125em);
    transform: translateZ(1.125em);
    opacity: 0;
    color: #ebc981e6;
    -webkit-animation: fadeInText 1s ease-out forwards;
    animation: fadeInText 1s ease-out forwards;
    -webkit-animation-delay: 9s;
    animation-delay: 9s;
}


/*              fl end              */

.fifth-letter {
    font-size: 1em;
    position: absolute;
    top: 0.25em;
    left: 0.3em;
    -webkit-transform: translateZ(1.125em);
    transform: translateZ(1.125em);
    opacity: 0;
    color: #ebc981e6;
    -webkit-animation: fadeInText 1s ease-out forwards;
    animation: fadeInText 1s ease-out forwards;
    -webkit-animation-delay: 9s;
    animation-delay: 9s;
}


/*              sl end              */

.sixth-letter {
    font-size: 1em;
    position: absolute;
    top: 0.25em;
    left: 0.5em;
    -webkit-transform: translateZ(1.125em);
    transform: translateZ(1.125em);
    opacity: 0;
    color: #ebc981e6;
    -webkit-animation: fadeInText 1s ease-out forwards;
    animation: fadeInText 1s ease-out forwards;
    -webkit-animation-delay: 9s;
    animation-delay: 9s;
}

.first-letter,
.second-letter,
.third-letter,
.fourth-letter,
.fifth-letter,
.sixth-letter {
    margin: 0;
}


/*              footer                  */

.footer {
    background: #ebc981e6;
    color: rgba(151, 53, 36, 0.8);
    text-align: center;
    pad: 2.5em 0em;
    font-size: var(--fs-h3);
}

.footer a {
    color: inherit;
    text-decoration: none;
}

.footer__link {
    font-weight: var(--fw-bold);
    position: relative;
    top: 1em;
}

.footer__link:hover,
.social-list__link:hover {
    opacity: .7;
}

.footer__link:hover {
    text-decoration: underline;
}

.social-list {
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 2em 0 0;
    padding: 0;
}

.social-list__item {
    margin-top: .5em;
    margin-bottom: 1em;
}

.social-list__link {
    padding: .25em;
    margin-left: 1em;
    margin-bottom: 3em;
}

@media (min-width:300px) {
    .scene-holder {
        font-size: 20px;
        top: -5.5em;
    }
    .scene-background {
        height: 100%;
        background-position: center;
        background-size: cover;
    }
    .scene h2 {
        font-size: .5rem;
    }
    header .heading {
        font-size: .75rem;
        margin: 0 auto;
        padding: 1em;
    }
}

@media (min-width:500px) {
    .scene-holder {
        font-size: 25px;
        top: -5.5em
    }
    .scene-background {
        height: 100%;
        background-position: center;
        background-size: cover;
    }
    .scene h2 {
        font-size: .9rem;
    }
    header .heading {
        font-size: .75rem;
        margin: 0 auto;
        padding: 1em;
    }
}

@media (min-width:800px) {
    .scene-holder {
        font-size: 50px;
        top: -5.5em
    }
    .scene-background {
        height: 100%;
        background-position-x: center;
        background-size: cover;
    }
    .scene h2 {
        font-size: 1.5rem;
    }
    header .heading {
        font-size: 2rem;
        margin: 0 auto;
        padding: 1em;
    }
}

@media (min-width:1000px) {
    .scene-holder {
        font-size: 75px;
        top: -1.5em
    }
    .scene-background {
        height: 100%;
        background-position-x: 0;
        background-size: cover;
    }
}