/* Custom Styles */
@import url('https://fonts.googleapis.com/css2?family=Dongle:wght@300&family=Gamja+Flower&family=Gowun+Dodum&display=swap');
/* 기본 스타일 유지 및 추가 */
body {
    font-family: Arial, sans-serif;
    font-family: "Gowun Dodum", sans-serif;
    margin: 0;
    padding: 0;
}

h1 {
    color: #333333;
    font-size: 1.5rem; /* Bootstrap의 기본 폰트 크기와 조정 */
}

#result h2 {
    color: #333333;
}

#investment-details h3 {
    color: #333333;
}

#investment-details img {
    width: 50px;
    height: 50px;
    border-radius: 5px;
}

#animation img {
    width: 100px;
}
.adsense-container {
    width: 100%;
    max-width: 728px; /* 광고 최대 너비 설정 */
    margin: 20px auto; /* 중앙 정렬 및 상하 마진 설정 */
}
@media (max-width: 768px) {
    #animation img {
        width: 80px;
    }
}

/* 그래프 컨테이너 조정 */
#charts .card-body {
    position: relative;
    height: 500px; /* 원하는 세로 높이로 설정 */
    width: 100%;
}

@media (min-width: 768px) {
    #charts .card-body {
        height: 600px; /* 더 큰 화면에서 높이 증가 */
    }
}

/* 애니메이션 클래스 */
.bounce {
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-30px); }
    60% { transform: translateY(-15px); }
}

.shake {
    animation: shake 0.5s infinite;
}
@media (max-width: 600px) {
    .adsense-container {
        max-width: 100%; /* 모바일에서는 전체 너비 사용 */
    }
}
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/* 추가적인 고정 너비 클래스 (필요 시 사용) */
.fixed-width {
    width: 100%;
}

.fixed-width-75 {
    width: 75%;
}

.fixed-width-50 {
    width: 50%;
}