@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
body {
    font-family: 'Open Sans', sans-serif;
}

.rnOuter {
    background: #321fdb;
    overflow: hidden;
    position: relative;
    height: 100vh;
}

.rnInner {
    width: 100%;
    position: absolute;
    top: -10%;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    transform-style: preserve-3d;
    transition: transform 6s ease;
    transform-origin: -120% top;
}

.rnUnit {
    width: 10vw;
    height: 120vh;
    background: repeating-linear-gradient( to left, hsl(27, 89%, 49%) 4vw, hsl(29, 88%, 30%) 8vw, hsla(47, 86%, 48%, 0.835) 10vw);
    background-size: 100% 100%;
    display: inline-block;
    transform-origin: 0 0%;
    transform: rotate(3deg);
    -webkit-animation: rnUnit 2s ease infinite;
    animation: rnUnit 2s ease infinite;
}

@-webkit-keyframes rnUnit {
    50% {
        transform: rotate(-3deg);
    }
}

@keyframes rnUnit {
    50% {
        transform: rotate(-3deg);
    }
}

.rnUnit:nth-child(1) {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
}

.rnUnit:nth-child(2) {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
}

.rnUnit:nth-child(3) {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
}

.rnUnit:nth-child(4) {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
}

.rnUnit:nth-child(5) {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}

.rnUnit:nth-child(6) {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
}

.rnUnit:nth-child(7) {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
}

.rnUnit:nth-child(8) {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

.rnUnit:nth-child(9) {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.rnUnit:nth-child(10) {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}

.aoTable {
    display: table;
    width: 100%;
    height: 100vh;
    text-align: center;
}

.aoTableCell {
    color: hsl(0, 80%, 38%);
    display: table-cell;
    vertical-align: middle;
    transition: color 3s ease;
}

.rnOuter:hover .rnInner {
    transform-origin: -120% top;
    transform: scaleX(0);
}

.rnOuter:hover .aoTableCell {
    color: white;
}

.button {
    background-color: #4caf50;
    /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.button2 {
    background-color: #008cba;
}


/* Blue */

.button3 {
    background-color: #036ffc;
}


/* Red */

.button4 {
    background-color: #e7e7e7;
    color: black;
}


/* Gray */

.button5 {
    background-color: #555555;
}


/* Black */

.blink_me {
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}