<div class=container>
  <div class=content style=display:block;width:1000px;height:562px>
    <div class=container-full>
      <div class="animated hue"></div><img class=backgroundImage src="https://drive.google.com/thumbnail?id=1_ZMV_LcmUXLsRokuz6WXGyN9zVCGfAHp&sz=w1920"> <img class=boyImage src="https://drive.google.com/thumbnail?id=1eGqJskQQgBJ67myGekmo4YfIVI3lfDTm&sz=w1920">
      <div class=container>
        <div class=cube>
          <div class="face top"></div>
          <div class="face bottom"></div>
          <div class="face left text"></div>
          <div class="face right text"></div>
          <div class="face front"></div>
          <div class="face back text"></div>
        </div>
      </div>
      <div class=container-reflect>
        <div class=cube>
          <div class="face top"></div>
          <div class="face bottom"></div>
          <div class="face left text"></div>
          <div class="face right text"></div>
          <div class="face front"></div>
          <div class="face back text"></div>
        </div>
      </div>
    </div>
  </div>
</div>

@import url(https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap);
.card,
.content,
body {
  overflow: hidden;
}
body {
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: black;
}
.card,
.container {
  display: flex;
  align-items: center;
}
.card {
  width: 1280px;
  height: 720px;
  margin: 0;
  justify-content: center;
}
.container-full,
.content {
  width: 1000px;
  height: 562px;
}
.backgroundImage {
  position: absolute;
  width: 1000px;
}
.boyImage {
  position: absolute;
  width: 1000px;
  z-index: 2;
  animation: 200s linear infinite blur;
}
.content {
  border-radius: 40px;
  animation: 200s linear infinite brightness;
}
.container {
  justify-content: center;
}
.container-full,
.face {
  display: flex;
  align-items: center;
  overflow: hidden;
}
.container-full {
  margin: 0;
  justify-content: center;
  transform: scale(1);
  animation: 200s linear infinite zoom-in;
}
.cube,
.face {
  width: 870px;
  height: 190px;
}
.cube {
  position: relative;
  transform-style: preserve-3d;
  perspective: 480px;
  transform-style: preserve-3d;
  perspective-origin: 51% 70%;
}
.face,
.hue {
  position: absolute;
}
.face {
  background: 0 0;
  border: 0 solid #000;
  opacity: 0.5;
}
.bottom,
.top {
  width: 870px;
  height: 870px;
}
p {
  white-space: nowrap;
  overflow: hidden;
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: calc(6em + (190px / 10) * 0.7);
  padding-top: 20px;
  color: #fff;
}
span {
  color: red;
}
.front {
  transform: translateZ(435px);
  display: none;
}
.back {
  transform: translateZ(-435px) rotateY(180deg) scaleX(-1);
}
.left {
  transform: translateX(-435px) rotateY(-90deg) scaleX(-1);
}
.right {
  transform: translateX(435px) rotateY(90deg) scaleX(-1);
}
.top {
  transform: translateY(-435px) rotateX(90deg) scaleY(-1);
}
.bottom {
  transform: translateY(-245px) rotateX(-90deg) scaleY(-1);
}
.left p {
  margin-left: 480px;
  animation: 200s linear infinite left;
}
.back p {
  margin-left: -390px;
  animation: 200s linear infinite back;
}
.right p {
  margin-left: -1260px;
  animation: 200s linear infinite right;
}
@keyframes left {
  100% {
    margin-left: -54000px;
  }
}
@keyframes back {
  100% {
    margin-left: -54870px;
  }
}
@keyframes right {
  100% {
    margin-left: -55740px;
  }
}
.hue {
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  mix-blend-mode: overlay;
  background: #1e5799;
  background: radial-gradient(ellipse at center, #1e5799 0, #7db9e8 100%);
  opacity: 1;
}
.hue.animated {
  -webkit-animation: 8s infinite filter-animation;
  animation: 8s infinite filter-animation;
}
.container-reflect {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 380px;
  filter: blur(10px);
}
.container-reflect .cube {
  perspective-origin: 51% -30%;
}
.container-reflect .back {
  transform: translateZ(-435px) rotateY(180deg) scaleX(-1) scaleY(-1);
}
.container-reflect .left {
  transform: translateX(-435px) rotateY(-90deg) scaleX(-1) scaleY(-1);
}
.container-reflect .right {
  transform: translateX(435px) rotateY(90deg) scaleX(-1) scaleY(-1);
}

.container-reflect p {
  transform: scaleY(70%);
}

@keyframes filter-animation {
  0%,
  100% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(100deg);
  }
}
@keyframes zoom-in {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(2.5);
  }
}
@keyframes blur {
  0% {
    filter: blur(0px);
  }
  100% {
    filter: blur(3px);
  }
}
@keyframes brightness {
  0% {
    filter: brightness(1) contrast(1);
  }
  100% {
    filter: brightness(0.8) contrast(1.3);
  }
}

