/*------------------------------------------GENERAL------------------------------------------*/
form, .username_input_group, .password_input_group, .username_input, .username_label, .password_input, .password_label{
/*  cursor: pointer;*/
}

* {

}

body {
  cursor: none;
  margin: 0;
  padding: 0;
  font-family: Courier;
  background: linear-gradient(150deg, hsla(0, 0%, 0%, 1) 0%, hsla(226, 21%, 25%, 1) 50%, hsla(192, 6%, 6%, 1) 100%);
  overflow: hidden;
}


#main-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
}


#welcome {
  color: white;
  text-shadow: 10px 10px 10px black;
  font-size: 140px;
  margin-top: 10%;
  z-index: 1;
}

#quote {
  position: absolute;
  margin-top: 5px;
  margin-left: 5px;
  width: 55%;
  font-weight: bold;
  font-size: 20px;
  z-index: 1;
  color: white;
  text-shadow: 0px 2px 4px lightblue;
  animation: quote-onLoad  0.4s;
}

@keyframes quote-onLoad {
  from {opacity: 0.2; font-size: 17px; width: 47%;}
  to {opacity: 1; font-size: 20px; width: 55%;}
}

/*------------------------------------------FORM------------------------------------------*/
form {
  margin-top:6%;
  width: 35%;
  height: auto;
}

.username_input_group, .password_input_group {
  position: relative;
  float: left;
  width: 49%;
}

.password_input_group {
  float: right;
}

.username_input, .password_input {
  width: 100%;
  margin-top: 4%;
  border: 0;
  border-bottom: 2px solid #9b9b9b;
  outline: 0;
  font-size: 20px;
  color: white;
  z-index: 2;
  padding: 7px 0;
  background: transparent;
  transition: border-color 0.2s;
}
.username_input::placeholder, .password_input::placeholder {
  color: transparent;
}

.username_label, .password_label {
  position: absolute;
  top: 0;
  display: block;
  font-size: 20px;
  color: #9b9b9b;
  z-index: 1;
  transition: 0.2s;
  pointer-events: none;
}
/* for some reson only the username lable z index is above the input form... idk why */
.username_label{
/*  z-index: -1;*/
}

.username_input:placeholder-shown ~ .username_label, .password_input:placeholder-shown ~ .password_label {
  font-size: 25px;
  top: 17px;
}

.username_input:focus, .password_input:focus {
  padding-bottom: 6px;
  font-weight: bold;
  font-size: 20px;
  border-width: 3px;
  border-image: linear-gradient(90deg, hsla(243, 100%, 43%, 1) 0%, hsla(185, 100%, 50%, 1) 100%);
  border-image-slice: 1;
}
.username_input:focus ~ .username_label, .password_input:focus ~ .password_label {
  position: absolute;
  top: 0;
  display: block;
  font-size: 16px;
  color: #0670EC;
  font-weight: bold;
  transition: 0.2s;
}

/* reset input */
.username_input:required, .username_input:invalid, .passwords_input:required, .password_input:invalid {
  box-shadow: none;
}
/*------------------------------------------SUBMIT------------------------------------------*/
.glow-on-hover {
  width: 35%;
  margin-top: 5%;
  margin-left: 32.5%;
  position: relative;
  height: 50px;
  font-size: 20px;
  letter-spacing: 3px;
  border: none;
  outline: none;
  color: #fff;
  background: #111;
  cursor: pointer;
  z-index: 0;
  border-radius: 10px;
  transition:  0.2s;
}

.glow-on-hover:hover{
  transform: scale(1.12);
}

.glow-on-hover:before {
  content: "";
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  border-radius: 10px;
}

.glow-on-hover:active {
  color: #000;
}

.glow-on-hover:active:after {
  background: transparent;
}

.glow-on-hover:hover:before {
  opacity: 1;
}

.glow-on-hover:after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #111;
  left: 0;
  top: 0;
  border-radius: 10px;
}

@keyframes glowing {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 100%;
  }
  100% {
    background-position: 0 0;
  }
}
/*------------------------------------------IPS------------------------------------------*/
#ip-space, #mouse-space {
  position: absolute;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.single-ip {
  position: absolute;
  font-size: 20px;  
  font-weight: bold;
/*  color: #A5EAFC;*/
  color: #63C8FF;
  text-shadow: 0.7px 0.7px black;
  filter: blur(1.4px);
  z-index: -2;
}
/*------------------------------------------MOUSE------------------------------------------*/
.mouse-dot {
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  background: radial-gradient(circle, hsla(181, 100%, 74%, 1) 0%, hsla(196, 100%, 87%, 1) 100%);
/*  box-shadow: 0px 0px 1px 1px white;*/
  filter: blur(0.2px);
  pointer-events: none;
}

/*------------------------------------------TRADE-MARK------------------------------------------*/
#trade-mark {
  position: absolute;
  bottom: 0;
  left: 0;
  margin-bottom: 5px;
  margin-left: 5px;
  color: #fff;
  font-size: 20px;
  word-spacing: -4px;
  text-decoration: none;
  text-shadow: 0 0 1px #fff, 0 0 1.3px #fff, 0 0 2px #fff, 0 0 4px #0af, 0 0 6px #0af, 0 0 8px #0af, 0 0 10px #0af, 0 0 12px #0af;
  animation: flicker 1.5s infinite alternate;
}

@keyframes flicker {
  /*showing the light*/
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow: 0 0 1px #fff, 0 0 1.3px #fff, 0 0 2px #fff, 0 0 4px #0af, 0 0 6px #0af, 0 0 8px #0af, 0 0 10px #0af, 0 0 12px #0af;
  }
  /* removing for split second */
  20%, 24%, 55% {        
    text-shadow: none;
  }    
}