body {
   box-sizing: border-box;
   height: 100%;
   background-color: #000000;
   background-image: radial-gradient(#11581e, #041607);
   font-family: consolas, Helvetica, sans-serif;
   font-size: 1.5rem;
   color: rgba(128, 255, 128, 0.8);
   text-shadow: 0 0 1ex rgba(51, 255, 51, 1), 0 0 2px rgba(255, 255, 255, 0.8);
   min-height: 100vh;
   overflow: hidden;
   margin: 0;
   scroll-behavior: smooth;
}

.terminal {
   height: 100vh;
   margin: auto;
   text-transform: uppercase;
   overflow: auto;
}

.terminal h1 {
   text-align: center;
}

.container {
   min-height: 80vh;
   display: flex;
   flex-wrap: wrap;
   width: 90%;
   margin: auto;
}

label,
button {
   display: block;
   margin: 15px 0;
}

input,
select,
button {
   background: #000;
   border: none;
   outline: none;
   padding: 15px;
   font-size: 20px;
   box-sizing: border-box;
   color: rgba(128, 255, 128, 0.8);
   text-shadow: 0 0 1ex rgba(51, 255, 51, 1), 0 0 2px rgba(255, 255, 255, 0.8);
}

.console-input {
   display: flex;
   background: #000;
   margin: 20px 0;
   width: 80%;
   height: 70px;
}

.console-input label {
   width: 5%;
   padding: 20px;
   margin: 0;
   display: flex;
   text-align: center;
   justify-content: center;
   align-items: center;
}

.console-input input {
   width: 95%;
   height: 100%;
   padding: 20px;
   box-sizing: border-box;
   text-transform: uppercase;
}

label,
select,
button {
   cursor: pointer;
}

button {
   transition: all 300ms;
   letter-spacing: 2px;
   margin-right: 20px;
}

button:hover {
   transform: scale(1.03);
}

.buttons {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   flex-direction: row;
}

#left {
   flex-basis: 50%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   flex-grow: 1;
}

#right {
   background: #000;
   height: 500px;
   margin: auto;
   width: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   overflow: hidden;
   position: relative;
   border-radius: 50px;
   flex-grow: 1;
}

#right #output {
   width: 100%;
   background: #000;
   padding: 20px;
   box-sizing: border-box;
   text-align: center;
   font-size: 70px;
   overflow: auto;
   overflow-wrap: break-word;
   word-wrap: break-word;
   hyphens: auto;
   color: rgba(128, 255, 128, 0.8);
   text-shadow: 0 0 1px rgba(51, 255, 51, 0.4), 0 0 2px rgba(255, 255, 255, 0.8);
}

.overlay {
   pointer-events: none;
   position: absolute;
   width: 100%;
   height: 100%;
   background: repeating-linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0,
      rgba(0, 0, 0, 0.3) 50%,
      rgba(0, 0, 0, 0) 100%
   );
   background-size: auto 4px;
   z-index: 99;
}

.overlay::before {
   content: "";
   pointer-events: none;
   position: absolute;
   display: block;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   background-image: linear-gradient(
      0deg,
      transparent 0%,
      rgba(32, 128, 32, 0.2) 2%,
      rgba(32, 128, 32, 0.8) 3%,
      rgba(32, 128, 32, 0.2) 3%,
      transparent 100%
   );
   background-repeat: no-repeat;
   animation: scan 7.5s linear 0s infinite;
}

@keyframes scan {
   0% {
      background-position: 0 -100vh;
   }

   35%,
   100% {
      background-position: 0 100vh;
   }
}

.terminal::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
   background-color: #f5f5f5;
   border-radius: 10px;
}

.terminal::-webkit-scrollbar {
   width: 10px;
   background-color: #f5f5f5;
}

.terminal::-webkit-scrollbar-thumb {
   border-radius: 10px;
   background-color: #fff;
   background-image: -webkit-gradient(
      linear,
      40% 0%,
      75% 84%,
      from(#11581e),
      to(#11581e),
      color-stop(0.6, #54de5d)
   );
}