:root {
  --quietmidnight: #060710;
  --hackergreen: #12ee24;
}

body {
  background-color: var(--quietmidnight);
  font-family: 'Barlow', sans-serif;
  margin-left: 25%;
  margin-right: 25%;
  margin-top: 0%;
  margin-bottom: 5%;
  padding: 0;
  box-sizing: border-box;
  font-weight: normal;
  transition: 0.3s ease-in-out;
}

.settings {
  background-color: var(--quietmidnight);
  font-family: 'Barlow', sans-serif;
  border: 3px solid var(--hackergreen);
  border-radius: 10px;
  color: var(--hackergreen);
  padding: 6px;
  transition: 0.3s ease-in-out;
}

.button {
  background-color: var(--hackergreen);
  font-family: 'Barlow', sans-serif;
  border: none;
  color: var(--quietmidnight);
  padding-left: 6px;
  padding-right: 6px;
  padding-top: 6px;
  padding-bottom: 6px;
  border: 3px solid var(--hackergreen);
  border-radius: 10px;
  font-weight: bold;
  transition: 0.3s ease-in-out;
}
.button:hover {
  background-color: var(--quietmidnight);
  color: var(--hackergreen);
  padding-left: 10px;
  padding-right: 10px;
  transition: 0.3s ease-in-out;
}
.button:active {
  background-color: var(--hackergreen);
  color: var(--quietmidnight);
  transition: 0.3s ease-in-out;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--hackergreen);
  opacity: 1; /* Firefox */
  transition: 0.3s ease-in-out;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--hackergreen);
  transition: 0.3s ease-in-out;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: var(--hackergreen);
  transition: 0.3s ease-in-out;
}

.title {
  display: block;
  width: 100%;
  border: none;
  outline: none;
  font-size: 20px;
  font-weight: normal;
  color: var(--hackergreen);
  background-color: var(--quietmidnight);
  padding-top: 0.1%;
  padding-bottom: 0.1%;
  font-family: 'Barlow', sans-serif;
  transition: 0.3s ease-in-out;
}

.text, .input {
  display: block;
  width: 100%;
  border: none;
  outline: none;
  font-size: 20px;
  font-weight: normal;
  color: var(--hackergreen);
  background-color: var(--quietmidnight);
  padding-top: 2%;
  padding-bottom: 2%;
  font-family: 'Barlow', sans-serif;
  transition: 0.3s ease-in-out;
}

.hr {
  border-color: var(--hackergreen);
  transition: 0.3s ease-in-out;
}

span {
  font-family: 'Courier Prime', monospace;
  background-color: #00000080;
  padding: 20px;
  border-radius: 10px;
  display: block;
  transition: 0.3s ease-in-out;
}

input {
  width: 60%;
}

@keyframes fly {
  0% { transform: translate(0px,0px) rotate(0deg); }
  25% { transform: translate(0px,1px) rotate(0deg); }
  50% { transform: translate(0px,-1px) rotate(0deg); }
  75% { transform: translate(0px 0px) rotate(0deg); }
  100% { transform: translate(0px,0px) rotate(0deg); }
}
@media only screen and (max-width: 768px) {
  body {
    margin-left: 5%;
    margin-right: 5%;
  }
}

.tooltip {
  position: relative;
  display: inline-block;
  transition: 0.3s ease-in-out;
}

.tooltip .tooltiptext {
  visibility: hidden;
  background-color: #00000080;
  width: 300px;
  color: var(--hackergreen);
  text-align: center;
  border-radius: 10px;
  padding: 10px;
  position: absolute;
  z-index: 1;
  top: -100%;
  left: 105%;
  border-radius: 5px;
  transition: 0.3s ease-in-out;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  transition: 0.3s ease-in-out;
}

select {
  background-color: var(--quietmidnight);
  font-family: 'Barlow', sans-serif;
  border: 3px solid var(--hackergreen);
  border-radius: 10px;
  color: var(--hackergreen);
  padding: 6px;
  width: 35%;
  transition: 0.3s ease-in-out;
}

select:hover {
  padding-left: 12px;
  padding-right: 12px;
  transition: 0.3s ease-in-out;
}