:root {
  --path-projects: "../img/projects/";
}

@font-face {
  font-family: lele;
  src: url("../fonts/stolen.ttf");
}

@font-face {
  font-family: pixelart;
  src: url("../fonts/Minecraft.ttf");
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  background: linear-gradient(
    black,
    #230e70,
    #1a0d46,
    #020f24,
    #020f24,
    #4f8ea1,
    #154fac,
    #186bf1,
    #59a0f2
  );
}

#starfield {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: block;
  width: 100vw;
  height: 100vh;
}

header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 100px;
  margin: 0;
  padding: 0;
  height: 100vh;
}

footer {
  position: relative;
  z-index: 1;
  height: 700px;
  background: url("../img/footer.gif");
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: right center;
  width: 100%;
}

svg {
  height: 100%;
  width: 100%;
}

h1,
h2,
h3,
p,
div,
button {
  font-family: lele, sans-serif;
  color: white;
}

h1 {
  font-size: clamp(10px, 12vw, 70px);
  text-align: center;
  user-select: none;
}

h2 {
  font-size: clamp(20px, 2vw, 120px);
  text-align: center;
  user-select: none;
}

p {
  font-size: 20px;
  text-align: center;
}

main {
  margin: 0 150px 100px 50px;
  position: relative;
  z-index: 2;
}

.no-scroll {
  overflow: hidden;
  height: 100vh;
}

.footer_left_image {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 4;
  width: 575px;
  height: 400px;
}

.smooth-scroll {
  scroll-behavior: auto;
  transition-timing-function: ease-in;
}

.welcome_text {
  font-size: 70px;
  text-align: center;
}

.all_credits {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}

.credits {
  font-family: pixelart, sans-serif;
  color: white;
  text-align: center;
  display: block;
  margin-top: 100px;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 5px;
}

.credits a {
  animation: color-change 10s infinite;
}

.credits a:hover {
  color: #cd4e4e;
  animation: none;
}

@keyframes color-change {
  0% {
    color: rgb(204, 38, 38);
  }

  10% {
    color: rgb(235, 134, 19);
  }

  20% {
    color: rgb(223, 236, 35);
  }

  30% {
    color: rgb(59, 219, 20);
  }

  40% {
    color: rgb(17, 247, 235);
  }

  50% {
    color: rgb(70, 143, 240);
  }

  60% {
    color: rgb(190, 71, 245);
  }

  70% {
    color: rgb(156, 21, 209);
  }

  80% {
    color: rgb(216, 59, 190);
  }

  90% {
    color: rgb(223, 61, 136);
  }

  100% {
    color: rgb(204, 38, 38);
  }
}

@keyframes launchButton {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(5deg);
  }

  50% {
    transform: rotate(0deg);
  }

  75% {
    transform: rotate(-5deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@media screen and (max-width: 980px) {
  #welcome p {
    margin: 0 25%;
    line-height: 1.5;
  }
}

@media only screen and (max-width: 800px) {
  .container .box {
    flex-direction: column;
  }
}

@media screen and (max-width: 770px) {
  .footer_left_image {
    display: none;
  }
}

@media screen and (max-width: 580px) {
  main {
    margin: 0 40px;
  }

  .container {
    margin: 0;
  }

  .container .box {
    flex-wrap: unset;
  }
}

@media screen and (max-width: 490px) {
  .all_credits {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 100px;
  }

  .credits {
    margin: 0;
  }

  .welcome_text {
    font-size: 40px;
  }
}