:root {
  color-scheme: light dark;
}
body {
  color: light-dark(#0A0A0A, #FFFAFA);
  background-color: light-dark(#FFFAFA, #0A0A0A);
}
  
h2 {
  margin: 2% 0 0% 26%;
  background-color: #007bff;
  width: 25%;
  border-radius: 2px;
  font-family: monospace;
  font-size: 30px;
}
#sp {
  width: 80%;
  border: none;
  background-color: #007bff;
  border-radius: 3px;
  margin: 1% 0 1% 3%;
  font-size: 31px;
  height: 53px;
  cursor: pointer;
}

input[type="text"] {
  width: 80%;
  background-color: #272f3d;
  border-radius: 5px;
  font-size: 38px;
  margin: 3% 3% 0% 3%;
}

span#Fetch {
  display: grid;
  gap: 1rem;
  /* took stack overflow help for the grid: */
  grid-template-columns: repeat(auto-fit, minmax(300px, 3fr));
  text-align: center;
  font-weight: bold;
  font-size: 25px;
  font-family: monospace;
}
a{
    text-decoration: none;
    color: white;
}
button {
  font-size: 17px;
  height: 50px;
  width: 100px;
  height: 4%;
  background-color: #007bff;
  border-radius: 2px;
  border: none;
  margin: 0, 0, 0, 45%;
  cursor: pointer;
  font-family: emoji;
}

input {
  border-radius: none;
}