@font-face {
  font-family: "MaruBuri-Regular";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/MaruBuri-Regular.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

html {
  width: 100%;
  height: 100%;
  justify-content: center;
  font-family: "MaruBuri-Regular";
}
html::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera*/
}

body {
  font-family: "MaruBuri-Regular";
  color: #726c69;
}
p {
  font-family: "MaruBuri-Regular";
  color: #726c69;
}
a {
  font-family: "MaruBuri-Regular";
  color: #726c69;
  font-weight: 300;
}
.container {
  text-align: center;
  /* background-color: rgb(235, 233, 226); */
  background-image: url("pattern.png");
  -ms-user-select: none;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.start {
  display: block;
  text-align: center;
  justify-content: center;
}
.start p {
  margin-top: 10vh;
}

/* .myBtn {
  border: none;
  background-color: #ffffff;
  opacity: 40%;
  height: 10vh;
  width: 40vw;
  border-radius: 1vh;
}
.myBtn:hover {
  opacity: 100%;
  transition: opacity 0.5s linear;
  background-color: #87a7aa;
  color: #ffffff;
}
.myBtn:active {
  border: none;
} */

.div1 {
  position: absolute;
  z-index: 100;
  background-color: transparent;
  opacity: 0.5;
  top: 36vh;
  left: calc(50% - 23vw);
  width: 21vw;
  height: 21vw;
}
.div2 {
  position: absolute;
  z-index: 100;
  background-color: transparent;
  opacity: 0.5;
  top: 36vh;
  left: calc(50% + 2vw);
  width: 21vw;
  height: 21vw;
}

.card_container {
  display: flex;
  margin: auto;
  margin-top: 2vw;
}

.maincontainer {
  position: relative;
  width: 20vw;
  height: 20vw;

  margin: 0 2vw;

  perspective: 800px;
}
.maincontainer2 {
  position: relative;
  width: 40vw;
  height: 20vw;
  margin: 0 2vw;
  perspective: 800px;
}
.card_container2 {
  display: flex;
  margin: auto;
  margin-top: 12vw;
  width: 40vw;
}

.thecard {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 0.5s ease;
  display: block;
  perspective-origin: left;
  transform: rotateX(45deg);
}

.thecard:hover {
  transform: rotateY(180deg) rotateX(0deg);
  /* transition: opacity 0.5s linear; */
}

/*main container hover 했을 때 thecard가 뒤집어지도록*/
/* .maincontainer:hover ~ .thecard {
  transform: rotateY(180deg);
  transition: opacity 0.5s linear;
} */

/* .div1:hover ~ .thecard {
  transform: rotateY(180deg);
  transition: opacity 0.5s linear;
}
.div2:hover ~ .thecard {
  transform: rotateY(180deg);
  transition: opacity 0.5s linear;
} */

.thecard2 {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 0.5s ease;
  display: block;
  transform: rotateX(45deg) rotateX(0deg);
}
.thecard2:hover {
  transform: rotateY(180deg);
}
.thefront {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  background: rgba(255, 255, 255, 0.3);
  color: #f8f3ef;
  font-size: 18px;
  font-weight: bold;
  border-radius: 1vw;
  display: flex;
  align-items: center;
  margin: auto;
  justify-content: center;
}

.theback {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  background: #87a7aa;
  color: #f8f3ef;
  transform: rotateY(180deg);
  font-size: 1.3vw;
  font-weight: bold;
  border-radius: 1vw;
  display: flex;
  align-items: center;
  margin: auto;
  justify-content: center;
  letter-spacing: 0vw;
  line-height: 2.6vw;
  transition: 0.6s cubic-bezier(0.01, 1.69, 0.99, 0.94);
  font-weight: 300;
}
.thecard > .theback {
  font-size: 2.5vw;
  line-height: 3.2vw;
}
.theback:hover {
  letter-spacing: 0.1vw;
}
.thefront p {
  text-align: center;
}

@keyframes spin {
  from {
    transform: rotateY(0) rotateX(10deg);
  }
  to {
    transform: rotateY(-360deg) rotateX(10deg);
  }
}
.wrapper {
  width: 100%;
  perspective: 1000px;
  height: 65vh;
}

.cube {
  position: relative;
  top: 140px;
  margin: 0 auto;
  height: 220px;
  width: 160px;
  animation: spin 9s infinite linear;
  transform-style: preserve-3d;
}
.cube > div {
  position: absolute;
  height: 220px;
  width: 160px;
  opacity: 0.3;
  border-radius: 1vh;
  /* background-image: url("card.jpg"); */
  background-size: cover;
  background-color: #fff;
}
.cube > div > p {
  display: none;
  font-size: 1.5vh;
  font-weight: 700;
}

.cube > div:hover {
  opacity: 1;
  transition: opacity 0.5s linear;
  background-color: #f8f3ef;
  background-image: url("card2.png");
  background-size: cover;
}
.cube > div:hover p {
  display: block;
  color: #87a7aa;
}

.two {
  transform: translateZ(250px);
}

.three {
  transform: rotateY(45deg) translateZ(250px);
}

.four {
  transform: rotateY(90deg) translateZ(250px);
}

.five {
  transform: rotateY(135deg) translateZ(250px);
}

.seven {
  transform: rotateY(180deg) translateZ(250px);
}

.eight {
  transform: rotateY(-45deg) translateZ(250px);
}

.nine {
  transform: rotateY(-90deg) translateZ(250px);
}

.ten {
  transform: rotateY(-135deg) translateZ(250px);
}

#title {
  margin-top: 17vh;
  color: #726c69;
}
#funeral {
  color: #726c69;
}
#explain {
  color: #726c69;
  font-weight: 100;
  margin-bottom: 2vh;
}

