body {
  margin-top: 8vh;
}

#home {
  background-color: var(--background-dark);
}

#home .logo-container {
  display: flex;
  justify-content: center;
  margin-bottom: 2vh;
}

#home .meteor-logo {
  width: 60%;
}

#home .section-body {
  color: var(--text-light);
}

#home .section-title {
  margin-bottom: 0;
}

#home .section-desc {
  color: var(--text-alt);
  margin-top: 3vh;
}

#home .button-container {
  width: 30%;
  padding-bottom: 0;
}

#home #discord {
  color: var(--text-light);
  background-color: var(--discord);
}
#home #discord:hover {
  opacity: 80%;
}

#home #paypal {
  color: var(--text-light);
  background-color: var(--accent);
}
#home #paypal:hover {
  opacity: 80%;
}

@media screen and (max-width: 1150px) {
  #home .button-container {
    width: 40%;
  }
}

@media screen and (max-width: 850px) {
  #home .button-container {
    width: 50%;
  }
}

@media screen and (max-width: 700px) {
  #home .button-container {
    width: 60%;
  }
}

@media screen and (max-width: 550px) {
  #home .button-container {
    width: 80%;
  }
}

@media screen and (max-width: 430px) {
  #home .button-container {
    display: flex;
    flex-direction: column;
    width: 50%;
  }
  #home #discord {
    margin-bottom: 10px;
  }
}

#client {
  background-color: var(--background-light);
}

#client .section-body {
  color: var(--text-dark);
  width: 100%;
}

#client .download {
  font-size: 1.3em;
}

#client .button-container {
  width: 60%;
}

#client .card-inner {
  text-align: left;
}

#client #download {
  color: var(--text-light);
  background-color: var(--meteor-alt);
}
#client #download:hover {
  background-color: var(--meteor-main);
}

#client #GUI {
  background-color: var(--card1);
}

#client #combat {
  background-color: var(--card2);
  color: var(--text-dark);
}

#client #render {
  background-color: var(--card3);
  color: var(--text-alt);
}

#client #utility {
  background-color: var(--card4);
  color: var(--text-light);
}

.waves {
  background-color: var(--background-light);
}

@media screen and (max-width: 1150px) {
  #client .button-container {
    width: 70%;
  }
}

@media screen and (max-width: 850px) {
  #client .button-container {
    width: 80%;
  }
}

@media screen and (max-width: 700px) {
  #client .card-inner p {
    font-size: 13px;
  }
  #client .card-inner h1 {
    font-size: 20px;
  }
  #client .button-container {
    width: 90%;
  }
}

#server {
  background-color: var(--background-dark);
}

#server .section-body {
  color: var(--text-light);
}

#server .section-title {
  padding-bottom: 0vh;
}

#server .section-desc {
  width: 50%;
  margin: 0 auto;
  margin-bottom: 3vh;
  color: var(--text-alt);
}

#server .section-iframe {
  border: none;
  height: 90px;
  margin-bottom: 3vh;
  width: 50%;
}

#server .section-image-slider {
  overflow: hidden;
  margin-bottom: 5vh;
  box-shadow: 0px 0px 50px 1px rgba(0, 0, 0, 0.693);
  border: var(--accent);
  border-style: solid;
}

#server .section-image-slider figure {
  position: relative;
  width: 700%;
  animation: 30s image-slide infinite;
}

#server .section-image-slider figure img {
  float: left;
  width: 14.2857142857%;
}

@keyframes image-slide {
  0% {
    left: 0;
  }
  12% {
    left: 0%;
  }
  16% {
    left: -100%;
  }
  26% {
    left: -100%;
  }
  30% {
    left: -200%;
  }
  40% {
    left: -200%;
  }
  44% {
    left: -300%;
  }
  48% {
    left: -300%;
  }
  58% {
    left: -300%;
  }
  62% {
    left: -400%;
  }
  72% {
    left: -400%;
  }
  76% {
    left: -500%;
  }
  86% {
    left: -500%;
  }
  90% {
    left: -600%;
  }
}

@media screen and (max-width: 700px) {
  #server .section-desc {
    width: 80%;
  }
  #server .server-iframe {
    width: 100%;
  }
}

#dev-team {
  background: var(--background-light);
}

#dev-team .section-body {
  width: 90%;
  padding-bottom: 6vh;
}

#dev-team .card-inner {
  background: var(--card4);
  color: var(--text-alt);
}

#dev-team .card-img {
  width: 70%;
  object-fit: cover;
  border-radius: 50%;
  padding: 20px;
}

@media screen and (max-width: 550px) {
  #dev-team .card-inner h1 {
    font-size: 20px;
  }
  #dev-team .card-img {
    padding: 0;
  }
}

@media screen and (max-width: 400px) {
  #dev-team .card-inner h1 {
    font-size: 16px;
  }
}

#dev-team .button-container {
  width: 60%;
}

#dev-team .button {
  color: var(--text-light);
}

#dev-team .button:hover {
  opacity: 80%;
}

#dev-team #discord {
  background-color: var(--discord);
}

#dev-team #paypal {
  background-color: var(--paypal);
}

#dev-team #youtube {
  background-color: var(--youtube);
}

#dev-team #github {
  background-color: var(--github);
}

@media screen and (max-width: 1150px) {
  #dev-team .button-container {
    width: 40%;
  }
}

@media screen and (max-width: 850px) {
  #dev-team .button-container {
    width: 50%;
  }
}

@media screen and (max-width: 700px) {
  #dev-team .button-container {
    width: 60%;
  }
}

@media screen and (max-width: 550px) {
  #dev-team .button-container {
    width: 80%;
  }
}

@media screen and (max-width: 700px) {
  #dev-team .button-container {
    display: flex;
    flex-direction: column;
    width: 50%;
  }
  #dev-team .button {
    margin-bottom: 10px;
  }
}