@font-face {
  font-family: "carumba";
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/CarumbaPlain.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "comic";
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/Comic.acf4b7e829f1fcdc78d4.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "comic2";
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/comic2.woff2") format("truetype");
  font-display: swap;
}

html {
  scroll-behavior: smooth;
}

.carumba_font {
  font-family: "carumba", sans-serif;
}

.comic_font {
  font-family: "comic2", sans-serif;
}

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

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

.mirrorY {
  transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
  -moz-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  -o-transform: scaleY(-1);
}

.mirrorX {
  transform: scaleY(-1);
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  -o-transform: scaleX(-1);
}

body {
  font-family: "comic2", sans-serif;
}

.bold_shadow {
  text-shadow: 0 5px 3px #ebba30;
}

.box_shadow {
  box-shadow: 0 5px 0 black;
}

.thin_stroke{
  text-shadow: 0 2px 0 black;
}

li {
  list-style: none;
}

/* how */
.btns .btnHow {
  transition: 0.2s ease-in;
  -webkit-transition: 0.2s ease-in;
  -moz-transition: 0.2s ease-in;
  -ms-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
}

.btns .btnHow:hover {
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
}


/* memes */
/* image slider */
.wrapper{ 
  width: 100%;
  max-width: 2526px;
  margin: auto;
  height: 300px;  
  overflow: hidden;
  position: relative;   
}

.item{
  width: 300px;
  height: 100%; 
  overflow: hidden;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  position: absolute;
  left: calc(300px * 8);
  animation: scrollLeft 30s linear infinite;
  -webkit-animation: scrollLeft 30s linear infinite;

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

.wrapper .item::after{
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;

  background-image: url('../images/memeborder.svg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 10;
  pointer-events: none; 
}

@keyframes scrollLeft {
  to{
      left: -300px;
  }
}







/* animation */
.float_animation {
  animation: float 3s ease-in-out infinite;
}

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


.stars-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.star {
  position: absolute;
  opacity: 0;
  animation: twinkle 2s infinite alternate;
}

/* Animasi opacity */
@keyframes twinkle {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}