@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;800&family=Nanum+Gothic:wght@400;700;800&display=swap');

@import "reset.css";

/* components */
@import "components/nav-bar.css";
@import "components/intro-component.css";
@import "components/display-component.css";

/* screens */
@import "screens/team-screen.css";
@import "screens/market-screen.css";
@import "screens/nh-screen.css";
@import "screens/interview-screen.css";
@import "screens/shop-screen.css";

/* media query */
@import "media-query.css";

:root {
  --purple: #9777AA;
  --gray: #3C3C3C;
  --white: #F4F1E7;
  --green: #458075;
  --border: 2px solid var(--purple);
  --sec: 1000ms;
  --opacity: 0;
}

html {
  /* 10px  */
  font-size: 62.5%;
}

* {
  word-break: keep-all;
}

body {
  color: var(--gray);
  background-color: var(--white);
  font-family: 'Nanum Gothic', sans-serif;
  width: 100%;
  height: 100%;
  

  /* 화면 전환 애니메이션 */
  animation: fadein var(--sec) ease-out;
  -moz-animation: fadein var(--sec) ease-out; /* Firefox */
  -webkit-animation: fadein var(--sec) ease-out; /* Safari and  Chrome */
  -o-animation: fadein var(--sec) ease-out; /* Opera */
}

@keyframes fadein {
  from {opacity: var(--opacity);}
  to {opacity: 1;}
}

@-moz-keyframes fadein { /* Firefox */
  from {opacity: var(--opacity);}
  to {opacity: 1;}
}

@-webkit-keyframes fadein { /* Safari and Chrome */
  from {opacity: var(--opacity);}
  to {opacity: 1;}
}

@-o-keyframes fadein { /* Opera */
  from {opacity: var(--opacity);}
  to {opacity: 1;}
}

@media screen and (max-width: 768px) {
  :root {
    --border: 1px solid var(--purple);
  }
}

@media screen and (max-width: 1024px) {
  html {
    font-size: 50%;
  }
}