body {
  background-color: rgb(161, 204, 209);
  margin: 0;
  height: 10vh;
  max-width: 100%;
  
}

.container {
  max-width: 60%;
  margin: 0 auto;
  padding: 10px; /* 패딩을 줄임 */
  background-color: white;
  border-radius: 10px;
  text-align: center;
  /* box-sizing: border-box; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 90vh; /* 모바일 버전에서 세로 공간을 줄임 */
}

@media (max-width: 1450px) {
  .body {
    max-width: 50%; /* 가로 길이를 줄임 */
    padding: 10px; /* 패딩을 다시 추가 */
    min-height: 30vh; /* 세로 길이를 줄임 */
  }
}

.title-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.title-section h3,
.title-section h1 {
  margin: 0;
}

.question,
.result {
  /* 내용이 화면에 가득 차도록 설정 */
  flex: 1; /* 나머지 공간을 채우도록 설정 */
  overflow: hidden; /* 내용이 넘칠 경우 스크롤바를 숨김 */
}

.question {
  border: 2px solid rgb(124, 157, 150);
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 10px;
}

body {
    background-color: rgb(161, 204, 209);
  }
  
  .share-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.button-container {
    display: flex;
    justify-content: center; /* 가로 정렬 */
}

.button-container button {
    margin: 5px;
}
.title-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.title-section h3,
.title-section h1 {
  margin: 0;
}

/* Adjust the width of .container to accommodate the new layout */
.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: white;
  border-radius: 10px;
  text-align: center; /* 가운데 정렬 */
}
h1 {
  color: #168,64,50;
}
h3 {
  color: #168,64,50;
}
  
  .question {
    border: 2px solid rgb(124, 157, 150);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 10px;
  }
  
  .question p {
    font-weight: bold;
  }
  
  .question label {
    display: block;
    margin-top: 10px;
  }
  
  .result {
    border: 2px solid rgb(124, 157, 150);
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
  }
  
  .result h2 {
    color: #168,64,50;
  }
  
  .result p {
    margin-top: 10px;
  }
  
  button {
    display: block;
    margin-top: 10px;
  }
  
  .hidden {
    display: none;
  }
  
  /* 공유 버튼 스타일 */
  .share-buttons {
    text-align: center;
  }
  
  .share-buttons button {
    margin: 5px;
    padding: 10px 20px;
    background-color: rgb(244, 242, 222);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  
  .share-buttons button:hover {
    background-color: #5cb85c;
  }
  
  .custom-radio {
    display: block;
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    margin-top: 10px;
    color: black;
  }
  
  .custom-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
  }
  
  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: transparent;
    border-radius: 50%;
    display: none;
  }
  
  .custom-radio:hover {
    background-color: #E6E6FA;
  }
  
  .custom-radio input:checked ~ .checkmark {
    display: block;
  }
  
  .custom-radio .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  .custom-radio input:checked ~ .checkmark:after {
    display: block;
  }
  
  .custom-radio .checkmark:after {
    top: 7px;
    left: 7px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: white;
  }
  
  
  
  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: transparent;
  }
  
  
  
  /* ... 이전 CSS 코드들 ... */
  .custom-radio .checkmark {
    /* ... other properties ... */
    background-color: rgb(233, 179, 132); /* Set the border color to pink (#FFC0CB) */
    /* ... other properties ... */
}




.custom-radio {
    display: block;
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    margin-top: 10px;
    color: black;
    /* border: 2px solid #e1ffc0; Set the border color to pink (#FFC0CB) */
    border-radius: 5px; /* Set the border radius to make a checkbox shape */
    background-color: rgb(233, 179, 132);
}



.progress-bar {
  height: 10px;
  background-color: #f0f0f0;
  margin-bottom: 30px;
}

/* .progress-bar의 너비를 조정하여 퍼센트를 표시합니다. */
.progress-bar:after {
  content: '';
  display: block;
  height: 100%;
  background-color: rgb(117, 194, 246); /* 바 색상을 변경하려면 여기서 조정 가능 */
}




footer {
  padding: 10px 0;
  color: #fff;
  text-align: center;
  font-size: 14px;
  background-color: #61727C;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 800px;
  margin: 0 auto;
}

.footer-content h3 {
  color: #fff;
  font-size: 18px;
}

.footer-menu ul,
.footer-contact ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-menu li,
.footer-contact li {
  margin-bottom: 5px;
}

/* 링크에 밑줄 제거 */
.footer-menu li a,
.footer-contact li a {
    text-decoration: none;
    color: #fff;
}

.footer-social-media .social-media-icons {
  display: flex;
  justify-content: center;
}

.footer-social-media .social-media-icons img {
  width: 50px;
  height: 50px;
  margin: 0 5px;
  border-radius: 20%;
}



.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: #61727C;
  color: #fff;
}

.navbar ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar li {
  margin-right: 1rem;
}

.navbar a {
  color: #fff;
  text-decoration: none;
}

/* Mobile navigation styles */
@media (max-width: 1450px) {
  .navbar {
      flex-direction: column;
      align-items: flex-start;
  }

  .navbar ul {
      flex-direction: column;
  }

  .navbar li {
      margin: 0.5rem 0;
  }

  .navbar-icon {
      display: block;
      cursor: pointer;
  }

  .navbar ul {
      display: none;
  }

  .navbar.show {
      display: block;
  }
}

#startButton {
  width: 120px;
  height: 60px;
  text-align: center;
  margin: 0 auto; /* 수평으로 중앙에 배치하는 속성 */
  display: block; 
  margin-top: 30px;
  margin-bottom: 30px;
  /* background-color: rgb(160, 191, 224); /* 배경색 설정 */
  /* border: 2px solid rgb(160, 191, 224); */ */
  /* transition: background-color 0.3s ease; */
   /* 배경색 변경 시 애니메이션 효과를 적용합니다. */
  /* border-radius: 10px; */
   /* 20px 둥글게 처리하는 속성 */
  /* margin-bottom: 20px; */
}
/* hover 시 배경색 변경 */
/* #startButton:hover {
  background-color: rgb(197, 223, 248); 
  border: 2px solid rgb(197, 223, 248);
} */

#testDescription{
  margin-top: 30px;
}

/* --------------다른테스트들------------ */
#fir11 > p{
  justify-content: center;
  margin-top: 50px;
}
#image-container11 {
  display: flex; /* Flexbox 사용 */
  justify-content: center; /* 수평 가운데 정렬 */
}

/* 이미지 사이 간격 설정 */
#image-container11 a {
  margin-right: 20px;
}

/* 마지막 이미지 오른쪽 마진 제거 */
#image-container11 a:last-child {
  margin-right: 0;
}

#image-container11 > a{
  margin-top: 20px;
  text-decoration: none;
  color:black;
}

/* -------------- */
#fir12 > p{
  justify-content: center;
  margin-top: 50px;
}

#image-container12 {
  display: flex; /* Flexbox 사용 */
  justify-content: center; /* 수평 가운데 정렬 */
}

/* 이미지 사이 간격 설정 */
#image-container12 a {
  margin-right: 20px;
}

/* 마지막 이미지 오른쪽 마진 제거 */
#image-container12 a:last-child {
  margin-right: 0;
}

#image-container12 > a{
  margin-top: 20px;
  text-decoration: none;
  color:black;
}
/* --------------다른테스트들------------ */