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

.splide__slide{
	color: #fff !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%, #2a5aaf 5%);
border: 0;
color: #fff;
letter-spacing: 3px;
line-height: 40px;
box-shadow: 6px 0px 0px #000000;
outline: transparent;
position: relative;
}

.ini {
	font-family: 'Bebas Neue', cursive;
}
.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%, #00E6F6 3%, #00E6F6 5%, #FF013C 5%);
text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6;
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%, #2a5aaf 5%);
border: 0;
color: #fff;
letter-spacing: 3px;
line-height: 58px;
box-shadow: 6px 0px 0px #000000;
outline: transparent;
position: relative;

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




@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;
  }