Welcome to CODEBOX! (Copy 2150)

✨ นายณัฐภัทร วัฒนพิทักษ์พงศ์

<html>
  <style>body{
  overflow:hidden;
  background-image: url("https://qlab.app/cookbook/images/thank-you-qlab-but-our-princess-is-in-another-castle/background-simple.png");
  animation: bg 30s infinite linear;
  background-size: 300%;
}

.container {
  margin-left:15%;
  margin-top:6.5%;
  position: relative;
  width: 1200px;
  transform: scale(1.3);
  border:1px solid #cccccc;
  background-image: url("https://i.pinimg.com/originals/2c/76/b0/2c76b01b04ea5f653da08f2f43c39a7f.gif");
   background-size: contain;
   background-postion: center center;
   height: 580px;
}

.sonic {
  top: 5em;
  transition: 0.5s;
  left: 40em;
  position: absolute;
  filter: drop-shadow(0 0 30px yellow);
  animation: heartbeat 5s infinite;
}

.knuckle {
  position: absolute;
  top: 22em;
  right: 10em;
  filter: drop-shadow(0 0 6px #699BFF);
  animation: runner 3s infinite linear;
}
.flim {
  position: absolute;
  top: 0px;
  left: 16px;
}

.tails {
  position: absolute;
  left: 60em;
  filter: drop-shadow(0 0 6px #699BFF);
  animation: float 2s ease-in-out infinite;
}
.person-1 {
  position: absolute;
  top: 32px;
  left: 56px;
}

.cream {
  top: 3em;
  transform: scaleX(-1);
  position: absolute;
  left: 15em;
  filter: drop-shadow(0 0 6px #699BFF);
  animation: float-1 2s ease-in-out infinite;
}
.person-2 {
  position: absolute;
  top: 32px;
  left: 52px;
}

.amy {
  top: 23em;
  position: absolute;
  left: 10em;
  filter: drop-shadow(0 0 6px #699BFF);
  animation: runner-1 5s infinite linear;
}
.person-3 {
  position: absolute;
  top: 20px;
  left: 42px;
}

.shadow {
  top: 20.5em;
  position: absolute;
  left: 45em;
  filter: drop-shadow(0 0 6px #699BFF);
  animation: think 3s infinite;
}
.person-4 {
  position: absolute;
  top: 16px;
  left: 0px;
}

.bat {
  top: 20em;
  position: absolute;
  left: 55em;
  filter: drop-shadow(0 0 6px #699BFF);
  animation: think 3s infinite;
}
.person-5 {
  position: absolute;
  top: 12px;
  left: 12px;
}

.eggman {
  top: 17em;
  position: absolute;
  transform-origin: bottom;
  left: 30em;
  filter: drop-shadow(0 0 6px #699BFF);
  animation: laugh 2.5s infinite;
}
.person-6 {
  position: absolute;
  top: 0px;
  left: 48px;
}

.ikeaw {
  z-index: -1;
  position: absolute;
  top: 18em;
  right: 10em;
  filter: drop-shadow(0 0 6px #699BFF);
  animation: runner 2s infinite linear alternate;
}
.pond {
  position: absolute;
  top: 0px;
  left: 56px;
}

.aut {
  position: absolute;
  top: 22em;
  right: 0em;
  filter: drop-shadow(0 0 6px #699BFF);
  animation: seek 4s infinite alternate;
}
.person-7 {
  position: absolute;
  top: 12px;
  left: 12px;
}

@keyframes runner {
  0% {transform: translateX(40em);}
  100% {transform: translateX(-100em);}
}

@keyframes runner-1 {
  0% {transform: translateX(-40em);}
  100% {transform: translateX(100em);}
}

@keyframes bg {
  from {background-position: 0% 0px;}
  to {background-position: 100% 0px;}
}

@keyframes seek {
  0% {transform: translateX(150%);}
  100% {transform: translateX(-150%);}
}

@keyframes float {
    0% {transform: translatey(20px);}
    50% {transform: translatey(-20px);}
    100% {transform: translatey(20px);}
}

@keyframes float-1 {
	0% {transform: translatey(0px) scaleX(-1);}
	50% {transform: translatey(-20px)scaleX(-1);}
	100% {transform: translatey(0px)scaleX(-1);}
}

@keyframes think {
  0% {transform: rotateY(0deg);}
  49% {transform: rotateY(0deg);}
  50% {transform: rotateY(180deg);}
  99% {transform: rotateY(180deg);}
  100% {transform: rotateY(0deg);}
}

@keyframes laugh {
  1% {transform: scaleY(1.04);}
  10% {transform: scaleY(1);}
  11% {transform: scaleY(1.04);}
  20% {transform: scaleY(1);}
  21% {transform: scaleY(1.04);}
  30% {transform: scaleY(1);}
  31% {transform: scaleY(1.04);}
  40% {transform: scaleY(1);}
  41% {transform: scaleY(1.04);}
  50% {transform: scaleY(1);}
  51% {transform: scaleY(1.04);}
  60% {transform: scaleY(1);}
  61% {transform: scaleY(1.04);}
  70% {transform: scaleY(1);}
  71% {transform: scaleY(1.04);}
  80% {transform: scaleY(1);}
  81% {transform: scaleY(1.04);}
  90% {transform: scaleY(1);}
  91% {transform: scaleY(1.04);}
  100% {transform: scaleY(1);}
}

@keyframes heartbeat {
  1% {transform: scale(1.3);}
  10% {transform: scale(1);}
  11% {transform: scale(1.1);}
  20% {transform: scale(1);}
  21% {transform: scale(1.3);}
  30% {transform: scale(1);}
  31% {transform: scale(1.1);}
  40% {transform: scale(1);}
  41% {transform: scale(1.3);}
  50% {transform: scale(1);}
  51% {transform: scale(1.1);}
  60% {transform: scale(1);}
  61% {transform: scale(1.3);}
  70% {transform: scale(1);}
  71% {transform: scale(1.1);}
  80% {transform: scale(1);}
  81% {transform: scale(1.3);}
  90% {transform: scale(1);}
  91% {transform: scale(1.1);}
  100% {transform: scale(1);}
}</style>
  <body>
    <div class = "container">
    <div class = "sonic"><img src="https://cdn.discordapp.com/attachments/798207225184124928/810089594653245470/Pjabont.png" width="150px" height="200px"></div>

</div>
  </body>
</html>