/* Default HTML Elements */
body {
  background-color: rgb(38, 38, 47);
  overflow: hidden;
}

h1 {
  font-family: 'Space Mono', monospace;
  font-size: 30px;
}

p {
  padding: 5px;
  font-family: 'lucidia console', monospace;
  font-size: 15px;
}

/* Screen */
.screen {
  width: 100%;
  height: 100%;

  position: absolute;

  z-index: 5;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* Universal Items */
.hidescroll::-webkit-scrollbar {
  display: none;
}

.button {
  /* transform: translateY(-200px); */

  margin: 25px;
  padding: 15px 20px 15px 20px;

  border: 1px solid rgb(111, 40, 198);
  border-radius: 7px;

  background-color: rgb(111, 40, 198);
  color: white;

  transition-duration: 200ms;
}
.button:hover {
  background-color: rgb(142, 60, 241);
}

.button--gray {
  border: 1px solid rgb(72, 70, 73);
  background-color: rgb(38, 38, 47);
}
.button--gray:hover {
  background-color: rgb(84, 84, 93);
}


/* Main Page */
.main-content {
  display: flex;
  align-items: end;
  justify-content: center;
}

.welcome-sign {
  top: 25%;

  color: white;

  padding: 10px;
  max-width: 30%;

  text-align: center;
}


/* Documentation Page */
.docs {
  width: 100%;
  height: 100%;

  position: absolute;

  background-color: rgb(38, 38, 47);

  display: flex;
  align-items: center;
  justify-content: center;

  transition-duration: 200ms;
}

.navbar {
  width: 100%;
  height: 75px;

  position: fixed;
  top: 0px;
  transform: translateX(-10px);

  display: flex;
  align-items: center;
  flex-direction: row;
}

/* Search Bar */
#search_icon {
  color: rgb(123, 123, 129);

  height: 50px;
  aspect-ratio: 1;

  text-align: center;
  font-size: 50px;

  position: absolute;
  transform: translateY(-5px);
}

#search_bar {
  max-width: 500px;
  min-width: 200px;
  height: 50px;

  background-color: rgb(38, 38, 47);
  color: rgb(210, 210, 210);

  border: 2px solid rgb(71, 71, 79);
  border-radius: 2rem;

  transition-duration: 100ms;
}
#search_bar:hover {
  background-color: rgb(71, 71, 79);
  box-shadow: 0px 0px 2px 3px rgb(41, 41, 46);
}

@media (min-width: 700px) {
  #search_bar {
    min-width: 500px;
  }
}

#content {
  border-radius: 2rem;
  height: 30px;
  max-width: 430px;
  transform: translateX(+43px);

  color: rgb(210, 210, 210);

  text-align: left;
  font-size: 20px;
  font-family: "lucidia console", monospace;

  padding: 12px 0px 12px 10px;
  outline: none;
  overflow-x: scroll;
  white-space: nowrap;
}

/* BACKGROUND */
@keyframes rotate{
  from {
    rotate: 0deg;
    transform: translate(0px, 100px);
  }
  25% {
    transform: translate(100px, 0px);
  }
  50% {
    scale: 1 1.5;
    transform: translate(0px, -100px);
  }
  75% {
    transform: translate(-100px, 0px);
  }
  to {
    rotate: 360deg;
    transform: translate(0px, 100px);
  }
}

#blob {
  background: linear-gradient(
    to left,
    rgb(75, 135, 214),
    rgb(174, 89, 199)
  );
  height: 250px;
  aspect-ratio: 1;

  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  border-radius: 50%;

  animation: rotate 30s infinite;
}

#blur {
  height: 150%;
  width: 150%;
  position: absolute;
  top: 0px;
  left: 0px;

  z-index: 2;

  backdrop-filter: blur(250px);
}