*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;

  background-color: #010a13;
  color: #abffe9;
  font-family: sans-serif;
}
canvas {
  display: block;
  touch-action: none;
}

.loadingclass {
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
}

body,
button,
a {
  cursor: url("images/cursor.png"), auto;
}

.test-overlay {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  position: absolute;
  top: 0;
  left: 0;

  input {
    user-select: all !important;
  }
}

.test-message {
  position: relative;
  padding: 1em 1em;
  font-size: 2em;
  color: #90d3fc;
  /* filter: blur(0.02em); */
  /* border: 4px solid #90d3fc; */
  border: 4px solid #42b7ff;
  background-color: #0c1f27;
  max-width: 90vw;
}

.test-message::after {
  position: absolute;
  top: -3px;
  right: -3px;
  bottom: -3px;
  left: -3px;
  border: 2px solid white;
  content: "";
  pointer-events: none;
}

.lines {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: radial-gradient(#02050650 1.2px, transparent 0);
  background-size: 3px 5px;
  background-position: -19px -19px;
  opacity: 1;
  filter: blur(0.5px);
  pointer-events: none;
}

.dots {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: radial-gradient(#02050650 1.01px, transparent 0);
  background-size: 3px 3px;
  background-position: -19px -19px;
  opacity: 1;
  filter: blur(0.5px);
  pointer-events: none;
}

input::selection {
  background-color: #2e7f9e;
}

input,
input:focus {
  border: none;
  outline: none;
  pointer-events: all !important;
}

input::placeholder {
  color: #c2e7fc;
}

button {
  padding: 0.5em 1em;
  background-color: #112d38;
  border: 1px solid #b8e3fc;
  color: #b8e3fc;

  &:hover {
    background-color: #194759;
  }

  &:active {
    background-color: #2e7f9e;
  }
}

.hidden {
  display: none;
  /* visibility: hidden; */
}