@import url("https://fonts.googleapis.com/css2?family=Syne:wght@400..800&display=swap");

:root {
  --theme-color: #ddcfc8;
  --intro-text: #c1aea3;
  --main-text: #a69b97;
  --selected: #d0beb4;
  --result-bg-color-bottom: #ddcfc8;
  --result-font-color-sub: #f6eeea;
  --result-font-color-info: #B78E94;
  --chypre-bg-color-top: #b4bbaa;
  --chypre-bg-color-medium: #8c9384;
  --chypre-bg-color-combination: #9dac8d;
  --chypre-bg-color-items: #eef1e6;
  --chypre-font-color-dark: #8c9384;
  --chypre-font-color-light: #e7ecdf;
  --chypre-font-color-item-main: #8c9384;
  --chypre-font-color-item-sub: #959b8c;
  --herbal-bg-color-top: #aaaebb;
  --herbal-bg-color-medium: #8b8e9c;
  --herbal-bg-color-combination: #989db3;
  --herbal-bg-color-items: #e6eaf1;
  --herbal-font-color-dark: #9ba1b3;
  --herbal-font-color-light: #dcdee5;
  --herbal-font-color-item-main: #9ba1b3;
  --herbal-font-color-item-sub: #a0a5b6;
  --oriental-bg-color-top: #e4a78c;
  --oriental-bg-color-medium: #d89679;
  --oriental-bg-color-combination: #e89c7a;
  --oriental-bg-color-items: #f1ede4;
  --oriental-font-color-dark: #cb9279;
  --oriental-font-color-light: #f2e2d3;
  --oriental-font-color-item-main: #cb9279;
  --oriental-font-color-item-sub: #d8997e;
  --musky-bg-color-top: #b69a8b;
  --musky-bg-color-medium: #a5826f;
  --musky-bg-color-combination: #a77f72;
  --musky-bg-color-items: #f1e9e4;
  --musky-font-color-dark: #a5826f;
  --musky-font-color-light: #e5e1dc;
  --musky-font-color-item-main: #a5826f;
  --musky-font-color-item-sub: #b69a8b;
  --powdery-bg-color-top: #c392a0;
  --powdery-bg-color-medium: #c47e98;
  --powdery-bg-color-combination: #d992ac;
  --powdery-bg-color-items: #fbf1f6;
  --powdery-font-color-dark: #a17e7e;
  --powdery-font-color-light: #e5dddc;
  --powdery-font-color-item-main: #a17e7e;
  --powdery-font-color-item-sub: #b89696;
  --natural-bg-color-top: #a4c092;
  --natural-bg-color-medium: #8fa681;
  --natural-bg-color-combination: #96b385;
  --natural-bg-color-items: #eff7ee;
  --natural-font-color-dark: #7f9d80;
  --natural-font-color-light: #dce5dc;
  --natural-font-color-item-main: #7f9d80;
  --natural-font-color-item-sub: #91b292;
  --citrus-bg-color-top: #bfba92;
  --citrus-bg-color-medium: #aca466;
  --citrus-bg-color-combination: #b7ae68;
  --citrus-bg-color-items: #fbfaf1;
  --citrus-font-color-dark: #8c9384;
  --citrus-font-color-light: #e5e5dc;
  --citrus-font-color-item-main: #b2ad86;
  --citrus-font-color-item-sub: #c0bc9e;
  --green-bg-color-top: #708b71;
  --green-bg-color-medium: #567858;
  --green-bg-color-combination: #59825c;
  --green-bg-color-items: #eef7f2;
  --green-font-color-dark: #6c866d;
  --green-font-color-light: #dfe5dc;
  --green-font-color-item-main: #6c866d;
  --green-font-color-item-sub: #79947a;
  --aquatic-bg-color-top: #88a6bc;
  --aquatic-bg-color-medium: #678fad;
  --aquatic-bg-color-combination: #6998bb;
  --aquatic-bg-color-items: #f1f6fb;
  --aquatic-font-color-dark: #7e9aaf;
  --aquatic-font-color-light: #dce1e5;
  --aquatic-font-color-item-main: #7e9aaf;
  --aquatic-font-color-item-sub: #8fabc0;
  --floral-bg-color-top: #c67b8d;
  --floral-bg-color-medium: #a76071;
  --floral-bg-color-combination: #b65e73;
  --floral-bg-color-items: #fbf1f6;
  --floral-font-color-dark: #ce8496;
  --floral-font-color-light: #e5dce0;
  --floral-font-color-item-main: #ce8496;
  --floral-font-color-item-sub: #db8fa1;
  --woody-bg-color-top: #9e836f;
  --woody-bg-color-medium: #83634c;
  --woody-bg-color-combination: #8e694e;
  --woody-bg-color-items: #fbf7f1;
  --woody-font-color-dark: #987c67;
  --woody-font-color-light: #e5e1dc;
  --woody-font-color-item-main: #987c67;
  --woody-font-color-item-sub: #9e8370;
  --fougere-bg-color-top: #7b9690;
  --fougere-bg-color-medium: #608179;
  --fougere-bg-color-combination: #658c82;
  --fougere-bg-color-items: #f1fbf7;
  --fougere-font-color-dark: #78958f;
  --fougere-font-color-light: #dce5e1;
  --fougere-font-color-item-main: #78958f;
  --fougere-font-color-item-sub: #81a099;
}

html {
  width: 100vw;
  height: 100vh;
  min-width: 960px;
  min-height: 560px;
  font-family: "Syne", "tbudgothic-std", sans-serif;
  font-weight: 400;
}

body {
  width: 100vw;
  min-width: 960px;
  min-height: 560px;
  padding: 0;
  margin: 0;
}

.sp {
  display: none;
}

.scrollable::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.scrollable::-webkit-scrollbar-track {
  background-color: white;
  border-radius: 12px;
}

.scrollable::-webkit-scrollbar-thumb {
  background-color: var(--theme-color);
  border-radius: 12px;
}

.copyRight {
  align-self: center;
  justify-self: end;
  width: 50%;
}

.fadeIn {
  display: block;
  animation: fadeIn 2s ease-in-out;
}

.fadeOut {
  display: block;
  animation: fadeOut 2s ease-in-out;
}

.fadeOutForwards {
  display: block;
  animation: fadeOut 500ms forwards;
}

.fadeUp {
  display: block;
  animation: fadeUp 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeUp {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fuwafuwa {
  0% {
    transform: translate(0, 0) rotate(-7deg);
  }
  50% {
    transform: translate(0, -7px) rotate(0deg);
  }
  100% {
    transform: translate(0, 0) rotate(7deg);
  }
}

@media screen and (max-width: 959px) {
  html {
    width: 100vw;
    height: 100%;
    min-width: auto;
    min-height: auto;
  }

  body {
    width: 100vw;
    min-width: auto;
    min-height: auto;
    padding: 0;
    margin: 0;
  }

  .pc {
    display: none;
  }

  .sp {
    display: block;
  }
}