@import url("https://fonts.googleapis.com/css2?family=Silkscreen&display=swap");

* {
  font-weight: 400;
  font-family: inherit;
  font-style: normal;
  color: rgba(255, 255, 255, 0.3);
}

:root {
  --background-width: 4000px;
  --background-height: 4000px;
  --background-yPos: -1000px;
}

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 2000px;
  overflow: hidden;
  background: linear-gradient(rgb(0, 255, 0), black);
  font-family: "Silkscreen", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#vignette {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: radial-gradient(transparent, black);
  backdrop-filter: blur(2px);
  mask: linear-gradient(black, transparent 20%, transparent 80%, black);
}

#container {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  transform: rotateX(70deg) translateZ(0);
}

#blur {
  position: absolute;
  pointer-events: none;
  transform: translateY(-750px) translateZ(0);
  width: 900px;
  height: 3500px;
  z-index: 0;
  backdrop-filter: blur(20px) brightness(1.25);
  mask: linear-gradient(transparent 25%, black 75%);
}

#background {
  position: absolute;
  width: var(--background-width);
  height: var(--background-height);
  transform: translateY(var(--background-yPos)) translateZ(0);
  z-index: -1;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 20 20"><rect x="0" y="0" width="20" height="20" fill="none" stroke="rgba(255, 255, 255, 0.1)" stroke-width="1" shadow="0 0 20px black inset"/></svg>');
  background-size: 100px 100px;
  background-repeat: repeat;
  background-position: center center;
}

#backgroundColor {
  position: absolute;
  width: var(--background-width);
  height: var(--background-height);
  transform: translateY(var(--background-yPos)) translateZ(-1px);
  z-index: -1;
  background: linear-gradient(rgba(0, 255, 0, 0.5), rgba(0, 0, 0, 0.5));
}

#matrixCanvas {
  position: absolute;
  display: block;
  width: var(--background-width);
  height: var(--background-height);
  transform: translateY(var(--background-yPos)) translateZ(-2px);
}

#binaryinput {
  width: 700px;
  height: 75px;
  padding-left: 25px;
  padding-right: 25px;
  text-align: center;
  font-size: 20px;
  overflow: hidden;
  outline: none;
  resize: none;
  color: rgba(255, 255, 255, 0.125);
  transform: rotateX(-70deg) translateY(-80px) translateZ(25px);
  transition: box-shadow 0.2s;
  background: rgba(0, 0, 0, 0.5);
  border: 2px rgba(0, 0, 0, 0.75);
  border-radius: 100px;
  box-shadow: 0 10px 30px black, 0 0 25px rgba(34, 255, 34, 0.25) inset;
  backdrop-filter: blur(5px);
}

#binaryinput::-webkit-inner-spin-button,
#binaryinput::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#binaryinput::placeholder {
  color: rgba(255, 255, 255, 0.125);
}

#binaryinput:focus {
  box-shadow: 0 10px 30px black, 0 0 25px rgba(55, 255, 55, 0.5) inset;
}

#submit {
  position: absolute;
  width: 110px;
  height: 50px;
  padding-left: 25px;
  padding-right: 25px;
  text-align: center;
  font-size: 15px;
  transform: rotateX(-100deg) translateX(175px) translateY(-65px) translateZ(24px);
  transition: font-size 0.2s, transform 0.2s;
  background: rgba(0, 0, 0, 0.5);
  border: 2px rgba(0, 0, 0, 0.75);
  border-radius: 100px;
  text-shadow: 0 2.5px 10px rgba(255, 255, 255, 0.5);
  box-shadow: 0 -5px 30px black, 0 0 25px rgba(34, 255, 34, 0.25) inset;
  backdrop-filter: blur(5px);
}

#submit:hover {
  font-size: 12.5px;
  transform: rotateX(-100deg) translateX(175px) translateY(-65px) translateZ(14px);
}

#submit:active {
  transform: rotateX(-100deg) translateX(175px) translateY(-65px) translateZ(4px);
}

#inputclear {
  position: absolute;
  width: 100px;
  height: 50px;
  padding-left: 25px;
  padding-right: 25px;
  text-align: center;
  font-size: 15px;
  transform: rotateX(-100deg) rotateY(-15deg) translateX(285px) translateY(-65px) translateZ(-40px);
  transition: font-size 0.2s, transform 0.2s;
  background: rgba(0, 0, 0, 0.5);
  border: 2px rgba(0, 0, 0, 0.75);
  border-radius: 100px;
  text-shadow: 0 2.5px 10px rgba(255, 255, 255, 0.5);
  box-shadow: 0 -5px 30px black, 0 0 25px rgba(34, 255, 34, 0.25) inset;
  backdrop-filter: blur(5px);
}

#inputclear:hover {
  font-size: 12.5px;
  transform: rotateX(-100deg) rotateY(-15deg) translateX(285px) translateY(-65px) translateZ(-50px);
}

#inputclear:active {
  transform: rotateX(-100deg) rotateY(-15deg) translateX(285px) translateY(-65px) translateZ(-60px);
}

#convertertext {
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  transform: rotateX(-70deg) translateX(35px) translateY(-125px) translateZ(55px);
}

#decimaloutput {
  margin: 0;
  position: absolute;
  bottom: 25px;
  left: 25px;
  font-size: 25px;
  opacity: 0;
  text-shadow: 0 5px 10px rgba(255, 255, 255, 0.5);
  transition: opacity 0.2s;
  transform: rotateX(-45deg) translateX(5px) translateZ(35px);
}