@font-face {
    font-family: 'ClimateCrisisKR-1979';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/ClimateCrisisKR-1979.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

/* body {
  overflow: hidden;
} */

.background {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url('https://images.unsplash.com/photo-1542272201-b1ca555f8505?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80');
    position: absolute;
    overflow: hidden;
    filter: blur(3px);
    z-index: -10;
}

.background-effect-prism, .background-effect-prism-back {
    width: 100vw; 
    height: 100vh; 
    position: fixed; 
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: -1;
}

/* 파티클 스타일 */
.particle {
    position: absolute;
    width: 50px;
    height: 50px;
    display: block;
    border-radius: 100%;
    opacity: 0;
    animation-iteration-count: infinite;
    box-shadow: 10px -5px 3px rgba(255,255,255,0.2);
}

@keyframes spark1 {
    0%, 35%, 100% { opacity: 0; }
    30%, 70%, 90% { opacity: 1; }
}

@keyframes sparkmove1 {
    0% { transform: translate(0, 0) scale(1); filter: blur(4px); }
    100% { transform: translate(-900px, 1200px) scale(1.5); filter: blur(6px); }
}

@keyframes sparkmove2 {
    0% { transform: translate(0, 0) scale(1); filter: blur(1px); }
    100% { transform: translate(-600px, 800px) scale(1.2); filter: blur(3px); }
}

/* 전경 */
.background-effect-prism .particle {
    animation-name: spark1, sparkmove1;
    animation-duration: 20s;
}

/* 원경 */
.background-effect-prism-back .particle {
    animation-name: spark1, sparkmove2;
    animation-duration: 40s;
}