body {
    margin: 0;
    overflow-x: hidden;
    background: linear-gradient(to bottom, #03192e 0%, #29396e 100%);
    font-family: 'Arial', sans-serif;
    color: #fff;
    min-height: 100vh;
}

.container{
    max-width :1w 200px;
    margin :0px auto;
    padding:20px;
    position:relative;
    z-index:2;
}

.header{
    text-align: center;
    padding: 40px 0;
}

.scene{
    position:relative;
    height:400px;
    margin:40px 0;
    display: flex;
    justify-content:center;

}

.content-section{
    background:rgba(255,255,255,0.1);
    border-radius:15px;
    padding:30px;
    margin: 20px;
    backdrop-filter: blur(5px);

}

.info-grid{
    display:grid;
    grid-template-columns:repeat(autofit, minmax(300px,1fr));
    gap:20px;
    margin-top: 40px;
}

h1{
    font: size 3em;
    color: #fff;
    text-shadow :0 0 10px rgba(255,255,255,0.5);
    margin-bottom: 20px;
}

h2{
    color:#ffeb3b;
    margin-bottom: 15px;
}

p{
    line-height:1.6;
    margin-bottom: 15px;
}

.star{
    position:fixed;
    background-color: white;
    width:2px;
    height:2px;
    border-radius:50%;
    animation:twinkle infinite;
    z-index: 1;

}
.star:nth-child(1){bottom:20%;left:10%;height: 3px; width: 3px;animation:twinkle 3s infinite;}
.star:nth-child(2){bottom:45%;left:40%;height: 3.5px; width: 3.5px;animation:twinkle 2.5s infinite 1s;}
.star:nth-child(3){bottom:60%;left:50%;height: 3px; width: 3px;animation:twinkle 1s infinite 3s;}
.star:nth-child(51){bottom:200%;left:10%;height: 3px; width: 3px;animation:twinkle 3s infinite 2s;}
.star:nth-child(41){bottom:70%;left:10%;height: 6px; width: 6px;animation:twinkle 4s infinite 3s;}
.star:nth-child(31){bottom:60%;left:10%;height: 5px; width: 5px;animation:twinkle 5s infinite 5s;}
.star:nth-child(21){top:50%;left:10%;height: 4px; width: 4px;animation:twinkle 2s infinite 6s;}
.star:nth-child(19){top:40%;left:3%;height: 6px; width: 6px;animation:twinkle 1.5s infinite 7s;}
.star:nth-child(18){top:30%;left:10%;height: 8px; width: 8px;animation:twinkle 3s infinite 8s;}
.star:nth-child(17){top:50%;left:50%;height: 2px; width: 2px;animation:twinkle 8s infinite 3s;}
.star:nth-child(16){top:80%;left:100%;height: 2px; width: 2px;animation:twinkle 3s infinite 4s;}
.star:nth-child(4){bottom:45%;left:40%;height: 4px; width: 4px;animation:twinkle 2s infinite 2s;}

.star:nth-child(11) { top: 30%; left: 2%; width: 2px; height: 2px; animation: twinkle 5s infinite 1.5s; }
.star:nth-child(22) { top: 60%; left: 3%; width: 4px; height: 4px; animation: twinkle 6s infinite 3s; }

/* Edge stars - Right edge */
.star:nth-child(23) { top: 35%; right: 2%; width: 3px; height: 3px; animation: twinkle 7s infinite 2.5s; }
.star:nth-child(14) { top: 55%; right: 3%; width: 2px; height: 2px; animation: twinkle 4s infinite 1s; }


.star:nth-child(25) { top: 80%; left: 45%; width: 4px; height: 4px; animation: twinkle 8s infinite 0.5s; }
.star:nth-child(26) { top: 40%; left: 60%; width: 3px; height: 3px; animation: twinkle 5s infinite 2s; }


.star:nth-child(7){top:40%;left:70%;height: 5px; width:5px; animation:twinkle 5s infinite 5s;}
.star:nth-child(8){top:50%;left:80%;height: 3.6px; width:3.6px; animation:twinkle 7s infinite;}
.star:nth-child(5){top:50%;left:30%;height: 5px; width:5px; animation:twinkle 8s infinite 7s;}
.star:nth-child(9){top:75%;left:30%;height: 4.5px; width:4.5px; animation:twinkle 4s infinite;}
.star:nth-child(10){top:50%;left:10%;height: 2.5px; width:2.5px; animation:twinkle 3s infinite 10s;}
.star:nth-child(11){top: 30%;left: 2%;width: 2px;height: 2px;animation:twinkle 3s infinite 1.5s;}
.star:nth-child(11){top: 30%;left: 2%;width: 2px;height: 2px;animation:twinkle 3s infinite 1.5s;}
.star:nth-child(14){top: 50%;left: 12%;width: 3px;height: 3px;animation:twinkle 3s infinite 1.5s;}
.star:nth-child(8){top:15%;left:80%;height: 3.6px; width:3.6px; animation:twinkle 7s infinite;}
.star:nth-child(5){top:20%;left:30%;height: 5px; width:5px; animation:twinkle 8s infinite 7s;}
.star:nth-child(9){top:18%;left:30%;height: 4.5px; width:4.5px; animation:twinkle 4s infinite;}



/* gallery photoframe-image interaction */
.gallery{
    --g:6px; 
    /* g is gap inknow using first time */
    display: grid;
    width:450px;
    aspect-ratio: 1;
    grid:auto-flow 1fr /repeat(3, 1fr);
    gap:var(--g);
    margin:40px auto;
}

.gallery img{
    width:100%;
    height: 100%;
    object-fit:cover;
    filter:grayscale();
    cursor:pointer;
    transition:0.5s;
}

.gallery img:hover{
    filter:grayscale(0);
}
.gallery img:nth-child(2){
    grid-area: 1 / 2 / span 2 / span 2 ;
    clip-path: polygon(0 0, 100% 0,100% 100%, calc(50% + var(--g) /4) 100%, 0 calc(50% - var(--g) / 4));

}

.gallery img:nth-child(3){
    grid-area: 2 / 1 / span 2 / span 2;
    clip-path: polygon(0 0 ,calc(50% - var(--g) /4) 0,100% calc(50% + var(--g)/4), 100% 100%, 0 100%);
}



@keyframes twinkle{
    0% {
        opacity:0.2;
        transform:scale(0.5);
        box-shadow:0 0 0 0 rgba(255,255,255,0);
    }
    50%{
        opacity:1;
        transform:scale(1);
        bax-shadow: 0 0 10 2px rgba(255,255,255,0.8);
    }
    100%{
        opacity:0.2;
        transform:scale(0.5);
        bax-shadow:0 0 0 0 rgba(255,255,2550);
    }
}