body {
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.text {
    color: red;
    font-size: 2rem;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 9999;
    gap: 5px;
    
}


#image-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.container {
    display: flex;
    justify-content: center;  /* 가로 중앙 정렬 */
    align-items: center;  /* 세로 중앙 정렬 */
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* 정확한 중앙 정렬 */
}

#random-image {
    max-width: 90vw;  /* 화면 너비의 최대 90% */
    max-height: 80vh;  /* 화면 높이의 최대 80% */
    width: auto;  /* 원본 비율 유지 */
    height: auto;
    opacity: 0.7; /* 0 = 완전 투명, 1 = 완전 불투명 */
    box-shadow: 0 0 50px 30px rgba(0, 0, 0, 0.3);
    -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
    mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 70%);
}

@media (max-width: 600px) {  /* 모바일 화면 */
    #random-image {
        max-width: 95vw;
        max-height: 60vh;
    }
}

@media (min-width: 1024px) {  /* 데스크톱 화면 */
    #random-image {
        max-width: 70vw;
        max-height: 70vh;
    }
}