@import url("https://fonts.googleapis.com/css2?family=Orelega+One&display=swap");
*,
*::before,
*::after {
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
}

body {
    font-family: "Orelega One", cursive;
    background-image: linear-gradient(#ccc, #999);
    color: #fffc;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    perspective: 20em;
}

.flag {
    position: relative;
    width: 0;
    height: 16em;
    background-color: #fff;
    transform: translateX(-6em) rotateX(-30deg) rotateY(15deg);
    transform-style: preserve-3d;
}

.flap {
    position: absolute;
    top: 0;
    left: calc(100% - 1px);
    width: calc(1em + 1px);
    height: 9em;
    box-shadow: 0px 0px 1em #0003 inset;
    transform-style: preserve-3d;
    transform-origin: left;
    -webkit-animation: flap 3s infinite ease-in-out;
    animation: flap 3s infinite ease-in-out;
}

.flap {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    background-image: linear-gradient(90deg, #920808, #920909);
    --v: 0deg;
}

.flap .content::before {
    left: 0em;
}

.flap .content::after {
    left: 0em;
}

.flap>.flap {
    -webkit-animation-delay: -0.375s;
    animation-delay: -0.375s;
    background-image: linear-gradient(90deg, #920909, #923009);
    --v: 2.5deg;
}

.flap>.flap .content::before {
    left: -0.25em;
}

.flap>.flap .content::after {
    left: -0.5em;
}

.flap>.flap>.flap {
    -webkit-animation-delay: -0.75s;
    animation-delay: -0.75s;
    background-image: linear-gradient(90deg, #923009, #a8380b);
    --v: 5deg;
}

.flap>.flap>.flap .content::before {
    left: -0.5em;
}

.flap>.flap>.flap .content::after {
    left: -1em;
}

.flap>.flap>.flap>.flap {
    -webkit-animation-delay: -1.125s;
    animation-delay: -1.125s;
    background-image: linear-gradient(90deg, #a8380b, #c5430f);
    --v: 7.5deg;
}

.flap>.flap>.flap>.flap .content::before {
    left: -0.75em;
}

.flap>.flap>.flap>.flap .content::after {
    left: -1.5em;
}

.flap>.flap>.flap>.flap>.flap {
    -webkit-animation-delay: -1.5s;
    animation-delay: -1.5s;
    background-image: linear-gradient(90deg, #c5430f, #c58b0f);
    --v: 10deg;
}

.flap>.flap>.flap>.flap>.flap .content::before {
    left: -1em;
}

.flap>.flap>.flap>.flap>.flap .content::after {
    left: -2em;
}

.flap>.flap>.flap>.flap>.flap>.flap {
    -webkit-animation-delay: -1.875s;
    animation-delay: -1.875s;
    background-image: linear-gradient(90deg, #c58b0f, #b3c50f);
    --v: 12.5deg;
}

.flap>.flap>.flap>.flap>.flap>.flap .content::before {
    left: -1.25em;
}

.flap>.flap>.flap>.flap>.flap>.flap .content::after {
    left: -2.5em;
}

.flap>.flap>.flap>.flap>.flap>.flap>.flap {
    -webkit-animation-delay: -2.25s;
    animation-delay: -2.25s;
    background-image: linear-gradient(90deg, #b3c50f, #67c50f);
    --v: 15deg;
}

.flap>.flap>.flap>.flap>.flap>.flap>.flap .content::before {
    left: -1.5em;
}

.flap>.flap>.flap>.flap>.flap>.flap>.flap .content::after {
    left: -3em;
}

.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap {
    -webkit-animation-delay: -2.625s;
    animation-delay: -2.625s;
    background-image: linear-gradient(90deg, #67c50f, #15c50f);
    --v: 17.5deg;
}

.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap .content::before {
    left: -1.75em;
}

.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap .content::after {
    left: -3.5em;
}

.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap {
    -webkit-animation-delay: -3s;
    animation-delay: -3s;
    background-image: linear-gradient(90deg, #15c50f, #0fc54c);
    --v: 20deg;
}

.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap .content::before {
    left: -2em;
}

.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap .content::after {
    left: -4em;
}

.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap {
    -webkit-animation-delay: -3.375s;
    animation-delay: -3.375s;
    background-image: linear-gradient(90deg, #0fc54c, #0fc5a7);
    --v: 22.5deg;
}

.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap .content::before {
    left: -2.25em;
}

.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap .content::after {
    left: -4.5em;
}

.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap {
    -webkit-animation-delay: -3.75s;
    animation-delay: -3.75s;
    background-image: linear-gradient(90deg, #0fc5a7, #0faac5);
    --v: 25deg;
}

.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap .content::before {
    left: -2.5em;
}

.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap .content::after {
    left: -5em;
}

.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap {
    -webkit-animation-delay: -4.125s;
    animation-delay: -4.125s;
    background-image: linear-gradient(90deg, #0faac5, #0f6dc5);
    --v: 27.5deg;
}

.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap .content::before {
    left: -2.75em;
}

.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap .content::after {
    left: -5.5em;
}

.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap {
    -webkit-animation-delay: -4.5s;
    animation-delay: -4.5s;
    background-image: linear-gradient(90deg, #0f6dc5, #0f21c5);
    --v: 30deg;
}

.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap .content::before {
    left: -3em;
}

.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap .content::after {
    left: -6em;
}

.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap {
    -webkit-animation-delay: -4.875s;
    animation-delay: -4.875s;
    background-image: linear-gradient(90deg, #0f21c5, #4f0fc5);
    --v: 32.5deg;
}

.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap .content::before {
    left: -3.25em;
}

.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap .content::after {
    left: -6.5em;
}

.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap {
    -webkit-animation-delay: -5.25s;
    animation-delay: -5.25s;
    background-image: linear-gradient(90deg, #4f0fc5, #3c2d86);
    --v: 35deg;
}

.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap .content::before {
    left: -3.5em;
}

.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap .content::after {
    left: -7em;
}

.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap {
    -webkit-animation-delay: -5.625s;
    animation-delay: -5.625s;
    background-image: linear-gradient(90deg, #3c2d86, #31256e);
    --v: 37.5deg;
}

.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap .content::before {
    left: -3.75em;
}

.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap>.flap .content::after {
    left: -7.5em;
}

.flap::after {
    content: "";
    position: absolute;
    top: 16em;
    left: 50%;
    width: 200%;
    height: 1em;
    background-color: #999;
    transform: translate(-50%, -50%) rotateX(90deg);
    border-radius: 0.5em;
    filter: blur(0.6em);
}

.content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform: translateZ(0.5px);
    text-shadow: 0 0 0.5em #000;
}

.content::before {
    content: "Pride";
    position: absolute;
    bottom: 40%;
    left: 0;
    width: 4em;
    text-align: center;
    font-size: 4em;
}

.content::after {
    content: "Pride  ";
    position: absolute;
    top: 50%;
    left: 0;
    width: 8em;
    text-align: center;
    font-size: 2em;
    white-space: pre;
    line-height: 0.8;
    -webkit-animation: afterText 6.6s infinite step-end;
    animation: afterText 6.6s infinite step-end;
}

@-webkit-keyframes afterText {
    0% {
        content: "love is love";
    }
    50% {
        content: "amor es amor";
    }
}

@keyframes afterText {
    0% {
        content: "love is love";
    }
    50% {
        content: "amor es amor";
    }
}

@-webkit-keyframes flap {
    0%,
    100% {
        transform: rotateY(calc(var(--v) * -1));
    }
    50% {
        transform: rotateY(var(--v));
    }
}

@keyframes flap {
    0%,
    100% {
        transform: rotateY(calc(var(--v) * -1));
    }
    50% {
        transform: rotateY(var(--v));
    }
}

.pole {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1em;
    height: 100%;
    border-radius: 0 0 0.5em 0.5em/0 0 0.3em 0.3em;
    background-image: linear-gradient(#7777, #6660, #555), linear-gradient(90deg, #777, #fff, #555);
}

.pole::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 4em;
    height: 4em;
    transform: translate(-50%, -50%) rotateX(90deg);
    background-image: radial-gradient(#0004, #0000 60%);
}

.pole::after {
    content: "";
    position: absolute;
    top: 0%;
    left: 50%;
    width: 1em;
    height: 0.4em;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background-image: radial-gradient(circle at top, #aaa, #333);
}