.fancy-button {
    padding: 20px 50px;
    font-size: 36px;
    text-transform: uppercase;
    color: #fff;
    background-image: linear-gradient(to right, #f06, #a6f);
    border: none;
    border-radius: 25px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
}

.fancy-button:hover {
    background-image: linear-gradient(to left, #f06, #a6f);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.fancy-button:active {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(0);
}


/* 기본 스타일 */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    text-align: center; /* 모든 요소를 중앙에 배치 */
}

img {
    max-width: 100%; /* 이미지가 컨테이너 너비를 초과하지 않도록 설정 */
    height: auto; /* 이미지의 비율을 유지 */
}


/* 모바일 환경 스타일 */
@media (max-width: 768px) {
    .fancy-button {
        width: 90%; /* 모바일에서는 버튼 너비를 화면에 맞게 조정 */
        margin: 10px auto; /* 상하 마진 조정 및 자동 좌우 마진으로 중앙 정렬 */
        padding: 15px 0; /* 패딩으로 버튼 높이 조정 */
    }
}

/* PC 환경 스타일 */
@media (min-width: 769px) {
    .fancy-button {
        margin: 20px 25px; /* PC에서는 버튼 간격을 넓힘 */
        padding: 10px 40px; /* 패딩으로 버튼 크기 조정 */
    }
}