// Poem text
const kiplingPoem = `<p>If you can <span>keep</span> your head when all about you    
Are <span>losing</span> theirs and <span>blaming</span> it on you; 
If you can <span>trust</span> yourself when all men <span>doubt</span> you,    
But make <span>allowance</span> for their doubting too; 
If you can <span>wait</span> and not be tired by waiting,    
Or, being <span>lied</span> about, don't deal in <span>lies</span>, 
Or, being <span>hated</span>, don't give way to <span>hating</span>,    
And yet don't look too good, nor talk too wise;
If you can <span>dream</span>—and not make dreams your <span>master</span>; 
If you can <span>think</span>—and not make thoughts your <span>aim</span>; 
If you can meet with <span>triumph</span> and <span>disaster</span>    
And treat those two <span>impostors</span> just the same; 
If you can bear to hear the <span>truth</span> you've spoken    
<span>Twisted</span> by knaves to make a <span>trap</span> for fools, 
Or watch the things you gave your life to <span>broken</span>,    
And <span>stoop</span> and build 'em up with wornout tools;
If you can make one <span>heap</span> of all your <span>winnings</span>    
And <span>risk</span> it on one turn of pitch-and-toss, 
And <span>lose</span>, and start again at your beginnings    
And never breathe a word about your <span>loss</span>; 
If you can <span>force</span> your heart and nerve and <span>sinew</span>    
To <span>serve</span> your turn long after they are gone, 
And so <span>hold on</span> when there is nothing in you    
Except the <span>Will</span> which says to them: "Hold on";
If you can <span>talk</span> with crowds and keep your <span>virtue</span>,    
Or <span>walk</span> with kings—nor lose the common <span>touch</span>; 
If neither <span>foes</span> nor loving friends can hurt you;    
If all men <span>count</span> with you, but none too much; 
If you can fill the unforgiving <span>minute</span> 
With sixty seconds' worth of distance <span>run</span>—    
Yours is the <span>Earth</span> and everything that's in it, 
And—which is more—you'll be a <span>Man</span>, my son!     -Rudyard Kipling</p>`;

// Function to insert poem into divs
function insertPoemIntoDivs() {
  // Get all .text divs
  const textDivs = document.querySelectorAll(".text");

  // Insert poem into all .text divs
  textDivs.forEach((div) => {
    div.innerHTML = kiplingPoem;
  });
}

// Call the function when the DOM is fully loaded
document.addEventListener("DOMContentLoaded", insertPoemIntoDivs);

const contentDiv = document.querySelector(".content");
function adjustContentSize() {
  const viewportWidth = window.innerWidth;
  const baseWidth = 1000;
  const scaleFactor =
    viewportWidth < baseWidth ? (viewportWidth / baseWidth) * 0.8 : 1;
  contentDiv.style.transform = `scale(${scaleFactor})`;
}
window.addEventListener("load", adjustContentSize);
window.addEventListener("resize", adjustContentSize);