@font-face {
    font-family: Break;
    src: url('../../@/Break-Regular.woff2') format('woff2'),
         url('../../@/Break-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

body,
html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Break
}

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

body {
    background: #181820;
    color: #faf9f4;
    height: auto;
    min-height: 100%;
    overflow: hidden
}

.flipHorizontal {
    display: inline-block;
    transform: scaleX(-1);
    color: #faf9f4;
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -o-transform: scaleX(-1)
}

main {
    background: #181820;
    padding: 2rem;
    max-width: 100%;
    width: 960px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2rem
}

main>* {
    grid-column: 1/-1
}

img {
    max-width: 100%
}

p {
    line-height: 1.8;
    margin: 1rem 0;
    color: #faf9f4
}

h1 {
    line-height: 1.3;
    font-size: 40px;
    margin: 1rem 0;
    letter-spacing: 1rem
}

h2 {
    font-size: 40px
}

section {
    grid-column: auto
}

header {
    display: grid;
    align-content: center;
    grid-column: 1/-1
}

.container {
    perspective: 1200px;
    transform-style: preserve-3d;
    -webkit-animation: cinematic-camera 11s cubic-bezier(.6, 0, .4, 1) both infinite;
    animation: cinematic-camera 11s cubic-bezier(.6, 0, .4, 1) both infinite
}

@-webkit-keyframes cinematic-camera {
    from {
        perspective-origin: 60% 40%
    }

    to {
        perspective-origin: 40% 60%
    }

    from,
    to {
        opacity: 0
    }

    25%,
    75% {
        opacity: 1
    }
}

@keyframes cinematic-camera {
    from {
        perspective-origin: 60% 40%
    }

    to {
        perspective-origin: 40% 60%
    }

    from,
    to {
        opacity: 0
    }

    25%,
    75% {
        opacity: 1
    }
}

.container:after {
    content: "";
    background: linear-gradient(to bottom, #181820, #18182040, #18182080, #181820);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh
}

main {
    transform-origin: top center;
    transform-style: preserve-3d;
    -webkit-animation: inherit;
    animation: inherit;
    -webkit-animation-name: cinematic;
    animation-name: cinematic
}

main>img {
    display: block;
    transform-style: preserve-3d;
    -webkit-animation: inherit;
    animation: inherit;
    -webkit-animation-name: image-pop;
    animation-name: image-pop
}

@-webkit-keyframes image-pop {

    100%,
    70% {
        transform: translate3d(0, 0, 60px)
    }
}

@keyframes image-pop {

    100%,
    70% {
        transform: translate3d(0, 0, 60px)
    }
}

main>img:last-of-type {
    -webkit-animation-delay: 4s;
    animation-delay: 4s
}

@-webkit-keyframes cinematic {
    from {
        transform: translateZ(-200px) rotateY(30deg) translateY(50vh)
    }

    to {
        transform: translateZ(-100px) rotateY(-30deg) translateY(-100%) translateY(50vh)
    }
}

@keyframes cinematic {
    from {
        transform: translateZ(-200px) rotateY(30deg) translateY(50vh)
    }

    to {
        transform: translateZ(-100px) rotateY(-30deg) translateY(-100%) translateY(50vh)
    }
}