body {
  font-family: "Helvetica Neue";
  overflow: hidden;
  margin: 0;
}

@media only screen and (max-width: 600px) {
  #wrapper {
    right: 200px;
  }
}

#wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
  position: relative;
}

.welcome {
  color: black;
  text-align: center;
  position: relative;
  top: 70px;
  font-size: 40px;
}

.choose {
  color: black;
  text-align: center;
  position: relative;
  top: 40px;
}

.logo {
  align-self: center;
  position: relative;
  left: 350px;
  bottom: 190px;
}

.categories button {
  display: flex;
  position: relative;
  left: 330px;
  background: transparent;
}
.general {
  bottom: 40px;
  font-size: 20px;
  padding-right: 95px;
  color: black;
  border-color: black;
  padding-top: 15px;
  cursor: pointer;
  margin-bottom: 0px;
  border-radius: 15px;
  padding-left: 8px;
}

.general span {
  position: relative;
  left: 72px;
  font-size: 30px;
  bottom: 8px;
}

.history {
  bottom: 60px;
  font-size: 20px;
  padding-right: 208px;
  color: black;
  border-color: black;
  padding-top: 10px;
  cursor: pointer;
  border-radius: 15px;
  padding-left: 8px;
}

.history span {
  position: relative;
  left: 185px;
  font-size: 30px;
  bottom: 8px;
}

.sports {
  bottom: 80px;
  font-size: 20px;
  padding-right: 210px;
  color: black;
  border-color: black;
  padding-top: 10px;
  cursor: pointer;
  border-radius: 15px;
  padding-left: 8px;
}

.sports span {
  position: relative;
  left: 188px;
  font-size: 30px;
  bottom: 8px;
}

.cs {
  bottom: 120px;
  font-size: 20px;
  padding-right: 100px;
  color: black;
  border-color: black;
  padding-top: 10px;
  cursor: pointer;
  border-radius: 15px;
  padding-left: 8px;
}

.cs span {
  position: relative;
  left: 80px;
  font-size: 30px;
  bottom: 8px;
}

.quiz-link-mythology {
  text-decoration: none;
}
.mythology {
  bottom: 100px;
  font-size: 20px;
  padding-right: 175px;
  color: black;
  border-color: black;
  padding-top: 10px;
  cursor: pointer;
  border-radius: 15px;
  padding-left: 8px;
}

.mythology span {
  position: relative;
  left: 155px;
  font-size: 30px;
  bottom: 8px;
}

.mythology:hover {
  background-color: #f8f0e3;
  font-size: 21px;
  transition-duration: 0.4s;
}

.sports:hover {
  background-color: #f8f0e3;
  font-size: 21px;
  transition-duration: 0.4s;
}

.history:hover {
  background-color: #f8f0e3;
  font-size: 21px;
  transition-duration: 0.4s;
}

.general:hover {
  background-color: #f8f0e3;
  font-size: 21px;
  transition-duration: 0.4s;
}

.cs:hover {
  background-color: #f8f0e3;
  font-size: 21px;
  transition-duration: 0.4s;
}