:root {
  --wwGold: #ffd447;
}
body {
  overflow-y: scroll;
}
.hideSlide {
  background-color: #312331;
}
.wholeBody {
  font-family: "Raleway", sans-serif;
}
h1 {
  font-size: 5.4em;
}
.introText {
  font-family: "Raleway", sans-serif;
}
.line {
  width: 80%;
  height: 4px;
  background-color: rgb(121, 120, 120);
  margin: auto;
  border-radius: 50%;
  margin-top: 20px;
  margin-bottom: 20px;
}
/* title */
.titleProject {
  padding-top: 120px;
  text-align: center;
}
.websiteButton {
  display: flex;
  justify-content: center;
}
.websiteButton a {
  background-color: #404e6bc0;
  font-size: 2em;
  padding: 10px 20px;
  border-radius: 20px;
  margin-left: 7px;
  margin-right: 7px;
  margin-bottom: 50px;
  z-index: 40;
  border-color: #404e6b;
  border-style: solid;
  border-width: 2px;
  transition: 0.3s ease;
  width: 230px;
  text-align: center;
}
.websiteButton a:hover {
  border-color: var(--light);
}
.circle {
  display: none;
}
/* end of title */

/* about */

.section {
  display: flex;
  width: 80%;
  margin: auto;
}
.aboutWords {
  padding-right: 4%;
  padding-left: 4%;
}
.subtitles {
  color: var(--wwGold);
}
.aboutImage,
.leftImg {
  display: flex;
  align-items: center;
  margin: auto;
  width: 300%;
  max-width: 600px;
}
.imgWW {
  width: 100%;
  border-radius: 30px;
}

/* Explorer */

.pfpImage {
  display: flex;
  align-items: center;
  margin: auto;
  width: 30%;
  max-width: 400px;
  min-width: 300px;
}
.margin {
  padding-left: 3%;
}
.bottomImg {
  display: none;
}

/* socials */

.social {
  margin: auto;
}
.socialLinks {
  display: flex;
  justify-content: space-evenly;
}
.fa {
  margin-right: 30px;
  margin-left: 30px;
  z-index: 30;
  padding: 20px;
  border-radius: 30%;
  transition: 0.3s ease-in-out;
}
.fa:hover {
  border-radius: 0;
}
.fa a {
  font-size: 3em;
}
.Discord {
  background-color: #7289da;
}
.twitter {
  background-color: #00acee;
}
.medium {
  background-color: #ffffff;
}
.fa-medium {
  color: black;
}
.facebook {
  background-color: #4267b2;
}
.youtube {
  background-color: #ff0000;
}
.instagram {
  background: linear-gradient(#8a3ab9, #fbad50);
}
.twitch {
  background-color: #6441a5;
}
/* footer */

.copyRights p {
  font-size: 1.3em;
  text-align: right;
  padding-right: 4%;
  color: #aeb0b3;
}
/* media */
@media (max-width: 1360px) {
  .section {
    flex-wrap: wrap;
  }
  .margin {
    padding-left: 0;
  }
  .topImg {
    display: none;
  }
  .bottomImg {
    display: flex;
  }
}
@media (max-width: 800px) {
  .socialLinks {
    flex-wrap: wrap;
  }

  .fa {
    margin-top: 18px;
    margin-bottom: 18px;
  }
}
@media (max-width: 600px) {
  .websiteButton a {
    font-size: 1.4em;
    width: 160px;
  }
  .line {
    width: 80%;
  }
  h1 {
    font-size: 4em;
  }
  h2 {
    font-size: 3em;
    text-align: center;
  }
  .about {
    width: 85%;
    flex-wrap: wrap;
  }
  p {
    font-size: 1.1em;
  }
  .copyRights p {
    font-size: 1em;
    text-align: center;
    padding-right: 0;
    color: #aeb0b3;
  }
}