index.css

:root {
  --body-color: #5ab29d;
  --body-shadow-color: #49887b;
  --screen-color: #cbffe1;
  --arms-color: #59a5b3;
  --border-black:2px black solid;
}

.container {
  display: flex;
  justify-content: center;
  margin-top: 5rem;
}

p {
  font-family: "Courier New", Courier, monospace;
  font-size: 3rem;
}

.bmo-container {
  width: 600px;
  height: 600px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.bmo-container .background {
  width: 600px;
  height: 600px;
  background: linear-gradient(45deg, rgb(17, 120, 125), rgb(116, 14, 45), rgb(7, 67, 57), black);
  background-size: 400% 400%;
  animation: backgrad 4s linear infinite;
}
@keyframes backgrad {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
.bmo-container .bmo-skate-container {
  position: absolute;
  transform: rotate(70deg) translateX(370px) translateY(-20px);
}
.bmo-container .bmo-skate-container .skate-back {
  position: absolute;
  width: 120px;
  height: 250px;
  background: #fa9308;
  border-radius: 4rem;
  border: var(--border-black);
}
.bmo-container .bmo-skate-container .skate-front {
  position: relative;
  width: 120px;
  height: 250px;
  background: #ffb04e;
  border-radius: 4rem;
  border: var(--border-black);
  transform: translateX(5px) translateY(7px);
}
.bmo-container .bmo-skate-container .truck-front {
  transform: translateY(-200px) translateX(0px);
  display: inline-flex;
}
.bmo-container .bmo-skate-container .truck-front .whell-front-right {
  width: 25px;
  height: 40px;
  background: white;
  border: var(--border-black);
  border-bottom-right-radius: 50%;
  border-top-right-radius: 50%;
  transform: translateX(123px) translateY(0px);
}
.bmo-container .bmo-skate-container .truck-front .whell-front-right .whell-front-right-side1 {
  width: 17px;
  height: 40px;
  background: lightgrey;
  border: var(--border-black);
  border-radius: 50%;
  transform: translateX(-15px) translateY(-2px);
}
.bmo-container .bmo-skate-container .truck-front .whell-front-right .whell-front-right-side2 {
  width: 10px;
  height: 25px;
  background: lightgrey;
  border: var(--border-black);
  border-radius: 50%;
  transform: translateX(-12px) translateY(-38px);
}
.bmo-container .bmo-skate-container .truck-front .truck-parts .truck-2 {
  width: 55px;
  height: 20px;
  background: white;
  border-bottom-right-radius: 0.7rem;
  border-top-right-radius: 0.7rem;
  border: var(--border-black);
  transform: translateX(15px) translateY(-5px);
}
.bmo-container .bmo-skate-container .truck-front .truck-parts .truck-1 {
  width: 90px;
  height: 10px;
  background: #d94e16;
  border: var(--border-black);
  border-radius: 1rem;
  transform: translateX(0px) translateY(15px);
}
.bmo-container .bmo-skate-container .truck-front .truck-parts .truck-3 {
  width: 50px;
  height: 22px;
  background: #d94e16;
  border: var(--border-black);
  border-bottom-right-radius: 0.7rem;
  border-top-right-radius: 0.7rem;
  transform: translateX(15px) translateY(-30px);
}
.bmo-container .bmo-skate-container .truck-front .truck-parts .truck-4 {
  width: 10px;
  height: 22px;
  background: white;
  border: var(--border-black);
  border-radius: 50%;
  transform: translateX(10px) translateY(-56px);
}
.bmo-container .bmo-skate-container .truck-front .truck-parts .truck-5 {
  width: 20px;
  height: 10px;
  background: #d94e16;
  border: var(--border-black);
  border-radius: 0.5rem;
  transform: translateX(-5px) translateY(-75px);
}
.bmo-container .bmo-skate-container .truck-front .whell-front-left {
  width: 25px;
  height: 40px;
  background: white;
  border: var(--border-black);
  border-bottom-right-radius: 50%;
  border-top-right-radius: 50%;
  transform: translateX(-115px) translateY(0px);
}
.bmo-container .bmo-skate-container .truck-front .whell-front-left .whell-front-left-side1 {
  width: 17px;
  height: 40px;
  background: lightgrey;
  border: var(--border-black);
  border-radius: 50%;
  transform: translateX(-15px) translateY(-2px);
}
.bmo-container .bmo-skate-container .truck-front .whell-front-left .whell-front-left-side2 {
  width: 10px;
  height: 25px;
  background: lightgrey;
  border: var(--border-black);
  border-radius: 50%;
  transform: translateX(-12px) translateY(-38px);
}
.bmo-container .bmo-skate-container .truck-back {
  transform: translateY(-80px) translateX(-150px);
  display: inline-flex;
}
.bmo-container .bmo-skate-container .truck-back .whell-back-right {
  width: 25px;
  height: 40px;
  background: white;
  border: var(--border-black);
  border-bottom-right-radius: 50%;
  border-top-right-radius: 50%;
  transform: translateX(123px) translateY(0px);
}
.bmo-container .bmo-skate-container .truck-back .whell-back-right .whell-back-right-side1 {
  width: 17px;
  height: 40px;
  background: lightgrey;
  border: var(--border-black);
  border-radius: 50%;
  transform: translateX(-15px) translateY(-2px);
}
.bmo-container .bmo-skate-container .truck-back .whell-back-right .whell-back-right-side2 {
  width: 10px;
  height: 25px;
  background: lightgrey;
  border: var(--border-black);
  border-radius: 50%;
  transform: translateX(-12px) translateY(-38px);
}
.bmo-container .bmo-skate-container .truck-back .truck-parts .truck-2 {
  width: 55px;
  height: 20px;
  background: white;
  border-bottom-right-radius: 0.7rem;
  border-top-right-radius: 0.7rem;
  border: var(--border-black);
  transform: translateX(15px) translateY(-5px);
}
.bmo-container .bmo-skate-container .truck-back .truck-parts .truck-1 {
  width: 90px;
  height: 10px;
  background: #d94e16;
  border: var(--border-black);
  border-radius: 1rem;
  transform: translateX(0px) translateY(15px);
}
.bmo-container .bmo-skate-container .truck-back .truck-parts .truck-3 {
  width: 50px;
  height: 22px;
  background: #d94e16;
  border: var(--border-black);
  border-bottom-right-radius: 0.7rem;
  border-top-right-radius: 0.7rem;
  transform: translateX(15px) translateY(-30px);
}
.bmo-container .bmo-skate-container .truck-back .truck-parts .truck-4 {
  width: 10px;
  height: 22px;
  background: white;
  border: var(--border-black);
  border-radius: 50%;
  transform: translateX(10px) translateY(-56px);
}
.bmo-container .bmo-skate-container .truck-back .truck-parts .truck-5 {
  width: 20px;
  height: 10px;
  background: #d94e16;
  border: var(--border-black);
  border-radius: 0.5rem;
  transform: translateX(-5px) translateY(-75px);
}
.bmo-container .bmo-skate-container .truck-back .whell-back-left {
  width: 25px;
  height: 40px;
  background: white;
  border: var(--border-black);
  border-bottom-right-radius: 50%;
  border-top-right-radius: 50%;
  transform: translateX(-115px) translateY(0px);
}
.bmo-container .bmo-skate-container .truck-back .whell-back-left .whell-back-left-side1 {
  width: 17px;
  height: 40px;
  background: lightgrey;
  border: var(--border-black);
  border-radius: 50%;
  transform: translateX(-15px) translateY(-2px);
}
.bmo-container .bmo-skate-container .truck-back .whell-back-left .whell-back-left-side2 {
  width: 10px;
  height: 25px;
  background: lightgrey;
  border: var(--border-black);
  border-radius: 50%;
  transform: translateX(-12px) translateY(-38px);
}
.bmo-container .bmo-skate-container .fingers {
  position: absolute;
  transform: translateY(-235px) translateX(115px);
}
.bmo-container .bmo-skate-container .fingers .finger1 {
  width: 20px;
  height: 8px;
  background: var(--arms-color);
  border: var(--border-black);
  border-bottom-left-radius: 50%;
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
  transform: translateY(6px);
}
.bmo-container .bmo-skate-container .fingers .finger2 {
  width: 22px;
  height: 8px;
  background: var(--arms-color);
  border: var(--border-black);
  border-bottom-left-radius: 50%;
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
  transform: translateY(3px);
}
.bmo-container .bmo-skate-container .fingers .finger3 {
  width: 18px;
  height: 8px;
  background: var(--arms-color);
  border: var(--border-black);
  border-bottom-left-radius: 50%;
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
.bmo-container .bmo-body-container {
  display: flex;
  align-items: center;
  perspective-origin: 30% 40%;
  perspective: 600px;
  transform: translateX(50px) translateY(-547px);
}
.bmo-container .bmo-body-container .body-back-container {
  width: 150px;
  height: 365px;
  background: var(--body-shadow-color);
  border: var(--border-black);
  border-radius: 1.5rem;
  transform: rotateY(-45deg);
}
.bmo-container .bmo-body-container .body-back-container .speaker-container p.p1 {
  transform: translateY(-40px) translateX(30px);
}
.bmo-container .bmo-body-container .body-back-container .speaker-container p.p2 {
  transform: translateY(-120px) translateX(15px);
}
.bmo-container .bmo-body-container .body-back-container .speaker-container p.p3 {
  transform: translateY(-200px) translateX(30px);
}
.bmo-container .bmo-body-container .body-back-container .bmo-letters-container p {
  font-family: "Konkhmer Sleokchher", cursive;
  font-size: 4rem;
  transform: rotate(90deg) translateX(-200px) translateY(10px);
}
.bmo-container .bmo-body-container .body-back-container .bmo-o {
  border-radius: 50%;
  width: 2.5rem;
  height: 2rem;
  background: black;
  transform: translateY(-285px) translateX(50px);
}
.bmo-container .bmo-body-container .body-front-container {
  width: 250px;
  height: 400px;
  background: var(--body-color);
  border: 2px black solid;
  border-radius: 1.5rem;
  margin-left: 5rem;
  transform: translateX(-125px) translateY(5px);
}
.bmo-container .bmo-body-container .body-front-container .screen-container {
  width: 190px;
  height: 170px;
  background: var(--screen-color);
  border: 2px black solid;
  border-radius: 1rem;
  margin-top: 1.5rem;
  transform: translateX(28px);
}
.bmo-container .bmo-body-container .body-front-container .screen-container .bright-screen {
  width: 190px;
  height: 170px;
  background: #bdf7da;
  border-radius: 1rem;
  transform: translateX(0px);
  animation: bright 0.5s linear infinite;
}
@keyframes bright {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.bmo-container .bmo-body-container .body-front-container .screen-container .left-eye {
  width: 12px;
  height: 18px;
  background: black;
  border-radius: 1rem;
  transform: translateX(40px) translateY(-120px);
}
.bmo-container .bmo-body-container .body-front-container .screen-container .right-eye {
  width: 12px;
  height: 18px;
  background: black;
  border-radius: 1rem;
  transform: translateX(140px) translateY(-138px);
}
.bmo-container .bmo-body-container .body-front-container .screen-container .mouth-container {
  transform: translateX(66px) translateY(-120px);
}
.bmo-container .bmo-body-container .body-front-container .screen-container .mouth-container .mouth {
  position: absolute;
  width: 60px;
  height: 25px;
  background: #218937;
  border: var(--border-black);
  border-radius: 1rem;
  border-bottom-left-radius: 4.5rem;
  border-bottom-right-radius: 4.5rem;
}
.bmo-container .bmo-body-container .body-front-container .screen-container .mouth-container .teeth {
  position: relative;
  width: 30px;
  height: 7px;
  background: white;
  border: var(--border-black);
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
  transform: translateX(15px);
}
.bmo-container .bmo-body-container .body-front-container .screen-container .mouth-container .tongue {
  position: relative;
  width: 40px;
  height: 9px;
  background: #45ca5f;
  border-top: 2px solid #4dec70;
  border-radius: 50%;
  transform: translateX(12px) translateY(5px);
}
.bmo-container .bmo-body-container .body-front-container .memory-card {
  width: 110px;
  height: 10px;
  background: #09312a;
  border: 2px black solid;
  transform: translateX(40px) translateY(15px);
}
.bmo-container .bmo-body-container .body-front-container .memory-card .blue-button {
  width: 12px;
  height: 12px;
  background: #0f06b1;
  border: var(--border-black);
  border-radius: 50%;
  transform: translateX(140px) translateY(-3px);
}
.bmo-container .bmo-body-container .d-pad {
  transform: translateX(90px);
}
.bmo-container .bmo-body-container .d-pad .d-pad-h-back {
  width: 60px;
  height: 18px;
  background: #fed81f;
  border: var(--border-black);
  border-radius: 0.2rem;
  transform: translateX(-50px) translateY(62px);
}
.bmo-container .bmo-body-container .d-pad .d-pad-v-back {
  width: 18px;
  height: 60px;
  background: #fed81f;
  border: var(--border-black);
  border-radius: 0.2rem;
  transform: translateX(-30px) translateY(20px);
}
.bmo-container .bmo-body-container .d-pad .d-pad-center-back {
  width: 60px;
  height: 18px;
  background: #fed81f;
  border-radius: 0.2rem;
  transform: translateY(-22px) translateX(-48px);
}
.bmo-container .bmo-body-container .d-pad .d-pad-h {
  width: 60px;
  height: 18px;
  background: #fed81f;
  border: var(--border-black);
  border-radius: 0.2rem;
  transform: translateX(-45px) translateY(-42px);
}
.bmo-container .bmo-body-container .d-pad .d-pad-v {
  width: 18px;
  height: 60px;
  background: #fed81f;
  border: var(--border-black);
  border-radius: 0.2rem;
  transform: translateX(-25px) translateY(-84px);
}
.bmo-container .bmo-body-container .d-pad .d-pad-center {
  width: 60px;
  height: 18px;
  background: #fed81f;
  border-radius: 0.2rem;
  transform: translateY(-126px) translateX(-43px);
}
.bmo-container .bmo-body-container .buttons .triangle-button {
  transform: translateY(-148px) translateX(100px) scale(80%);
}
.bmo-container .bmo-body-container .buttons .triangle-button .triangle-back {
  width: 5px;
  height: 31px;
  background: #05d9f0;
  border: var(--border-black);
  transform: skew(-33deg) translateY(-33px) translateX(-6px);
}
.bmo-container .bmo-body-container .buttons .triangle-button .triangle-border {
  width: 0;
  height: 0;
  border-left: 23px solid transparent;
  border-right: 23px solid transparent;
  border-bottom: 35px solid black;
  border-radius: 0.2rem;
  transform: translateY(-68px) translateX(12px);
}
.bmo-container .bmo-body-container .buttons .triangle-button .triangle {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 30px solid #05d9f0;
  border-radius: 0.2rem;
  transform: translateY(-100px) translateX(15px);
}
.bmo-container .bmo-body-container .buttons .green-button {
  transform: translateY(-115px) translateX(80px);
}
.bmo-container .bmo-body-container .buttons .green-button .green-button-back {
  width: 25px;
  height: 30px;
  background: #15fb2f;
  border-radius: 50%;
  border: var(--border-black);
}
.bmo-container .bmo-body-container .buttons .green-button .green-button-front {
  width: 25px;
  height: 30px;
  background: #15fb2f;
  border-radius: 50%;
  border: var(--border-black);
  transform: translateY(-34px) translateX(5px);
}
.bmo-container .bmo-body-container .buttons .red-button {
  transform: translateY(-130px) translateX(40px);
}
.bmo-container .bmo-body-container .buttons .red-button .red-button-back {
  width: 35px;
  height: 40px;
  background: #ff0058;
  border-radius: 50%;
  border: var(--border-black);
}
.bmo-container .bmo-body-container .buttons .red-button .red-button-front {
  width: 35px;
  height: 40px;
  background: #ff0058;
  border-radius: 50%;
  border: var(--border-black);
  transform: translateY(-44px) translateX(7px);
}
.bmo-container .bmo-body-container .buttons .blue-buttons {
  display: inline-flex;
  gap: 20px;
  transform: translateY(-190px) translateX(-100px);
}
.bmo-container .bmo-body-container .buttons .blue-buttons .blue-button-left {
  width: 45px;
  height: 10px;
  background: #0f06b1;
  border-radius: 2rem;
  border: var(--border-black);
}
.bmo-container .bmo-body-container .buttons .blue-buttons .blue-button-right {
  width: 45px;
  height: 10px;
  background: #0f06b1;
  border-radius: 2rem;
  border: var(--border-black);
}
.bmo-container .arm-container {
  position: absolute;
  transform: translateX(-130px) translateY(340px);
}
.bmo-container .arm-container .arm-top {
  width: 15px;
  height: 70px;
  background: var(--arms-color);
  border: var(--border-black);
  border-top-right-radius: 50%;
  border-top-left-radius: 70%;
  border-bottom: none;
  transform: rotate(18deg);
}
.bmo-container .arm-container .arm-bottom {
  width: 15px;
  height: 70px;
  background: var(--arms-color);
  border: var(--border-black);
  border-bottom-right-radius: 2rem;
  border-bottom-left-radius: 2rem;
  border-top: none;
  transform: rotate(10deg) translateX(-17px) translateY(-2px);
}
.bmo-container .arm-container .hand {
  width: 5px;
  height: 13px;
  background: var(--arms-color);
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border: var(--border-black);
  border-top: none;
  transform: rotate(6deg) translateX(-19px) translateY(-16px);
}
.bmo-container .legs-container {
  position: absolute;
  transform: translateY(342px) translateX(115px);
}
.bmo-container .legs-container .left {
  transform: translateY(116px) translateX(-160px);
}
.bmo-container .legs-container .left .left-leg {
  width: 20px;
  height: 90px;
  background: #4c7a86;
  border: var(--border-black);
  border-bottom: none;
  transform: translateY(2px);
}
.bmo-container .legs-container .left .left-foot {
  width: 40px;
  height: 20px;
  background: #4c7a86;
  border: var(--border-black);
  border-radius: 0 2rem 2rem 1rem;
}
.bmo-container .legs-container .right .right-leg {
  width: 20px;
  height: 90px;
  background: #4c7a86;
  border: var(--border-black);
  border-bottom: none;
  transform: translateY(2px);
}
.bmo-container .legs-container .right .right-foot {
  width: 40px;
  height: 20px;
  background: #4c7a86;
  border: var(--border-black);
  border-radius: 0 2rem 2rem 1rem;
}

@keyfames backgrad {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/*# sourceMappingURL=index.css.map */