:root {
    --second: 40s;
    --cubic:ease-in-out;
    --cubic2:cubic-bezier(.3,1,.7,0);
}

@import url("https://fonts.googleapis.com/css2?family=Comfortaa&display=swap");
body{
    margin:0;
    background-image: linear-gradient(to left top, #96c0ff, #adcafd, #c1d4fc, #d3defa, #e4e9f8);
}
section{
    display:grid;
    margin:0;
    grid-template-columns: repeat(2, 1fr);
    height:100vh;
}
div{
    width:100%;
    height: 50vh;
    display: flex;
    vertical-align: center;
}
.first{
    animation:var(--second) var(--cubic) first infinite;
    -webkit-animation:var(--second) var(--cubic) first infinite;
    -moz-animation:var(--second) var(--cubic) first infinite;
    overflow: hidden;
}
.second{
    animation:var(--second) var(--cubic) second infinite;
    -webkit-animation:var(--second) var(--cubic) second infinite;
    -moz-animation:var(--second) var(--cubic) second infinite;
    overflow: hidden;
}
.third{
    animation:var(--second) var(--cubic) third infinite;
    -webkit-animation:var(--second) var(--cubic) third infinite;
    -moz-animation:var(--second) var(--cubic) third infinite;
    overflow: hidden;
}
.fourth{
    animation:var(--second) var(--cubic) fourth infinite;
    -webkit-animation:var(--second) var(--cubic) fourth infinite;
    -moz-animation:var(--second) var(--cubic) fourth infinite;
    overflow: hidden;
}
iframe{
    width:100%;
    height: 50vh;
}
h1{
    font-variant: Small-caps;
    font-size: 3em;
    letter-spacing:0.2em;
    width:100%;
    align-self: center;
    text-align: center;
}
span {
    opacity: 0;
    display: inline-block;
    transform: scale(0.8);
}
span.animate {
animation: pog 460ms cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
    -webkit-animation: pog 460ms cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
    -moz-animation: pog 460ms cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
}
span.animate2 {
    animation: pog2 460ms cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
    -webkit-animation: pog2 460ms cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
    -moz-animation: pog2 460ms cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
}
span.animate3 {
    animation: pog3 460ms cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
    -webkit-animation: pog3 460ms cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
    -moz-animation: pog3 460ms cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
}

@keyframes pog {
    from {
        opacity: 0;
        transform: scale(0.8) rotate(15deg);
        -webkit-transform: scale(0.8) rotate(15deg);
        -moz-transform: scale(0.8) rotate(15deg);
    }
    to {
        opacity: 1;
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
    }
}
@keyframes pog2 {
    from {
        opacity: 1;
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
    }
    to {
        opacity: 0;
        transform: scale(0.8) translateX(-10px) rotate(10deg);
        -webkit-transform: scale(0.8) translateX(-10px) rotate(10deg);
        -moz-transform: scale(0.8) translateX(-10px) rotate(10deg);
    }
}
@keyframes pog3 {
    from {
        opacity: 0;
        transform: translateY(-10px);
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
    }
}


@keyframes first {
    0%{
        transform: translateX(0);
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        z-index: 10;
    }
    12.5%{
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        z-index: 10;
    }
    25%{
        transform: translateX(100%) translateY(100%);
        -webkit-transform: translateX(100%) translateY(100%);
        -moz-transform: translateX(100%) translateY(100%);
        z-index: 1;
    }
    37.5%{
        transform: translateY(100%) translateX(0);
        -webkit-transform: translateY(100%) translateX(0);
        -moz-transform: translateY(100%) translateX(0);
        z-index: 1;
    }
    50%{
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        z-index: 10;
    }
}
@keyframes second {
    0%{
        transform: translateY(0);
        z-index: 10;
    }
    12.5%{
        transform: translateY(100%);
        z-index: 1;
    }
    25%{
        transform: translateY(100%) translateX(-100%);
        z-index: 1;
    }
    37.5%{
        transform: translateX(-100%) translateY(0);
        z-index: 10;
    }
    50%{
        transform: translateX(0);
        z-index: 10;
    }
}
@keyframes third {
    0%{
        transform: translateY(0);
        z-index: 1;
    }
    12.5%{
        transform: translateY(-100%);
        z-index: 10;
    }
    25%{
        transform: translateY(-100%) translateX(100%);
        z-index: 10;
    }
    37.5%{
        transform: translateX(100%) translateY(0);
        z-index: 1;
    }
    50%{
        transform: translateX(0);
        z-index: 1;
    }
}
@keyframes fourth {
    0%{
        transform: translateX(0);
        z-index: 1;
    }
    12.5%{
        transform: translateX(-100%);
        z-index: 1;
    }
    25%{
        transform: translateX(-100%) translateY(-100%);
        z-index: 10;
    }
    37.5%{
        transform: translateY(-100%) translateX(0);
        z-index: 10;
    }
    50%{
        transform: translateY(0);
        z-index: 1;
    }
}

#zoneDePepega{
    position: fixed;
    top:0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    z-index: 100;
}
#zoneDePepega .pepega{
    transform: scale(0);
    z-index: 100000;
}
#zoneDePepega .goldenPepega{
    transform: scale(0);
}
#zoneDePepega .animation{
    transform: scale(1);
    animation: 3s pepegaRotation forwards;
}

#zoneDePepega .animationgolden{
    transform: scale(1);
    animation:10s pepegaRotation forwards;
}
#zoneDePepega .animationplatinium{
    transform: scale(1);
    animation:30s pepegaRotation forwards;
}


#zoneDePepega .platiniumPepega{
    transform: scale(0);
}
#zoneDePepega .platiniumPepega{
    transform: scale(1);
    animation:10s pepegaRotation forwards;
}

#zoneDePepega .pepega img{
    width: 125px;
}
#zoneDePepega .goldenPepega img{
    width: 175px;
}
#zoneDePepega .platiniumPepega img{
    width: 220px;
}

@keyframes pepegaRotation {
    0%{
        transform: scale(0) rotate(-20deg);
    }
    50%{
        transform: scale(1) rotate(0);
    }
    100%{
        transform: scale(0) rotate(20deg);
    }
}