@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital@1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&display=swap');

* {
  padding: 0;
  margin: 0;
}

body {
  text-align: center;
  font-family: Nunito;
    background-color:rgb(10, 10, 10);
    overflow: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    width:100%;
    height:100%;
}

@keyframes rainbow_animation {
  0%,100% {
      background-position: 0 0;
  }

  50% {
      background-position: 100% 0;
  }
}

.rainbow_text_animated {
  background: linear-gradient(to right, #917dd3, #af055a , #eb055a, #9b055a, #917dd3);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow_animation 2s ease-in-out infinite;
  background-size: 400% 100%;
}

.center {
  margin-top: 40vh;
  padding-bottom: 50px;
}

h1 {
  text-align: center;
  font-weight: 800;
  font-size: 45;
  display: inline
}

h3 {
  font-size: 16;
  font-weight: 400;
  color: #fdfff5;
}

.bar {
		padding: 0;
		margin: 0;
		background: #1e5799;
		background: -moz-linear-gradient(left,  #1e5799 0%, #f300ff 50%, #e0ff00 100%);
		background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1e5799), color-stop(50%,#f300ff), color-stop(100%,#e0ff00));
		background: -webkit-linear-gradient(left,  #1e5799 0%,#f300ff 50%,#e0ff00 100%);
		background: -o-linear-gradient(left,  #1e5799 0%,#f300ff 50%,#e0ff00 100%);
		background: -ms-linear-gradient(left,  #1e5799 0%,#f300ff 50%,#e0ff00 100%);
		background: linear-gradient(to right,  #1e5799 0%,#f300ff 50%,#e0ff00 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#e0ff00',GradientType=1 );
		height: 5px;
		border-bottom: 1px solid #000000;
    animation: rainbow_animation 6s ease-in-out infinite;
    background-size: 400% 100%;
}

@keyframes button_hover_animation {
  50% {
      background: rgb(10, 10, 10);
  }
}

.btn:hover {
  font-family: Urbanist;
  
  color: rgb(255, 255, 255);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 16;
  margin-top: 10px;
  text-decoration: none;
  border: 0.5px solid white;
  animation: button_hover_animation 0.8s ease-out reverse;
}

.btn {
  font-family: Urbanist;
  background: #eb055a;
  color: #000;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 16;
  margin-top: 10px;
  text-decoration: none;
}

.item {
    height: 219px;
    width: 219px;
    position: absolute;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
}