@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

.splide__slide {
  color: #FFD700 !important;
}

.w-7 {
  width: 49%;
}

.button, button::after {
  width: 410px;
  height: 50px;
  font-size: 30px;
  font-family: 'Bebas Neue', cursive !important;
  background: linear-gradient(45deg, transparent 5%, #FFD700 5%);
  border: 0;
  color: #000000;
  letter-spacing: 3px;
  line-height: 40px;
  box-shadow: 6px 0px 0px #000000;
  outline: transparent;
  position: relative;
}

.ini {
  font-family: 'Bebas Neue', cursive;
}

.btn-info:hover {
  color: #000000 !important;
  background: linear-gradient(45deg, transparent 5%, #FFD700 5%);
}

.button::after {
  --slice-0: inset(50% 50% 50% 50%);
  --slice-1: inset(80% -6px 0 0);
  --slice-2: inset(50% -6px 30% 0);
  --slice-3: inset(10% -6px 85% 0);
  --slice-4: inset(40% -6px 43% 0);
  --slice-5: inset(80% -6px 5% 0);

  content: 'GABUNG SEKARANG';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 3%, #FFD700 3%, #FFD700 5%, #d4af37 5%);
  text-shadow: -3px -3px 0px #000000, 3px 3px 0px #000000;
  clip-path: var(--slice-0);
}

.button:hover::after {
  animation: 1s glitch;
  animation-timing-function: steps(2, end);
}

@keyframes glitch {
  0% { clip-path: var(--slice-1); transform: translate(-20px, -10px); }
  10% { clip-path: var(--slice-3); transform: translate(10px, 10px); }
  20% { clip-path: var(--slice-1); transform: translate(-10px, 10px); }
  30% { clip-path: var(--slice-3); transform: translate(0px, 5px); }
  40% { clip-path: var(--slice-2); transform: translate(-5px, 0px); }
  50% { clip-path: var(--slice-3); transform: translate(5px, 0px); }
  60% { clip-path: var(--slice-4); transform: translate(5px, 10px); }
  70% { clip-path: var(--slice-2); transform: translate(-10px, 10px); }
  80% { clip-path: var(--slice-5); transform: translate(20px, -10px); }
  90% { clip-path: var(--slice-1); transform: translate(-10px, 0px); }
  100% { clip-path: var(--slice-1); transform: translate(0); }
}

@media only screen and (max-width: 600px) {
  .button {
    width: 250px;
    height: 62px;
    font-size: 20px;
    font-family: 'Bebas Neue', cursive;
    background: linear-gradient(45deg, transparent 5%, #FFD700 5%);
    border: 0;
    color: #000000;
    letter-spacing: 3px;
    line-height: 58px;
    box-shadow: 6px 0px 0px #000000;
    outline: transparent;
    position: relative;
  }

  .w-100 {
    width: 100% !important;
    height: 150px;
  }

  .btn-info:hover {
    color: #000000 !important;
    background: linear-gradient(45deg, transparent 5%, #FFD700 5%);
  }
}

@keyframes gradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes scaleIn {
  from { transform: scale(.5, .5); opacity: .5; }
  to   { transform: scale(2.5, 2.5); opacity: 0; }
}

.size180 {
  width: 180px;
  height: 180px;
}