article {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.progress {
  background: #f8f3ef;
}

.progress-bar {
  background: #87a7aa;
}

/* .btn {
  
  background-color: tomato;
  border: none;
} */

.question {
  display: none;
}

.card {
  position: relative;
  width: 30vw;
  height: 80vh;
  margin: 30px;
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
}
.card .content {
  padding: 20px;
  text-align: center;
  transform: translateY(100px);
  opacity: 0;
  transition: 0.5s;
}
.card:hover .content {
  transform: translateY(0px);
  opacity: 1;
}

.card .content .result h2 {
  font-size: 1.8em;
  color: #f8f3ef;
  z-index: 1;
}
.card .content .result h3 {
  font-size: 1em;
  color: #f8f3ef;
  font-weight: 300;
}
.result {
  display: none;
}

.result_paper {
  background-color: #f8f3ef;
  border-radius: 1vh;
  padding: 3vh;
  height: auto;
  margin-top: 10vh;
}
.img_container {
  width: 40vw;
  height: 40vh;
  background-color: transparent;
}
#result_img {
  width: 300px;
  margin: 0 auto;
  animation-name: res_img_move;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}
@keyframes res_img_move {
  0% {
    width: 300px;
  }
  50% {
    width: 310px;
  }
  100% {
    width: 300px;
  }
}

/* article.result {

} */

/* #game_button {
  margin-top: 1vh;
  border-radius: 1vh;
  height: 4vh;
  background-color: #87a7aa;
  border: none;
  padding: 1vh 1vh 1vh 1vh;
}

#game_button a {
  text-decoration: none;
  color: #f8f3ef;
} */

.mbtn {
  color: white;
  text-decoration: none;
  letter-spacing: 2.8px;
  background-color: #87a7aa;
  padding: 15px 50px;
  border-radius: 1vh;
  border: none;
  box-shadow: 1px 2.9px 16px rgba(31, 31, 31, 0.3);
  transition: 0.6s cubic-bezier(0.01, 1.69, 0.99, 0.94);
  padding-top: 2vh;
}
.mbtn:hover {
  box-shadow: 3px 4.9px 16px rgba(31, 31, 31, 0.3);
  letter-spacing: 5px;
  text-decoration: none;
  color: #f8f3ef;
}
.mbtn--clicked {
  transition: 0.6s cubic-bezier(0.01, 1.69, 0.99, 0.94);
  padding: 15px 2px;
  width: 50px;
  color: transparent;
  z-index: -10;
  text-decoration: none;
  color: #f8f3ef;
}

a .mbtn {
  margin-top: 1vh;
}
.no-drag {
  -ms-user-select: none;
  -moz-user-select: -moz-none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}
.footer_p {
  /* position: absolute; */
  z-index: 1000;
  /* text-align: center; */
  font-size: 2vh;
  line-height: 3.6vh;
  margin-top: 24vh;
}
.footer {
  background-color: #f8f3ef;
  width: 120vw;
  height: 30vh;
  position: absolute;
  margin-top: 110vh;
  margin-left: calc(50% - 80vw);

  /* border-radius: 20vh 20vh 0 0; */
}