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

body {
    background: #000;
    color: #fff;
    font-family: "Share Tech Mono", monospace;
    background-color: #041226;
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
    background-image: linear-gradient(rgb(0 95 215 / 10%) 2px, transparent 2px), 
	linear-gradient(90deg, rgb(0 95 215 / 10%) 2px, transparent 2px), 
	linear-gradient(rgb(4 85 175 / 10%) 1px, transparent 1px), 
	linear-gradient(90deg, rgb(4 85 175 / 10%) 1px, transparent 1px);
}


.judul {
  background: 50% 100%/50% 50% no-repeat radial-gradient(ellipse at bottom, #fff, transparent, transparent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding: 50px 0 20px 0; 
  text-align: center;
  font-size: 2vw; 
  font-family: "Orbitron";
  text-transform: uppercase; 
  -webkit-animation: reveal 3000ms ease-in-out forwards 200ms, glow 2500ms linear infinite 2000ms;
          animation: reveal 3000ms ease-in-out forwards 200ms, glow 2500ms linear infinite 2000ms;
}
@-webkit-keyframes reveal {
  80% {
    letter-spacing: 8px;
  }
  100% {
    background-size: 300% 300%;
  }
}
@keyframes reveal {
  80% {
    letter-spacing: 8px;
  }
  100% {
    background-size: 300% 300%;
  }
}
@-webkit-keyframes glow {
  40% {
    text-shadow: 0 0 8px #fff;
  }
}
@keyframes glow {
  40% {
    text-shadow: 0 0 8px #fff;
  }
}

a {
  position: absolute;
  top: 73%;
  left: 50%;
  padding: 20px 30px;
  overflow: hidden;
  font-family: "Orbitron";
  font-weight: 900;
  font-size: 30px;
  text-align: center;
  color: #0c70f7;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 5px;
  cursor: pointer;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -50%);
}
a::before {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: 50%;
  content: "";
  background: rgba(255, 255, 255, 0.05);
}
a span {
  position: absolute;
}
a span:nth-child(1) {
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, #0c002b, #1779ff);
  -webkit-animation: snake-animate1 2s linear infinite;
          animation: snake-animate1 2s linear infinite;
}
a span:nth-child(2) {
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(to top, #0c002b, #1779ff);
  -webkit-animation: snake-animate2 2s linear infinite;
          animation: snake-animate2 2s linear infinite;
}
a span:nth-child(3) {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(to left, #0c002b, #1779ff);
  -webkit-animation: snake-animate3 2s linear infinite;
          animation: snake-animate3 2s linear infinite;
}
a span:nth-child(4) {
  top: 0;
  right: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(to bottom, #0c002b, #1779ff);
  -webkit-animation: snake-animate4 2s linear infinite;
          animation: snake-animate4 2s linear infinite;
}

@-webkit-keyframes snake-animate1 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes snake-animate1 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
@-webkit-keyframes snake-animate2 {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes snake-animate2 {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(-100%);
  }
}
@-webkit-keyframes snake-animate3 {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes snake-animate3 {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@-webkit-keyframes snake-animate4 {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}
@keyframes snake-animate4 {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

/* Loading Circle */

.circle {
	background-color: rgba(0,0,0,0);
	border:5px solid rgba(0,183,229,0.9);
	opacity:.9;
	border-right:5px solid rgba(0,0,0,0);
	border-left:5px solid rgba(0,0,0,0);
	border-radius:50px;
	box-shadow: 0 0 35px #2187e7;
	width:50px;
	height:50px;
	margin:0 auto;
	-moz-animation:spinPulse 1s infinite ease-in-out;
	-webkit-animation:spinPulse 1s infinite linear;
}
.circle1 {
	background-color: rgba(0,0,0,0);
	border:5px solid rgba(0,183,229,0.9);
	opacity:.9;
	border-left:5px solid rgba(0,0,0,0);
	border-right:5px solid rgba(0,0,0,0);
	border-radius:50px;
	box-shadow: 0 0 15px #2187e7; 
	width:30px;
	height:30px;
	margin:0 auto;
	position:relative;
	top:-50px;
	-moz-animation:spinoffPulse 1s infinite linear;
	-webkit-animation:spinoffPulse 1s infinite linear;
}

@-moz-keyframes spinPulse {
	0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;}
	50% { -moz-transform:rotate(145deg); opacity:1; }
	100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spinoffPulse {
	0% { -moz-transform:rotate(0deg); }
	100% { -moz-transform:rotate(360deg);  }
}
@-webkit-keyframes spinPulse {
	0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
	50% { -webkit-transform:rotate(145deg); opacity:1;}
	100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spinoffPulse {
	0% { -webkit-transform:rotate(0deg); }
	100% { -webkit-transform:rotate(360deg); }
}