@import './all.min.css';
@import './base.css';
@import './main.css';
@import './about.css';
@import './gallery.css';
@import './play.css';
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,400;0,600;1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gothic+A1:wght@400;600&display=swap');
@import url('../src/font/Paysage-Black.woff');
@import url('../src/font/Paysage-Bold.woff');
@import url('../src/font/Paysage-Medium.woff');
@import url('../src/font/Paysage-Regular.woff');
@import url('../src/font/Messapia-Bold.woff');
@import url('../src/font/Messapia-Regular.woff');
@font-face {
  font-family: 'Authentic Sans';
  src: url('../src/font/AUTHENTICSans-130.otf') format('otf');
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 200;
  font-display: swap;
  src: url('../src/font/Pretendard-Regular.otf') format('off');
}
* {
  cursor: url('../src/img/cursor.cur'), auto;
  cursor: -webkit-image-set(url('../src/img/cursor.cur')) 128 128;
}
:root {
  --grad: linear-gradient(
    155deg,
    var(--amethystSmoke) 0%,
    #cedae648 57%,
    #c5b08950 100%
  );
  --textShadow: 34px -20px 8px rgba(116, 116, 116, 0.5);
  --shadow: #00000086 5%, #00000069 15%, #5252527e 30%, #ffffff00 70%;
  --white: #ffffff;
  --vanilla: rgba(255, 247, 230, 0.801);
  --brandyRose: #b48688;
  --spicyPink: #816d70;
  --amethystSmoke: #a290a2;
  --monsoon: #887d86;
  --martini: #aea19e;
  --tuatara: #2e2929;
  --red: rgba(255, 30, 0, 0.76);
}
/*************************      body & global          *************************/
body {
  cursor: url('../src/img/cursor.cur'), auto;
  cursor: -webkit-image-set(url('../src/img/cursor.cur')) 128 128;
  /* background-color: var(--red); */
  position: relative;
  width: 100%;
  font-family: 'Paysage-Black', AppleSDGothic !important;
  height: 100vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.wrapper {
  height: 90%;
  width: 33%;
  /* overflow: hidden; */
  display: flex;
  /* align-items: center; */
  flex-direction: column;

  /* height: 500vh; */
  border: 1px solid var(--tuatara);
  /* background-color: var(--vanilla); */
  /* background: linear-gradient(
      165deg,
      rgba(241, 241, 255, 0.281) 0%,
      #d3725598 25%
    )
    no-repeat center; */
}
.content {
  margin: 3em auto;
  width: 90%;
  height: 85%;
  /* border: 1px solid var(--tuatara); */
  overflow: hidden;
}
.btn__wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top: 40em;
  width: 100%;
}
.btn {
  font-size: 6.5em;
  z-index: 9999;
}
.btn:hover {
  cursor: url('../src/img/hand.cur'), auto;
  transform: scale(1.2);
  cursor: -webkit-image-set(url('../src/img/hand.cur')) 128 128;
}
.bt-prev {
  margin-left: 1.5em;
}
.bt-next {
  margin-right: 1.5em;
}
.title {
  font-family: 'SUIT';
}
h1.title {
  font-family: 'Paysage-Black';
  font-style: italic;
  font-size: 1.5em;
  margin: 1em 0;
}
h3.title {
  font-family: 'Pretendard';
  font-size: 1.2em;
}
.header {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 4em 0 0 0;
}
/*************************                *************************/

/*************************      responsive          *************************/

@media (max-width: 3840px) {
}
@media (max-width: 2560px) {
}

@media (max-width: 1920px) {
}
@media (max-width: 1500px) {
  body {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .wrapper {
    height: 90%;
    width: 33%;
    /* overflow: hidden; */
    display: flex;
    align-items: center;
    flex-direction: column;

    border: 1px solid var(--tuatara);
  }
  .btn__wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 40em;
    width: 100%;
  }
  .btn {
    font-size: 6.5em;
    z-index: 9999;
  }
  .btn:hover {
    cursor: url('../src/img/hand.cur'), auto;
    transform: scale(1.2);
    cursor: -webkit-image-set(url('../src/img/hand.cur')) 128 128;
  }
  .bt-prev {
    margin-left: 1em;
  }
  .bt-next {
    margin-right: 1em;
  }
}
@media (max-width: 1280px) {
  .wrapper {
    height: 90%;
    width: 33%;
    /* overflow: hidden; */
    display: flex;
    align-items: center;
    flex-direction: column;

    border: 1px solid var(--tuatara);
  }
  .bt-prev {
    margin-left: 0.8em;
  }
  .bt-next {
    margin-right: 0.8em;
  }
}
@media (max-width: 1024px) {
  .wrapper {
    height: 90%;
    width: 33%;
    /* overflow: hidden; */
    display: flex;
    align-items: center;
    flex-direction: column;

    border: 1px solid var(--tuatara);
  }
  .bt-prev {
    margin-left: 0.8em;
  }
  .bt-next {
    margin-right: 0.8em;
  }
}
@media (max-width: 992px) {
}

@media (max-width: 768px) {
}
@media (max-width: 576px) {
}