Team E Thx Family

✨ APICHET KOMWATCHARAPONG

<html>
  <head>
    <style>
    	* {
  margin: 0;
  box-sizing: border-box;
}

body {
  font-size: .9em;
  display: flex;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  background-color: black;
}

.wrap {
   display: block;
   width: 100%;
   text-align: center;
}
      
.main {
  display: inline-block;
  position: relative;
  height: 600px;
  width: 1300px;
  overflow: hidden;
  background-image: url('https://media.discordapp.net/attachments/809796054848634932/810176112579182592/frame.png');
  background-size: 100% 100%;
background-repeat: no-repeat;
}

.bg-front {
  position: absolute;
  bottom: 0;
  left: -5%;
  width: 110%;
  height: 100%;
  background-image: url("https://media.discordapp.net/attachments/809796054848634932/810142651093221386/bgcastle.png");
  background-size: 100%  100%;
  background-repeat: no-repeat;
  z-index: -98;
  animation: castle 1.5s linear infinite;
}

@keyframes castle {
  50% {transform: skew(3deg);}
}
      
.bg-back {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("https://media.discordapp.net/attachments/809796054848634932/810137675931451432/image0.jpg");
  background-size: 100% 100%;
  z-index: -99;
}
      
      
.fah img {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 20em;
  height: auto;
  animation: yokyok 2s linear 2.5s infinite;
  z-index: -3;
}

.putter img {
  position: absolute;
  top: 5%;
  right: 5%;
  width: 18em;
  height: auto;
  animation: yokyok 2s linear 1.5s infinite;
  z-index: -3;
}

.ball img {
  position: absolute;
  top: 20%;
  left: -30%;
  width: 5em;
  height: auto;
  animation: move 10s linear infinite;
  z-index: -1;
}
      
.thx img {
  position: absolute;
  top: 0%;
  left: -30%;
  width: 25em;
  height: auto;
  animation: move 10s linear 2s infinite;
  z-index: -2;
}

.jean img {
  position: absolute;
  top: 15%;
  left: -30%;
  width: 20em;
  height: auto;
  animation: move 10s linear 3s infinite;
  z-index: -2;
}

@keyframes move {
  to {
    transform: translatex(130vw);
  }
}

.boat-pleng-art img {
  width: 20em;
  height: auto;
  position: absolute;
  bottom: 8%;
  left: 25%;
  animation: yokyok 5s linear 1s infinite;
}

.boat-neng-phai img {
  width: 25em;
  height: auto;
  position: absolute;
  bottom: 0%;
  left: 0%;
  animation: yokyok 5s linear 2s infinite;
}

.boat-o-aum img {
  width: 20em;
  height: auto;
  position: absolute;
  bottom: 8%;
  right: 25%;
  animation: yokyok 5s linear 2s infinite;
}

.boat-mom-fang img {
  width: 25em;
  height: auto;
  position: absolute;
  bottom: 0%;
  right: 0%;
  animation: yokyok 5s linear 1s infinite;
}

@keyframes yokyok {
  50% {
    transform: translatey(20px);
  }
}
       
.text img {
  position: absolute;
  width: 30em;
  height: 10em;
  top: 10%;
  left: calc((100% - 30em)/2);
  z-index: -4;
}
      
</style>
  </head>
  <body>

</div>
    
  </div>