html { display: unset !important }

* {
  box-sizing: border-box;
}

a {
  color: inherit !important;
}

::selection {
  background: oklch(60% 0.25 var(--theme));
  color: black;
}

body {
  margin: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: monospace;
  padding-bottom: 30vh;
  background-color: black;
  overflow: hidden;
}

@media (max-width: 400px) {
  body {
    padding-bottom: 50vh;
  }
}

#input {
  border: 6px black solid;
  padding: 0 25px;
  height: 70px;
  width: 370px;
  background: oklch(60% 0.25 var(--theme));
  position: relative;
  z-index: 2;
  font-family: inherit;
}

#input::selection {
  background: black;
  color: oklch(70% 0.25 var(--theme));
}

@media (max-width: 400px) {
  #input {
    width: 80vw;
  }
}

#input:focus {
  outline: none;
}

#logs {
  position: absolute;
  bottom: 0;
  left: 0;
  color: oklch(60% 0.25 var(--theme));
  z-index: 1;
  padding: 10px;
}

#logs .keywords {
  opacity: 0.7;
}

#logs h1 {
  display: inline;
  font-size: inherit;
  color: inherit;
  font-family: inherit;
  text-decoration: inherit;
  font-weight: inherit;
}

@keyframes rotate {
  0% {transform: translate(-50%, 0) rotateZ(0deg);}
  50% {transform: translate(-50%, -2%) rotateZ(180deg);}
  100% {transform: translate(-50%, 0%) rotateZ(360deg);}
}

@keyframes rotate-b {
  0% {transform: translate(-47%, 0) rotateZ(0deg);}
  50% {transform: translate(-54%, -1%) rotateZ(180deg);}
  100% {transform: translate(-47%, 0%) rotateZ(360deg);}
}

.wave {
  --size: 400vw;
  z-index: -1;
  content: "";
  position: absolute;
  left: 50%;
  min-width: var(--size);
  min-height: var(--size);
  background: oklch(60% 0.25 var(--theme));
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.wave:nth-child(1) {
  --size: 350vw;
  bottom: 23vh;
  border-radius: 49%;
  animation-name: rotate-b;
  animation-duration: 15s;
  animation-start: 2s;
}

.wave:nth-child(2) {
  bottom: 22vh;
  opacity: .4;
  border-radius: 48%;
  animation-duration: 22s;
}

.wave:nth-child(3) {
  bottom: 21vh;
  opacity: .2;
  border-radius: 47%;
  animation-duration: 12s;
}

@media (max-width: 400px) {
  .wave:nth-child(1) {
    --size: 400vw;
    bottom: 25vh;
    border-radius: 50%;
    animation-duration: 30s;
  }
  
  .wave:nth-child(2) {
    bottom: 24vh;
    opacity: .4;
    border-radius: 48%;
    animation-duration: 22s;
  }
  
  .wave:nth-child(3) {
    bottom: 23vh;
    opacity: .2;
    border-radius: 47%;
    animation-duration: 16s;
  }
}