*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}
body{
    width:min(95%, 1400px)
    min-height:100vh;
    overflow-x:hidden;
    font-family:'Press Start 2P',cursive;
    color:white;
    background:rgba(0, 0, 0, 1);
}
header{
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    min-height:5vh;
    padding:50px 20px;
}
footer{
    padding:70px 20px;
    text-align:center;
    font-size:clamp(0.5rem,1.5vw,0.6rem);
    color:#555555;
}







.header-title{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    width:100%;
    margin:15px auto;
    padding:25px;
    text-align:center;
    position:relative;
    transition:0.3s ease;
}
.title{
    font-size:clamp(1.4rem,9vw,8rem);
    letter-spacing:clamp(2px,1vw,10px);
    text-shadow:0 0 20px rgba(255,255,255,0.6);
}
.subtitle{
    position:relative;
    top:80%;
    left:50%;
    transform:translate(-50%,-30%);
    font-size:clamp(0.7rem,2vw,0.9rem);
    color:#aaa;
    z-index:2;
}
.container{
    display:grid;
    flex-wrap:wrap;
    justify-content:center;
    width:fit-content;
    max-width:95%;
    margin:0px auto;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 5px;
}
.card{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    width:min(95%,1400px);
    margin:15px auto;
    padding:25px;
    background:rgba(0,0,0,0.4);
    border:1px solid rgba(255,255,255,0.3);
    backdrop-filter:blur(6px);
    text-align:center;
    position:relative;
    transition:0.3s ease;
}
.card:hover{
    transform:translateY(-5px);
    box-shadow:0 0 40px rgba(186,186,186,0.15);
}
.card-1,
.card-2,
.card-3{
    margin-top:15px;
    line-height:1rem;
    letter-spacing:2px;
    color:#ccc;
}
.card-1{font-size:clamp(0.6rem,2vw,0.8rem);}
.card-2{font-size:clamp(0.4rem,2vw,0.8rem);}
.card-3{font-size:clamp(0.2rem,2vw,0.8rem);}







.stars{
    position:fixed;
    inset:-50%;
    width:200%;
    height:200%;
    background:url("https://www.transparenttextures.com/patterns/stardust.png");
    opacity:0.6;
    z-index:-1;
    animation:starsMove 200s linear infinite;
}
@keyframes starsMove{
    from{background-position:0 0;}
    to{background-position:1000px 1000px;}
}
@media (max-width:450px){
    .container{
        grid-template-columns:1fr;
    }
}