@font-face {
  font-family: "MyFont";
  src: url("../fonts/BeautifulFreakBold.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "MyFont", serif;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
}

.itim-regular {
  font-family: "Itim", cursive;
  font-weight: 400;
  font-style: normal;
}

.flex_center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex_between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fcfac2;
}

nav {
  background-image: url("../images/bg-nav.svg");
  background-position: bottom;
  background-repeat: repeat-x;
}

.social-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/bg-nav.svg");
  background-position: bottom;
  background-repeat: repeat-x;
  background-size: cover; /* atau sesuai kebutuhan */
  transform: scaleY(-1);
  z-index: -1;
}

.social-link {
  position: relative;

  display: flex;
  justify-content: center;
  align-items: center;

  background-image: url("../images/bg-social.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

  aspect-ratio: 1 / 1;
}

.social-link img {
  transition: 0.2s ease-in-out;
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -ms-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
}

.social-link:hover img {
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
}

/* hero */
.border-hero {
  background-image: url("../images/border-hero.svg");
  background-position: top;
  background-size: cover;
  background-repeat: repeat-x;
}

/* animation */
.rotate_img {
  animation: img_rotate 10s linear infinite;
}

@keyframes img_rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.float_animation {
  animation: float 5s ease-in-out infinite;
  -webkit-animation: float 5s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translatey(-5%);
    -webkit-transform: translatey(-5%);
    -moz-transform: translatey(-5%);
    -ms-transform: translatey(-5%);
    -o-transform: translatey(-5%);
  }
  50% {
    transform: translatey(5%);
    -webkit-transform: translatey(5%);
    -moz-transform: translatey(5%);
    -ms-transform: translatey(5%);
    -o-transform: translatey(5%);
  }
  100% {
    transform: translatey(-5%);
    -webkit-transform: translatey(-5%);
    -moz-transform: translatey(-5%);
    -ms-transform: translatey(-5%);
    -o-transform: translatey(-5%);
  }
}

.zoomIn_animation {
  animation: zoomIn_animation 10s ease-in-out infinite;
  -webkit-animation: zoomIn_animation 10s ease-in-out infinite;
}

@keyframes zoomIn_animation {
  0%,
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }
  50% {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
  }
}
 
.shake {
  animation: shake 0.7s linear infinite;
  -webkit-animation: shake 0.7s linear infinite;
}

@keyframes shake {
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}
  25% {
    transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
}
  50% {
    transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
}
  75% {
    transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
}
  100% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }
}


.falling_character {
  top: -100px;
  animation: fall 2s ease-in infinite;
  -webkit-animation: fall 2s ease-in infinite;
}

@keyframes fall {
  0% {
    top: -100px;
  }
  100% {
    top: 90%;
  }
}