/* styles.css */

/* 전체 화면 스타일 */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-image: url("images/background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* 배경 이미지를 고정으로 설정 */
}

/* screen 영역 스타일 */
.screen {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.card {
  display: inline-block;
  /* max-width: calc(100vw - 20px); 최대 가로 사이즈 설정 */
  max-width: calc(600px - 40px); /* 최대 가로 사이즈 설정 */
  margin: 20px;
  padding: 20px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.85); /* 반투명한 배경 색상 설정 */
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* 그림자 효과 추가 */
}

/* 시작 화면 스타일 */
#start-screen {}

#start-screen .card {}

#start-screen h1 {
  font-size: 24px;
  margin-bottom: 20px;
}

#start-screen img {
  width: 200px;
  margin-bottom: 20px;
  border-radius: 50%; /* 이미지를 원형으로 만듦 */
  animation: wobble 5s infinite;
}

@keyframes wobble {
  0% {
    transform: rotate(0deg); /* 기본 회전 각도 */
  }
  15% {
    transform: rotate(-1deg); /* 왼쪽으로 기울어짐 */
  }
  35% {
    transform: rotate(1deg); /* 오른쪽으로 기울어짐 */
  }
  50% {
    transform: rotate(-3deg); /* 왼쪽으로 기울어짐 */
  }
  75% {
    transform: rotate(5deg); /* 오른쪽으로 기울어짐 */
  }
  100% {
    transform: rotate(0deg); /* 다시 원래 각도로 복원 */
  }
}

#start-screen p {
  font-size: 16px;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

#start-button {
  background-color: #007bff;
  color: #fff;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  padding: 10px 20px;
  margin: 20px 0;
}

/* 질문 화면 스타일 */
#question-screen {}

#question-screen .card {}

#question-counter {
  text-align: left;
}

button.answer-button {
  display: block;
  margin: 20px auto;
  padding: 5px;
  font-size: 1.1rem;
  min-width: 200px;
}

/* 결과 화면 스타일 */
#result-screen {}

#result-screen .card {
  max-width: 600px;
}

#result-screen button {
  display: block,
}

#result-image {
  max-width: 100%;
}

#result-role {
  padding: 20px 5px;
  margin: 20px 0;
  border: 1px #AAA dashed;
  border-radius: 10px;
}

#result-description, #result-mate {
  margin-top: 20px;
  line-height: 140%;
  text-align: left;
}

#result-screen button {
  display: block;
  min-width: 200px;
  padding: 15px 10px;
  margin: 20px auto;
  font-size: 1.2rem;
  border-radius: 10px;
}

/* 기타 모바일 화면에 최적화된 스타일링 */
/* 추가적인 스타일링 요구사항에 따라 구현 가능 */