@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-size: 1.75rem;
  overflow: hidden;
  background-color: #8e8a95;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' viewBox='0 0 192 192'%3E%3Cpath fill='%23dcd9e0' fill-opacity='0.3' d='M192 15v2a11 11 0 0 0-11 11c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H145v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11 13 13 0 1 1 .02 26 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43a6.1 6.1 0 0 0-3.03 4.87V143h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 181 164a11 11 0 0 0 11 11v2a13 13 0 0 1-13-13 12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84a6.1 6.1 0 0 0-4.87-3.03H145v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 124 181a11 11 0 0 0-11 11h-2a13 13 0 0 1 13-13c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43a6.1 6.1 0 0 0 3.03-4.87V145h-35.02a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 107 124a11 11 0 0 0-22 0c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H49v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11A13 13 0 0 1 81 192h-2a11 11 0 0 0-11-11c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V145H11.98a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 0 1 0 177v-2a11 11 0 0 0 11-11c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H47v-35.02a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 28 109a13 13 0 1 1 0-26c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43A6.1 6.1 0 0 0 47 84.02V49H11.98a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 11 28 11 11 0 0 0 0 17v-2a13 13 0 0 1 13 13c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84A6.1 6.1 0 0 0 11.98 47H47V11.98a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 68 11 11 11 0 0 0 79 0h2a13 13 0 0 1-13 13 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43A6.1 6.1 0 0 0 49 11.98V47h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 85 68a11 11 0 0 0 22 0c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H143V11.98a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 124 13a13 13 0 0 1-13-13h2a11 11 0 0 0 11 11c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V47h35.02a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 179 28a13 13 0 0 1 13-13zM84.02 143a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 83 124a13 13 0 1 1 26 0c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84a6.1 6.1 0 0 0 4.87 3.03H143v-35.02a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 164 107a11 11 0 0 0 0-22c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V49h-35.02a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 1 1 83 68a12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84A6.1 6.1 0 0 0 84.02 49H49v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 28 85a11 11 0 0 0 0 22c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V143h35.02z'%3E%3C/path%3E%3C/svg%3E");
}
h1 {
  margin-top: 1.1%;
}
.container {
  margin: 2.5% auto;
  width: 500px;
  height: 600px;
}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
  z-index: 2;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 12.5px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active,
.dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}
/* fade in Slideshow */
.hide {
  opacity: 0;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*body parts */
.bodyParts {
  width: 100%;
  height: 400px;
}

.upper {
  display: flex;
  justify-content: center;
  position: relative;
}
#shirt {
  margin: -7.5% auto;
  z-index: 1;
}
#muscle {
  position: absolute;
  top: 12.5%;
  left: 9.5%;
  transform: rotate(-65deg);
  animation: muscleMove 3s 0s ease-in-out infinite;
}
@keyframes muscleMove {
  0% {
    top: 12.5%;
    left: 9.5%;
    transform: rotate(-65deg);
  }
  50% {
    top: 12.5%;
    left: 10.5%;
    transform: rotate(-40deg);
  }
}
#arm {
  position: absolute;
  top: 38%;
  left: 65%;
  animation: stretchArm 4s 1s ease infinite;
}
@keyframes stretchArm {
  0% {
    left: 65%;
  }
  50% {
    left: 67%;
    transform: rotate(-15deg);
  }
}
#leg1 {
  position: absolute;
  top: 65%;
  left: 45%;
}
#leg2 {
  position: absolute;
  top: 65%;
  left: 45%;
  animation: moveRight 15s 8s ease forwards;
}

@keyframes moveRight {
  0% {
    left: 45%;
    transform: rotate(0);
  }
  30% {
    top: 65%;
    left: 49.8%;
    transform: rotateY(180deg);
  }
  40% {
    top: 65%;
    left: 49.8%;
    transform: rotateY(180deg) rotateX(-25deg);
  }
  50% {
    top: 65%;
    left: 49.8%;
    transform: rotateY(180deg);
  }
  60% {
    top: 65%;
    left: 49.8%;
    transform: rotateY(180deg) rotateX(-25deg);
  }
  70% {
    top: 65%;
    left: 49.8%;
    transform: rotateY(180deg);
  }
  80% {
    top: 65%;
    left: 49.8%;
    transform: rotateY(180deg) rotateX(-25deg);
  }
  90% {
    top: 65%;
    left: 49.8%;
    transform: rotateY(180deg);
  }
  100% {
    top: 65%;
    left: 49.8%;
    transform: rotateY(180deg);
  }
}

#head {
  position: absolute;
  top: 23%;
  left: 46.75%;
  transition: rotate(0);
  opacity: 1;
  z-index: 2;
  /* animation: headRolling 4s 3s ease-out forwards; */
}
@keyframes headRolling {
  0% {
    top: 23%;
    left: 46.75%;
    transform: rotate(0);
  }
  50% {
    top: 32%;
    left: 46%;
    transform: rotateZ(350deg);
  }
  70% {
    top: 48.5%;
    left: 46.75%;
    transform: rotateZ(280deg);
    opacity: 1;
  }
  90% {
    top: 68.5%;
    left: 46%;
    transform: rotateZ(-80deg);
    opacity: 0.5;
  }
  100% {
    top: 88.5%;
    left: 46.75%;
    transform: rotateZ(80deg);
    opacity: 0;
  }
}
#oops {
  position: absolute;
  top: 30%;
  left: 40%;
  color: rgb(242, 184, 60);
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
  font-size: 2rem;
  font-weight: bold;
  z-index: 3;
  opacity: 0;
}

/* ball and weight */

#ball {
  position: absolute;
  opacity: 0;
  top: 45%;
  left: 87.5%;
  animation: throwBall 4s 1s ease-in-out infinite;
}

@keyframes throwBall {
  0% {
    top: 45%;
    left: 87.5%;
  }
  50% {
    top: 49%;
    left: 86.5%;
  }
  70% {
    top: -65%;
    left: 89%;
    transform: rotate(180deg);
  }
  100% {
    top: 45%;
    left: 87.5%;
  }
}
#weight {
  position: absolute;
  opacity: 0;
  top: -15px;
  left: 10px;
  transform: rotate(25deg);
  z-index: 4;
  animation: weightLifting 3s 0s ease-in-out infinite;
}
@keyframes weightLifting {
  0% {
    top: -15px;
    left: 10px;
    transform: rotate(25deg);
  }
  50% {
    top: -40px;
    left: 25px;
    transform: rotate(65deg);
  }
  70% {
    top: -45px;
    left: 25px;
    transform: rotate(425deg);
  }
  75% {
    top: -40px;
    left: 25px;
    transform: rotate(65deg);
  }
}
/* navigation */
.navigation1 {
  position: absolute;
  top: 20%;
}
.links1 {
  margin-top: -25px;
  margin-left: 20%;
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: left;
}

li {
  margin-bottom: 15px;
  list-style: none;
}

a {
  text-decoration: none;
  color: wheat;
  font-size: 2rem;
}
li:hover {
  transform: translateX(2.5px) translateY(2.5px);
}
a:hover {
  color: rgb(243, 198, 114);
}

.navigation2 {
  position: absolute;
  top: 20%;
  right: 2.5%;
}
.links2 {
  margin-top: -25px;
  width: 80%;
  display: flex;
  flex-direction: column;
  text-align: right;
}
/* Mobile Message */
.mobile-message {
  display: none;
}

/* Media Query: Mobile Devices */
@media screen and (max-width: 800px) {
  .mobile-message {
    position: absolute;
    height: 100vh;
    width: 100%;
    background-color: rgb(0, 0, 0);
    color: white;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 100;
  }
}