/* utils */
@import url(./variables/desktop.css);
@import url(./variables/giant.css);
@import url(./variables/tablet.css);
@import url(./variables/mobile.css);
@import url(./typography.css);
@import url(./utils.css);

/* templates */
@import url(./templates/default.css);

/* snippets */
@import url(./snippets/layout/header.css);
@import url(./snippets/layout/footer.css);
@import url(./snippets/key-visuals.css);
@import url(./snippets/accordeon.css);

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
}

.body__main {
  flex-grow: 1;
  width: 100%;
  padding: var(--unit-400);

  display: flex;
  flex-direction: column;
  align-items: center;
}

.main__wrapper {
  width: 100%;
}

.body.unlisted .body__main {
  padding-top: var(--unit-2000);
}

/* Coming soon */
.main__coming-soon {
  position: fixed;
  display: inline-block;
  bottom: 0;
  right: var(--unit-400);
  z-index: 10000;
  padding-left: var(--unit-200);
  padding-right: var(--unit-800);
  padding-bottom: var(--unit-400);
  padding-top: var(--unit-200);
  background-color: white;
  border-top: var(--stroke-width) solid var(--colors-primary);
  border-bottom: none;
  transform: translateY(100%);
  transition: transform 500ms var(--cubic-bezier-std);
}

.coming-soon__ic {
  display: inline-block;
  transform: translateY(0);
  transition: transform 500ms var(--cubic-bezier-std) 500ms;
}

.coming-soon__close {
  transform: rotate(0deg);
  position: absolute;
  right: var(--unit-100);
  top: var(--unit-100);
  transition: transform 500ms var(--cubic-bezier-std);
  cursor: pointer;
}

.coming-soon__close.is-visible {
  transform: rotate(45deg);
}

.main__coming-soon.is-visible {
  transform: translateY(0);
}

.coming-soon__ic.is-visible {
  transform: translateY(-0.5em);
}

@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 600px) {
  .main__coming-soon {
    bottom: 0;
    right: 0;
    left: 0;
    padding: var(--unit-300) var(--unit-400) var(--unit-1000) var(--unit-400);

  }
}