body {
    font-family: sans-serif;
    display: flex; /* Flexbox 레이아웃 사용 */
    justify-content: center; /* 수평 중앙 정렬 */
    align-items: center; /* 수직 중앙 정렬 */
    min-height: 100vh; /* 최소 높이를 화면 전체 높이로 설정 */
    background-color: #f4f4f4;
    margin: 0; /* body의 기본 마진 제거 */
    text-align: center; /* container 내부 요소들의 기본 text-align */
}

.container {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    /* text-align: center; body에서 이미 처리 */
    display: flex; /* 내부 요소 정렬을 위해 flex 사용 */
    flex-direction: column; /* 요소들을 세로로 정렬 */
    align-items: center; /* 내부 요소들을 수평 중앙 정렬 */
}

h1 {
    color: #333;
    margin-top: 0; /* 불필요한 상단 마진 제거 */
}

p {
    color: #555;
    line-height: 1.6;
}

button {
    background-color: #5cb85c;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block; /* inline-block으로 변경하여 width/height 적용 가능하게 */
    font-size: 16px;
    margin: 10px 5px; /* 위아래 마진 10px, 좌우 마진 5px */
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #4cae4c;
}

/* 메인 페이지 시작 버튼 */
#startButton {
    /* margin-top: 20px; /* 이미지와의 간격, 필요시 조정 */
    /* width: 50%; /* 버튼 너비, 필요시 조정 */
    /* max-width: 200px; */
}


#mainImage {
    width: 80%;
    max-width: 400px; /* 이미지 최대 너비 */
    height: auto;
    margin-bottom: 20px; /* 버튼과의 간격 */
    border-radius: 5px;
    display: block; /* block 요소로 만들어 margin: auto 적용 가능하게 */
    margin-left: auto;
    margin-right: auto;
}

.options {
    width: 100%; /* 옵션 버튼 컨테이너 너비 */
    display: flex;
    flex-direction: column;
    align-items: center; /* 옵션 버튼들도 중앙 정렬 */
}

.options button {
    display: block;
    width: 80%; /* 버튼 너비 조정 */
    max-width: 300px; /* 버튼 최대 너비 */
    margin-bottom: 10px;
    background-color: #3498db;
}

.options button:hover {
    background-color: #2980b9;
}

#characterImage {
    width: 70%;
    max-width: 300px;
    height: auto;
    margin-top: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
    border: 2px solid #ddd;
    display: block; /* block 요소로 만들어 margin: auto 적용 가능하게 */
    margin-left: auto;
    margin-right: auto;
}

#restartButton {
    background-color: #f0ad4e;
    /* width: 50%; */
    /* max-width: 200px; */
}

#restartButton:hover {
    background-color: #ec971f;
}