body {
    font-family: Arial, sans-serif;
    background-color: #f2829b;
    padding-top: 70px;
}
.special-page {
  background-size: cover; /* 배경 이미지가 컨테이너를 꽉 채우도록 설정 */
  background-position: center; /* 배경 이미지가 중앙에 위치하도록 설정 */
}

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
        font-family: 'Gilroy';
        src: url('https://cdn.jsdelivr.net/gh/repalash/gilroy-free-webfont@fonts/Gilroy-Extrabold.eot');
        src: local('Gilroy Extrabold'), local('Gilroy-Extrabold'),
        url('https://cdn.jsdelivr.net/gh/repalash/gilroy-free-webfont@fonts/Gilroy-Extrabold.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/repalash/gilroy-free-webfont@fonts/Gilroy-Extrabold.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/repalash/gilroy-free-webfont@fonts/Gilroy-Extrabold.ttf') format('truetype');
        font-weight: 800;
        font-style: normal;
    }

@font-face {
    font-family: 'GowunBatang-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunBatang-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Binggrae-Two';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Binggrae-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #545454;
  color: #f2829b; 
  text-align: center;
  padding: 10px 0;
  z-index: 1000; /* 다른 요소들 위에 표시되도록 z-index 설정 */
  font-family: 'Gilroy';
  font-size: 36pt;
}

.container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}

.name {
    color: #f2829b;
    background-color: #545454;
}

h1 {
    text-align: center;
    font-family: 'Pretendard-Regular', sans-serif;
    margin-bottom: 10px;
}

h2 {
    text-align: center;
    font-family: 'Pretendard-Regular', sans-serif;
    background-color: white;
    color: black;
    margin: 0 auto;
    font-size: 36px;
    padding-top: 15px;
}


h3 {
    text-align: center;
    background-color: white;
    color: black;
    font-family: 'Pretendard-Regular', sans-serif;
    margin-bottom: 15px;
    margin-top: 15px;
    font-size: 24px;
    padding: 10px;
}

h4 {
    font-family: 'GowunBatang-Regular';
    background-color: white;
    margin-bottom: 0;
    margin-top: 0;
    padding: 20px;
    font-size: 18px;
}

h5 {
    font-family: 'GowunBatang-Regular';
    color: #545454;
    font-size: 16px;
    font-style: italic;
    background-color: white;
    margin-bottom: 20px;
    margin-top: 0;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
}

h7 {
    font-family: 'Pretendard-Regular';
    font-size: 14px;
    margin-top: 20px;
}

#question-container {
    font-family: 'Binggrae-Two';
    font-size: 20px;
    position: relative;
    padding: 0 20px;
    margin-bottom: 30px;
    text-align: center;
    background-color: white;
    height: 140px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

#question-container p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    white-space: nowrap; /* 줄바꿈을 방지 */
    max-width: calc(100% - 40px); /* 패딩을 고려한 최대 너비 설정 */
    overflow-wrap: break-word; /* 필요한 경우 단어를 줄바꿈 */
    text-align: center;
}

#buttons-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#buttons-container button {
    height: 65px;
    width: 80%;
    font-size: 18px;
}
button {
    border-radius: 25px;
    margin: 0 auto;
    padding: 10px 20px;
    font-family: 'Pretendard-Regular';
    font-size: 16px;
    background-color: #545454;
    color: #f2829b;
    cursor: pointer;
    display: block;
    margin-bottom: 10px;
    text-align: center;
    border: 2px solid #000000;
}

#startButton {
    display: block; /* 블록 레벨 요소로 만들기 */
    margin: 0 auto; /* 수평 마진을 자동으로 설정하여 중앙 정렬 */
}


@media(hover:hover) {
button:hover {
    background-color: #f2829b;
    color: #545454;
    border: 2px solid #545454;
    }
}

@media (max-width: 600px) {
h1, h2 {
    font-size: 7vw !important;
    }

h3 {
    font-size: 4.8vw !important;
}

#question-container {
    font-size: 3.9vw !important;
    height: 90px;
    }
    
#buttons-container button {
    height: 60px;
    width: 80%;
    font-size: 3.5vw;
    }

 #question-container p {
    margin: 0;
    line-height: 1.2;
    max-width: 100%;
    text-align: center;
    }
}


#result {
    text-align: center;
}

.share-buttons-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

a.twitter-share-button, a.kakao-share-button {
    font-family: 'Pretendard-Regular';
  color: black;
  padding: 10px 20px;
  margin: 5px;
  border-radius: 25px;
  text-decoration: none;
  display: inline-block;
  border: 2px solid #000000;
  display: block;
}

a.twitter-share-button {
  background-color: #1DA1F2; /* 트위터 색상 */
}

a.kakao-share-button {
  background-color: #FEE500; /* 카카오톡 색상 */
}

a:hover {
    border: 2px solid #545454;
    background-color: #f2829b;
    color: #545454;
}

.instagram-button {
    border-radius: 25px;
    margin: 0 auto;
    padding: 10px 20px;
    font-size: 16px;
    background-color: white;
    color: #f2829b;
    cursor: pointer;
    display: block;
    margin-top: 35px;
    margin-bottom: 5px;
    text-align: center; 
}

i {
    cursor: pointer;
}

.main-image {
    display: block; /* 이미지를 블록 요소로 설정 */
    max-width: 100%; /* 이미지 최대 너비를 부모 컨테이너의 100%로 제한 */
    height: auto; /* 이미지의 높이를 자동으로 설정하여 종횡비 유지 */
    margin: 0 auto; /* 이미지를 수평 중앙에 배치 */
    margin-top: 15px;
}

#progress-container {
    width: 100%;
    background-color: #f3f3f3; /* 진행도 바의 배경색 */
    height: 10px; /* 진행도 바의 높이 */
    margin-bottom: 20px; /* 진행도 바와 질문/답변 사이의 간격 */
    border-radius: 5px; /* 진행도 바의 모서리를 둥글게 설정 */
    overflow: hidden; /* 진행 바가 모서리를 넘지 않도록 설정 */
    border: 2px solid #545454; /* 테두리 설정: 두께, 스타일, 색상 */
}

#progress-bar {
    width: 0%; /* 초기 진행도를 0%로 설정 */
    height: 100%;
    background-color: #00ddcb; /* 진행도 바의 색상 */
    transition: width 0.3s ease; /* 진행도 바의 애니메이션 효과 */
}