@font-face {
  font-family: "CookieRun-Regular";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/CookieRun-Regular.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

.inter {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: CookieRun-Regular;
  scroll-behavior: smooth;
}

::-webkit-scrollbar {
  display: none;
}
/* 로딩 부분 */

.earth {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.457);
  animation: hide 5s forwards;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.earth-loader {
  --watercolor: #3344c1;
  --landcolor: #7cc133;
  width: 7.5em;
  height: 7.5em;
  background-color: var(--watercolor);
  position: absolute;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: inset 0em 0.5em rgb(255, 255, 255, 0.25),
    inset 0em -0.5em rgb(0, 0, 0, 0.25);
  border: solid 0.15em white;
  animation: startround 1s;
  animation-iteration-count: 1;
}

.earth p {
  position: absolute;
  top: 60%;
  color: white;
  display: flex;
  padding-top: 0.25em;
  font-size: 1.25em;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

.earth-loader svg:nth-child(1) {
  position: absolute;
  bottom: -2em;
  width: 7em;
  height: auto;
  animation: round1 5s infinite linear;
}

.earth-loader svg:nth-child(2) {
  position: absolute;
  top: -3em;
  width: 7em;
  height: auto;
  animation: round1 5s infinite linear;
}
.earth-loader svg:nth-child(3) {
  position: absolute;
  top: -2.5em;
  width: 7em;
  height: auto;
  animation: round2 5s infinite linear;
}
.earth-loader svg:nth-child(4) {
  position: absolute;
  bottom: -2.2em;
  width: 7em;
  height: auto;
  animation: round2 5s infinite linear;
}

@keyframes startround {
  0%,
  100% {
    filter: brightness(100%);
    box-shadow: inset 0em 0.5em rgb(255, 255, 255, 0.25),
      inset 0em -0.5em rgb(0, 0, 0, 0.25);
  }
}

@keyframes round1 {
  0% {
    left: -2em;
    opacity: 100%;
    transform: skewX(0deg) rotate(0deg);
  }
  30% {
    left: -6em;
    opacity: 100%;
    transform: skewX(-25deg) rotate(25deg);
  }
  31% {
    left: -6em;
    opacity: 0%;
    transform: skewX(-25deg) rotate(25deg);
  }
  35% {
    left: 7em;
    opacity: 0%;
    transform: skewX(25deg) rotate(-25deg);
  }
  45% {
    left: 7em;
    opacity: 100%;
    transform: skewX(25deg) rotate(-25deg);
  }
  100% {
    left: -2em;
    opacity: 100%;
    transform: skewX(0deg) rotate(0deg);
  }
}

@keyframes round2 {
  0% {
    left: 5em;
    opacity: 100%;
    transform: skewX(0deg) rotate(0deg);
  }
  75% {
    left: -7em;
    opacity: 100%;
    transform: skewX(-25deg) rotate(25deg);
  }
  76% {
    left: -7em;
    opacity: 0%;
    transform: skewX(-25deg) rotate(25deg);
  }
  77% {
    left: 8em;
    opacity: 0%;
    transform: skewX(25deg) rotate(-25deg);
  }
  80% {
    left: 8em;
    opacity: 100%;
    transform: skewX(25deg) rotate(-25deg);
  }
  100% {
    left: 5em;
    opacity: 100%;
    transform: skewX(0deg) rotate(0deg);
  }
}

main {
  padding: 0px 10px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}