/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face {
  font-family: "Ownglyph PDH";
  src: url("온글잎 박다현체.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

body {
  background-color: rgb(186 173 165);
  color: black;
  font-family: "Ownglyph PDH", sans-serif;
  font-size: 30px;
  margin: 0;

}

.site-content {
  width: 1440px;
  margin: 0 auto;
}

.site-banner {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  
  image-rendering: pixelated;
}

.main-box {
  width: 1440px;
  margin-top: 16px;
}

.box-body {
  position: relative;
  height: 874px;
  background-color: rgb(45 74 70);
  color: white;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 4px),
    calc(100% - 4px) calc(100% - 4px),
    calc(100% - 4px) 100%,
    4px 100%,
    4px calc(100% - 4px),
    0 calc(100% - 4px)
  );
}

.note-paper-text {
  color: black;
}

.social-links {
  position: absolute;
  left: 50px;
  top: 32px;
  margin: 0;
  padding: 0;
  text-align: left;
  line-height: 1.6;
}

.box-top-crop {
  width: 1440px;
  height: 20px;
  overflow: hidden;
}

.box-top {
  display: block;
  width: 1440px;
  height: 280px;
  image-rendering: pixelated;
}

.social-icon {
  position: relative;
  display: inline-block;
  width: 64px;
  height: 64px;
  vertical-align: middle;
  background-image: url(Icons/slot.png);
  background-size: 64px 64px;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}

.inventory_pink .social-icon {
  background-image: url("Icons/slot_pink.png");
}

.social-icon img {
  display: block;
  width: 64px;
  height: 64px;
  image-rendering: auto;
  transition: transform 0.01s linear;
}

.social-icon:hover,
.social-icon:focus-visible {
  z-index: 1;
}

.social-icon:hover img,
.social-icon:focus-visible img {
  transform: scale(1.1);
}

.inventory {
  display: grid;
  grid-template-columns: repeat(3, 64px);
  gap: 0;
  margin: 0 0 20px;
}

.inventory_pink {
  display: grid;
  grid-template-columns: repeat(3, 64px);
  gap: 0;
  margin: 0 0 20px;

}

.note-paper {
  position: absolute;
  left: 400px;
  top: 20px;
  width: 368px;
  height: 576px;
  background-image: url(note-paperx2.png);
  background-size: 368px 576px;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}

.note-paper-text {
  position: absolute;
  left: 80px;
  top: 104px;
  width: 275px;
  height: 344px;
  font-size: 30px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.worlds {
  position: absolute;
  width: 400px;
  height: 400px;
  left: -60px;
  top: 50px;
  pointer-events: none;

}

.worlds a {
  position: absolute;
  pointer-events: auto;
}

.worlds img {
  display: block;
}

.worlds a img {
  transition: transform 0.01s linear;
  image-rendering: pixelated;
}

.worlds a:hover,
.worlds a:focus-visible {
  z-index: 1;
}

.worlds a:hover img,
.worlds a:focus-visible img {
  transform: scale(1.1);
}

.worlds #satbell:hover img,
.worlds #satbell:focus-visible img {
  transform: translateY(-5px);
}

.worlds #satbell img {
  transition: transform 0.01s linear;
}

.worlds #satbell.is-copying img {
  animation: button-copy 0.5s ease-out forwards;
}

.worlds #satbell.is-reset img {
  transform: translateY(0);
}

@keyframes button-copy {
  0% {
    opacity: 1;
  }

  50% {
    transform: translateY(-30px);
    opacity: 0;
  }

  51% {
    transform: translateY(0);
    opacity: 0;
  }

  85% {
    transform: translateY(0);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.worlds #satbell {
  left: 947px;
  top: 269px;
}

.worlds #ash {
  left: 900px;
  top: 300px;
}

.worlds #esquire-and-bog {
  left: 988px;
  top: 300px;
}

.worlds #seeonegoogolflex {
  left: 870px;
  top: 331px;
}

.worlds #picklecards {
  left: 958px;
  top: 331px;
}

.worlds #stardop {
  left: 900px;
  top: 362px;
}

.worlds #ferd {
  left: 900px;
  top: 362px;
}

.worlds #liamajoris {
  left: 915px; 
  top: 393px;
}

.worlds #leeloo {
  left: 920px;
  top: 424px;
}

.worlds #hempuli {
  left: 920px;
  top: 455px;
}

.worlds #chestnut {
  left: 920px;
  top: 486px;
}

.worlds #dexmckinnery {
  left: 920px;
  top: 517px;
}

#pillar {
  position: absolute;
  left: 930px;
  top: 548px;
  width: 64px;
  height: 276px;
  image-rendering: pixelated;
}