* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  font-family: 'Orbitron', sans-serif;
  color: #FFFAFA;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
  color: #FFFAFA;
}

.planet {
  width: 13rem;
  height: 13rem;
  border-radius: 50%;
  background-image: url(../img/map.png);
  background-size: cover;
  background-repeat: no-repeat;
  animation: rotate 30s linear infinite;
}

@keyframes rotate {
  to {
    background-position: 100%;
  }
}

@keyframes stars {
  100% {
    background-image: url(../img/Galaxy1.png);
    background-image: url(../img/Galaxy2.png);
  }
  50% {
    background-image: url(../img/Galaxy2.png);
    background-image: url(../img/Galaxy1.png);
  }
  0% {
    background-image: url(../img/Galaxy1.png);
    background-image: url(../img/Galaxy2.png);
  }
}

.nav {
  width: 100%;
  height: 15vh;
  background: linear-gradient(180deg, #000000 60.42%, rgba(7, 15, 63, 0) 100%);
  position: fixed;
  top: 0;
  z-index: 20;
}

.nav__list {
  width: 80%;
  margin: auto;
  padding-top: 1.6rem;
  display: flex;
  align-items: center;
}

.nav__item:last-child {
  padding-left: 4rem;
}

.nav__item a {
  font-size: 2.4rem;
  text-transform: uppercase;
}

.nav__item a::after {
  content: "";
  display: block;
  height: .2rem;
  width: 80%;
  background-color: #762A6A;
  border-radius: 16rem;
  visibility: hidden;
  transform: scaleX(0);
  transform-origin: 0 100% 0;
  transition: all 0.3s ease-in-out;
}

.nav__item a:hover::after {
  visibility: visible;
  transform: scaleX(1);
}

.nav__item.active::after {
  content: "";
  display: block;
  height: .2rem;
  width: 80%;
  background-color: #762A6A;
  border-radius: 16rem;
}

@media screen and (max-width: 769px) {
  .nav__list {
    justify-content: center;
  }
  .nav__item a {
    font-size: 2rem;
  }
}

@media screen and (max-width: 426px) {
  .nav__item a {
    font-size: 1.6rem;
  }
}

.home {
  background: url(../img/background-home.jpg) no-repeat fixed;
  min-height: 1000px;
}

.parallax {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
}

.parallax__astronaut {
  width: 45%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -4;
}

.parallax__layers {
  width: 100%;
  min-height: 1000px;
  overflow: hidden;
}

.parallax .layer {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: -1;
}

.parallax__planet {
  width: 26rem;
  height: 26rem;
  border-radius: 50%;
  background-image: url(../img/map.png);
  background-size: cover;
  background-repeat: no-repeat;
  animation: rotate 15s linear infinite;
  box-shadow: -25px -25px 25px black inset, 30px 20px 70px #762A6A inset, 0px 0px 10px #ffffff;
  position: fixed;
  bottom: 20rem;
  left: 73rem;
  z-index: -2;
}

.parallax__layer0 {
  background: url(../img/meteor1.png) no-repeat;
  top: 1rem;
  left: 20rem;
}

.parallax__layer1 {
  background: url(../img/meteor1.png) no-repeat;
  top: -2rem;
  left: 50rem;
}

.parallax__layer2 {
  background: url(../img/meteor2.png) no-repeat;
  top: -8rem;
  left: 20rem;
}

.parallax__layer3 {
  background: url(../img/meteor3.png) no-repeat;
  top: -8rem;
  left: 100rem;
}

.parallax__layer4 {
  background: url(../img/meteor4.png) no-repeat;
  top: 10rem;
  left: 45rem;
}

.parallax__layer5 {
  background: url(../img/meteor5.png) no-repeat;
  top: -8rem;
  left: 8rem;
}

.text {
  position: relative;
  top: 0rem;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: #05061A;
  animation: stars 3s linear infinite;
  z-index: -1;
}

.text__div {
  width: 100%;
  position: relative;
  top: -22rem;
  left: 0;
}

.text__parallax {
  font-size: 12rem;
  position: absolute;
  top: 0;
  z-index: -4;
}

.text__box {
  background-color: rgba(2, 3, 12, 0.76);
  width: 60%;
  padding: 4rem;
  border-radius: .8rem;
  position: absolute;
  top: 8rem;
}

.text__title {
  font-size: 4rem;
  font-weight: 900;
  letter-spacing: 1rem;
  text-align: center;
  margin-bottom: 2.4rem;
}

.text__p {
  font-size: 1.8rem;
  letter-spacing: .8rem;
  line-height: 2;
}

.text__p:last-child {
  margin-top: 1.8rem;
}

@media screen and (max-width: 1025px) {
  .parallax__planet {
    width: 20rem;
    height: 20rem;
    bottom: 15rem;
    left: 73rem;
  }
  .text__div {
    top: -20rem;
    left: 0;
  }
  .text__parallax {
    font-size: 10rem;
  }
  .text__box {
    width: 80%;
    padding: 2rem;
    margin-top: 2rem;
  }
  .text__title {
    font-size: 3.2rem;
  }
  .text__p {
    font-size: 1.6rem;
  }
}

@media screen and (max-width: 769px) {
  .parallax__astronaut {
    width: 60%;
  }
  .parallax__planet {
    width: 50rem;
    height: 50rem;
    bottom: 10rem;
    left: 55rem;
  }
  .parallax__layer0 {
    top: 1rem;
    left: 10rem;
  }
  .parallax__layer1 {
    top: -2rem;
    left: 5rem;
  }
  .parallax__layer2 {
    top: -12rem;
    left: 2rem;
  }
  .parallax__layer3 {
    left: -24rem;
  }
  .parallax__layer4 {
    top: 10rem;
    left: 30rem;
  }
  .parallax__layer5 {
    top: -8rem;
    left: 55rem;
  }
  .text__div {
    top: -22rem;
    left: 0;
  }
  .text__parallax {
    font-size: 8rem;
  }
  .text__box {
    width: 90%;
    margin-top: 4rem;
  }
  .text__title {
    font-size: 3rem;
  }
  .text__p {
    font-size: 1.4rem;
  }
}

@media screen and (max-width: 426px) {
  .parallax__astronaut {
    width: 100%;
  }
  .parallax__planet {
    width: 50rem;
    height: 50rem;
    bottom: 45rem;
    left: 12rem;
    z-index: -4;
  }
  .parallax__layer0 {
    top: 1rem;
    left: 0rem;
  }
  .parallax__layer1 {
    top: -2rem;
    left: 5rem;
  }
  .parallax__layer2 {
    top: -8rem;
    left: 2rem;
  }
  .parallax__layer3 {
    display: none;
  }
  .parallax__layer4 {
    top: 10rem;
    left: 20rem;
  }
  .parallax__layer5 {
    top: -8rem;
    left: -18rem;
  }
  .text__div {
    top: -26rem;
    left: 0;
  }
  .text__parallax {
    font-size: 6rem;
    text-align: center;
  }
  .text__box {
    width: 100%;
    padding: 2rem;
    top: 2rem;
  }
  .text__title {
    font-size: 2rem;
    letter-spacing: .8rem;
  }
  .text__p {
    font-size: 1.2rem;
  }
}

@media screen and (max-width: 360px) {
  .text__div {
    top: -33rem;
    left: 0;
  }
  .text__parallax {
    font-size: 5rem;
  }
  .text__box {
    padding: .8rem;
  }
  .text__title {
    font-size: 1.8rem;
  }
  .text__p {
    font-size: 1rem;
  }
}

@media screen and (max-width: 320px) {
  .text__div {
    top: -26rem;
    left: 0;
  }
}

.footer {
  width: 100%;
  padding: 2rem;
  background-color: #02030C;
}

.footer__social__icon-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
}

