@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");

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

body {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: "Space Mono", "Noto Sans KR", sans-serif;
}

.title,
.exclaim {
  display: inline-block;
  font-size: 18vw;
  line-height: 1;
  text-decoration: none;
  color: red;
  letter-spacing: -0.03em;
}

.title {
  margin: 2vw 0 2vw 4vw; /* 좌우 마진 */
}

.exclaim {
  margin: 2vw 4vw 2vw 0; /* 좌우 마진 */
  animation: blink 1.2s ease-in-out infinite;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* index 2 */
.badge {
  position: absolute;
  cursor: grab;
  user-select: none;
}

.badge:active {
  cursor: grabbing;
}

.badge img {
  width: 88px;
  height: 31px;
  display: block;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* no-button */
.no-button {
  text-decoration: none;
  font-size: 4vw;
  margin: 1vw;
}

/* no-button-2 */
.hey {
  text-decoration: none;
  font-size: 5vw;
  margin: 1vw;
}

.no {
  text-decoration: none;
  font-size: 6vw;
  margin: 1vw;
  display: block;
  word-break: break-all;
}

/* website */
.surftheweb img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* cogs */
.font {
  text-decoration: none;
  font-size: 4vw;
  margin: 1vw;
}
.ninja img {
  max-width: 20%;
  height: auto;
  display: block;
  margin: 3vw;
}

/* rainbow */
.pridemonth img {
  max-width: 90%;
  height: auto;
  display: block;
  margin: 3vw;
}

/* folder 2-1, 2-3 */
.nice,
.not {
  text-decoration: none;
  font-size: 4vw;
  margin: 1vw;
}

/* folder 2-2 */
.cat img {
  max-width: 40%;
  height: auto;
  display: block;
  margin: 3vw;
}

.meow {
  text-decoration: none;
  font-size: 2.5vw;
  margin: 3vw;
}

/* webpeople-2 */
.virus img {
  max-width: 40%;
  height: auto;
  display: block;
  margin: 3vw;
}

.notvirus {
  text-decoration: none;
  font-size: 2vw;
  margin: 3vw;
}

/* eh-2 */
.noteh {
  text-decoration: none;
  font-size: 1vw;
  margin: 1vw;
  color: rgb(221, 221, 221);
}

.empty {
  text-decoration: none;
  font-size: 4vw;
  margin: 1vw;
  display: inline;
}

/* index 3 */
.hi {
  text-decoration: none;
  font-size: 4vw;
  margin: 1vw;
  display: inline;
}

.ing {
  text-decoration: none;
  font-size: 4vw;
  margin: 1vw;
  color: rgb(255, 0, 115);
}