/* ======================================
   🌙 Cyber-Sas-Studio v2.0
   Style System
====================================== */


*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;

}



html{

scroll-behavior:smooth;

}



body{

min-height:100vh;

color:white;

background:

linear-gradient(
rgba(0,0,0,.78),
rgba(10,0,35,.92)
),

url("https://images.unsplash.com/photo-1470770841072-f978cf4d019e")

center/cover fixed;


overflow-x:hidden;

opacity:0;

transition:1s;

}



/* PAGE LOAD */

body.loaded{

opacity:1;

}




/* 🌙 MOON */

body::before{


content:"";

position:fixed;


width:230px;

height:230px;


background:white;

border-radius:50%;


top:70px;

right:120px;


box-shadow:

0 0 40px white,

0 0 100px #8a2be2;


opacity:.8;


z-index:-1;


}





/* HEADER */


header{

text-align:center;

padding:120px 20px 80px;


animation:intro 1s;

}




header h1{


font-size:65px;

color:#e8d5ff;


text-shadow:

0 0 15px #8a2be2,

0 0 50px #8a2be2;


}



header p{


font-size:24px;

margin-top:20px;

color:#ddd;


}





/* NAV */


nav{

margin-top:45px;

}



nav a,
nav button{


color:white;

text-decoration:none;


padding:15px 32px;


margin:10px;


border:

1px solid #a66cff;


border-radius:25px;


background:

rgba(20,0,40,.65);


display:inline-block;


cursor:pointer;


transition:.35s;


backdrop-filter:blur(10px);


}



nav a:hover,
nav button:hover{


background:#8a2be2;


box-shadow:

0 0 30px #8a2be2;


transform:

translateY(-5px);


}




/* SECTIONS */


section{


padding:

60px 10%;


}



h2{


font-size:45px;


color:#d7bfff;


text-shadow:

0 0 20px #8a2be2;


}




/* CARDS */


.card{


margin-top:35px;


padding:35px;


background:


rgba(5,0,15,.75);


border:

1px solid #7b2cff;


border-radius:25px;


box-shadow:

0 0 30px rgba(123,44,255,.35);


backdrop-filter:

blur(15px);


transition:.35s;


transform-style:preserve-3d;


}



.card:hover{


box-shadow:


0 0 40px #8a2be2;


}





.featured{


border:

2px solid #b36bff;


}




.card h3{


font-size:28px;

margin-bottom:15px;


color:#f0ddff;


}




.card p{


line-height:1.6;

color:#ddd;


}




.card strong{


display:inline-block;

margin-top:20px;


}




.card span{


color:#ffcc00;


}




/* LIST */


li{

margin:10px;

}





/* BUTTONS */


.card button{


padding:

15px 40px;


background:

#080014;


color:white;


border:

2px solid #9b59ff;


border-radius:18px;


cursor:pointer;


font-size:18px;


transition:.3s;


}



.card button:hover{


background:#9b59ff;


box-shadow:

0 0 30px #9b59ff;


transform:

scale(1.08);


}





/* NIGHTFALL */


.nightfall{


border-color:#00ffff;


box-shadow:


0 0 30px cyan;


}



.nightfall h3{


color:#7fffff;


text-shadow:

0 0 15px cyan;


}



.nightfall button{


border-color:#00ffff;


}



.nightfall button:hover{


background:#00ffff;


color:black;


box-shadow:

0 0 30px cyan;


}





/* FOOTER */


footer{


position:fixed;


bottom:20px;


right:25px;


color:white;


opacity:.8;


letter-spacing:3px;


font-size:14px;


}





/* SNOW */


.snow span{


position:fixed;


top:-20px;


color:white;


pointer-events:none;


animation:fall linear infinite;


}



@keyframes fall{


from{

transform:translateY(-50px);

}


to{

transform:translateY(110vh);

}


}





/* ABOUT WINDOW */


.about-box{


position:fixed;


top:0;

left:0;


width:100%;

height:100%;


background:

rgba(0,0,0,.8);


backdrop-filter:

blur(10px);


display:none;


align-items:center;


justify-content:center;


z-index:20;


}





.about-content{


width:80%;


max-width:700px;


background:

rgba(8,0,16,.95);


border:

2px solid #9b59ff;


border-radius:30px;


padding:45px;


box-shadow:


0 0 60px #8a2be2;


animation:

appear .5s;


}



.about-content p{


margin:15px 0;


line-height:1.7;


}



.about-content h3{


color:#d7bfff;


}





#closeAbout{


margin-top:25px;


padding:12px 35px;


background:#8a2be2;


color:white;


border:none;


border-radius:15px;


cursor:pointer;


}




@keyframes appear{


from{

transform:scale(.7);

opacity:0;

}


to{

transform:scale(1);

opacity:1;

}


}




@keyframes intro{


from{

transform:translateY(-40px);

opacity:0;

}


to{

transform:translateY(0);

opacity:1;

}


}





/* MOBILE */


@media(max-width:700px){


header h1{

font-size:40px;

}


header p{

font-size:18px;

}



section{

padding:40px 5%;

}



.card{

padding:25px;

}



nav a,
nav button{


padding:12px 20px;


}



}