styles.sass

body, html
    background: #f9f9f9
    font-size: 100%
    font-family: 'Special Elite', sans-serif
    text-transform: uppercase
* 
    padding: 0
    margin: 0
    box-sizing: border-box

p 
    font-size: 1em
.container 
    position: relative
    width: 100% 
    min-height: 100vh 
    // display: grid 
    // grid-template-columns: repeat(6, 1fr)
    max-width: 960px 
    margin: 0 auto
    display: flex
    justify-content: center 
    align-items: center

.warning
    width: 100% 
    position: absolute 
    z-index: 4 
    text-align: center 
    font-size: 2em

#video 
    opacity: 0

canvas 
    filter: greyscale(100%)
.video
    margin-right: 1em
    min-width: 400px
    min-height: 225px
    padding: 0
    position: relative
    video, canvas
        position: absolute
        top: 0 
        left: 0 

.story-container
    width: 100%
    min-height: 660px
    display: flex 
    justify-content: center
    background-repeat: no-repeat
    padding: 3em 5em
    position: relative

.paper-img 
    position: absolute
    top: 0
    left: 0 
    right: 0 
    bottom: 0 
    width: 100% 
    height: 100%
    z-index: 0
.story 
    z-index: 1
    width: 100%

.story-finish
    z-index: 1
    position: absolute
    bottom: 3em 
    margin-top: 2em
    font-size: 2em
    text-align: center 
    width: 100%
    opacity: 0