@font-face {
            font-family: frivFont;
            src: url(../woff/frivfont.woff);
            font-display: swap;
        }

        body {
            margin: 0;
            font-family: frivFont, arial, helvetica, sans-serif;
            font-size: 2vmax;
            color: white;
            padding-top: 100vh;
            background-image: linear-gradient(indigo, dodgerblue, indigo);
            overflow: hidden;
            cursor: pointer;
            animation: backColor 10s infinite alternate;
        }

        h1 {
            text-align: center;
            margin-top: 1vh;
            font-size: 5vw;
            color: #fff;
            text-shadow: 6px 6px 0 rgba(0, 0, 0, .3);
        }

        #outerContainer {
            height: 100%;
            background-color: lime;
        }

        #innerContainer {
            margin: 0;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            animation: colourShift 2s 40s alternate infinite;
        }

        @keyframes colourShift {
            to {
                filter: hue-rotate(360deg);
            }
        }

        #logo {
            width: 100vw;
            height: 70vh;
            max-height: 70vh;
            background-image: url("../svg/frivlogoparadisemin.svg");
            background-size: contain;
            background-position: center center;
            background-repeat: no-repeat;
            animation: brightFlash 0.2s 3s steps(1), brightFlash 0.2s 10s steps(1), brightFlash 0.2s 20s steps(1);
        }

        @keyframes brightFlash {

            0%,
            40%,
            80% {
                filter: brightness(0) invert(1);
            }

            20%,
            60%,
            100% {
                filter: none;
            }
        }

        #bottom,
        #left,
        #right,
        #top {
            background: rgba(0, 0, 0, .2);
            position: fixed;
        }

        #left,
        #right {
            top: 0;
            bottom: 0;
            width: 3vh;
        }

        #left {
            left: 0;
        }

        #right {
            right: 0;
        }

        #bottom,
        #top {
            left: 0;
            right: 0;
            height: 3vh;
        }

        #top {
            top: 0;
        }

        #bottom {
            bottom: 0;
            animation: bottomAnim 2s 12s ease-out forwards;
        }

        @keyframes bottomAnim {
            to {
                height: 10vh;
            }
        }

        #mainText {
            margin: 0;
            opacity: 0;
            font-size: calc(1.2vmax + 5px);
            text-align: center;
            color: goldenRod;
            padding: 0 50px 0 0;
            position: absolute;
            top: 50%;
            width: 90%;
            left: 5%;
            transform: translateY(-50%);
            animation: mainTextAnim 2s 14s linear forwards;
        }

        @keyframes mainTextAnim {
            to {
                opacity: 1;
            }
        }

        #scrollImageContainer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vw;
            overflow: hidden;
        }

        #scrollImage1,
        #scrollImage2 {
            position: absolute;
            top: -190vw;
            left: 0;
            width: 300vw;
            height: 900vw;
            animation: scrollImage1Anim 50s ease-in forwards;
        }

        #scrollImage2 {
            left: -150vw;
            animation: scrollImage2Anim 45s ease-in forwards;
        }

        @keyframes scrollImage1Anim {
            to {
                top: -500vw;
                left: -50vw;
                opacity: 0;
            }
        }

        @keyframes scrollImage2Anim {
            to {
                top: -500vw;
                left: -200vw;
                opacity: 0;
            }
        }