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

        body {
            margin: 0;
            font-family: frivFont, arial, helvetica, sans-serif;
            font-size: 2vmax;
            color: white;
            /* xmod */
            background: #253370;
            overflow: hidden;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
            animation: backgroundAnim 30s infinite;
        }

        @keyframes backgroundAnim {

            0%,
            25%,
            100% {
                /* xmod */
                background: #253370;
            }

            30%,
            60% {
                /* xmod */
                background: #007733;
            }


            65%,
            95% {
                /* xmod */
                background: #fddf00;
            }

        }

        h1 {
            text-align: center;
            margin-top: 1vh;
            font-size: calc(2vmax + 2vw);
            color: white;
            text-shadow: 0.5vw 0.5vw 0 rgba(0, 0, 0, .3);
        }

        h2 {
            text-align: center;
            font-size: 3vw;
            color: white;
            text-shadow: 0.4vw 0.4vw 0 rgba(0, 0, 0, .3);
        }

        #clickText {
            position: fixed;
            top: 0;
            left: 0;
            padding-top: 70vh;
            width: 100vw;
            height: 100vh;
            margin: 0;
        }

        #logo {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 70vh;
            margin: 0;
            background-image: url("../img/frivBrazilLogoMin.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: 12vh;
            }
        }

        #mainText {
            margin: 0;
            opacity: 0;
            font-size: calc(1.5vmax + 5px);
            text-align: center;
            /* xmod */
            color: palegoldenrod;
            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 alternate infinite;
        }

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

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

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

        #musicToggle {
            position: fixed;
            z-index: 35;
            top: 2vw;
            right: 3vw;
            width: 5vmax;
            cursor: pointer;
        }

        #soundIcon,
        #infoIcon {
            font-size: 4vmax;
            padding: 1vw;
        }

        #infoIcon {
            position: fixed;
            z-index: 35;
            left: 2vw;
            bottom: 2vw;
            font-size: 3.5vmax;
            cursor: pointer;
            animation: infoIconAnimation 0.5s 12s ease-out forwards;
        }

        @keyframes infoIconAnimation {
            to {
                bottom: -10vmax;
            }
        }

        #clickRegion {
            z-index: 30;
            position: fixed;
            top: 5vh;
            left: 10vw;
            width: 80vw;
            height: 80vh;
            cursor: pointer;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 50;
            padding-top: 1vw;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            position: relative;
            background-color: white;
            margin: auto;
            padding: 0;
            border: 1px solid magenta;
            width: 98vw;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            animation-name: animatetop;
            animation-duration: 0.4s
        }

        @keyframes animatetop {
            from {
                top: -300px;
                opacity: 0
            }

            to {
                top: 0;
                opacity: 1
            }
        }

        .close {
            color: white;
            float: right;
            font-size: 40px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }

        .modal-header {
            padding: 0.1vmax 0.5vmax;
            background-color: indigo;
            color: white;
        }

        .modal-body {
            padding: 0.1vmax;
            color: navy;
            font-size: calc(1.2vh + 0.8vw);
        }

        .modal-footer {
            padding: 2px 16px;
            background-color: indigo;
            color: white;
        }

        ul {
            text-align: center;
        }

        li {
            white-space: nowrap;
            display: inline;
        }

        li::before {
            content: " •";
        }

        li::after {
            content: "  ";
        }

        a {
            color: yellow;
            text-decoration: none;
        }

        #siteLink {
            color: yellow;
        }

        #counter {
            width: 1px;
            height: 1px;
        }