.footer__paragraph {
  text-align: center;
  margin-top: 2.4rem;
  font-size: 1.2rem;
  letter-spacing: .8rem;
}

.footer__paragraph .site-link {
  color: #762A6A;
  font-weight: 700;
  font-size: 1.4rem;
}

.footer-home {
  position: relative;
  bottom: 0;
}

.footer-about {
  position: absolute;
  bottom: 0;
}

@media screen and (max-width: 769px) {
  .footer__social__icon-list {
    gap: 2rem;
  }
  .footer .social__icon-item a img {
    width: 80%;
  }
  .footer__paragraph {
    letter-spacing: .4rem;
  }
}

@media screen and (max-width: 426px) {
  .footer .social__icon-item a img {
    width: 70%;
  }
}

@media screen and (max-width: 426px) {
  .footer__social__icon-list {
    gap: 1rem;
  }
  .footer .social__icon-item a img {
    width: 60%;
  }
}

.about__page {
  background-color: #05061A;
  height: 100vh;
  animation: stars 3s linear infinite;
}

.about__container {
  background-color: rgba(2, 3, 12, 0.76);
  border-radius: .8rem;
  width: 80%;
  margin: auto;
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 10rem;
}

.about .planet-side {
  width: 40%;
}

.about .planet {
  margin: auto;
  border-radius: 50%;
  background-image: url(../img/map.png);
  background-size: cover;
  background-repeat: no-repeat;
  animation: rotate 15s linear infinite;
  width: 20rem;
  height: 20rem;
  box-shadow: -25px -25px 25px black inset, 30px 20px 70px #762A6A inset, 0px 0px 10px #ffffff;
}

.about .text-side {
  width: 60%;
}

.about__title {
  text-align: center;
  letter-spacing: .8rem;
  font-size: 2.4rem;
  font-weight: 700;
  margin: 2rem 0;
}

.about__p {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .8rem;
  margin-bottom: 2rem;
}

.about__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .8rem;
  border: 2px solid #FFFAFA;
  border-radius: .8rem;
  width: fit-content;
  padding: 1rem;
  margin: 2rem auto;
  transition: border 1s ease-in-out;
}

.about__btn:hover {
  border: 2px solid #762A6A;
}

@media screen and (max-width: 1025px) {
  .about__container {
    top: 6rem;
  }
  .about .planet-side {
    width: 40%;
  }
  .about .planet {
    width: 15rem;
    height: 15rem;
  }
  .about__title {
    font-size: 2rem;
  }
  .about__p {
    font-size: 1.2rem;
  }
}

@media screen and (max-width: 769px) {
  .about {
    height: 100vh;
    overflow: hidden;
  }
  .about__container {
    position: relative;
    top: 7rem;
  }
  .about .planet-side {
    width: 30%;
  }
  .about .planet {
    width: 10rem;
    height: 10rem;
  }
  .about .text-side {
    width: 70%;
  }
  .about__title {
    font-size: 1.6rem;
  }
}

@media screen and (max-width: 425px) {
  .about__container {
    width: 100%;
    flex-direction: column;
  }
  .about .planet-side {
    width: 100%;
  }
  .about .planet {
    width: 50rem;
    height: 50rem;
    position: absolute;
    top: -40rem;
  }
  .about .text-side {
    width: 100%;
    position: absolute;
    top: 0rem;
    padding: 2rem;
  }
  .about__title {
    font-size: 1.6rem;
  }
  .about__p {
    font-size: 1.2rem;
  }
}
