body {
  background-color: black;
  color: white;
  font-family: monospace;
  font-size: 1em;
  margin: 0;
  padding: 0;
  padding-top: 4%;
}

input {
  background: black;
  color: white;
  border: none;
  font-family: monospace;
  font-size: 1em;
  width: 50%;
}

input:focus {
  outline: none;
  border: none;
}

.main {
  padding: 0.5% 1% 0.5% 3%;
}

.navbar {
  background-color: yellow;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  font-family: monospace;
  font-weight: bold;
  white-space: nowrap;
}

.navbar h2 {
  margin: 1.25% 1% 1% 1%;
  font-size: 20px;
}

/* Style the links inside the navigation bar */
.navbar a {
  float: right;
  color: black;
  text-align: center;
  padding: 0.5% 1% 0.5% 1%;
  text-decoration: none;
  font-size: 17px;
  transform: skewY(-5deg);
  border: 3px solid black;
  margin: 0.75% 0.5% 0.75% 0;
  width: fit-content;
}

/* Change the color of links on hover */
.navbar a:hover {
  background-color: coral;
  color: black;
}

/* Add a color to the active/current link */
.navbar a.active {
  background-color: darkcyan;
  border-color: black;
  color: yellow;
}


@media screen and (max-width: 768px) {
  .navbar {
    position: static;
    align-items: center;
    display: flex;
    flex-direction: column;
    padding-bottom: 2%;
  }
  .navbar a {
    float: none;
    display: block;
    text-align: center;
    width: 60%;
    transform: skewY(-3deg);
  }
  body {
    padding-top: 0;
  }
}