*{
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
body{
margin:0;
background:#010208;
color:white;
font-family:Arial,Helvetica,sans-serif;
overflow-x:hidden;
}
/* =========================================
PAGE
========================================= */
.stars-quiz-page{
position:relative;
min-height:100vh;
padding:65px 20px 100px;
overflow:hidden;
background:
radial-gradient(
circle at 50% 15%,
rgba(100,130,255,.16),
transparent 42%
),
radial-gradient(
circle at 20% 70%,
rgba(80,100,220,.08),
transparent 35%
),
#010208;
}
/* =========================================
STARS
========================================= */
.stars,
.stars-small{
position:fixed;
inset:-25%;
pointer-events:none;
z-index:0;
}
.stars{
opacity:.4;
background-image:
radial-gradient(
circle,
rgba(255,255,255,.9) 1px,
transparent 1px
);
background-size:75px 75px;
transition:transform 1.5s ease;
}
.stars-small{
opacity:.17;
background-image:
radial-gradient(
circle,
rgba(255,255,255,.8) 1px,
transparent 1px
);
background-size:32px 32px;
transition:transform 2s ease;
}
/* =========================================
HEADER
========================================= */
.header{
position:relative;
z-index:5;
max-width:900px;
margin:auto;
text-align:center;
}
.return{
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 20px;
margin-bottom:40px;
color:rgba(255,255,255,.7);
border:1px solid rgba(255,255,255,.22);
text-decoration:none;
font-size:9px;
letter-spacing:3px;
transition:.35s ease;
}
.return:hover{
color:#010208;
background:white;
border-color:white;
transform:translateY(-4px);
}
.label{
margin-bottom:18px;
color:rgba(170,190,255,.55);
font-size:10px;
letter-spacing:5px;
}
h1{
margin:0;
font-size:clamp(43px,8vw,85px);
line-height:.9;
letter-spacing:6px;
}
.subtitle{
max-width:720px;
margin:28px auto 0;
color:rgba(255,255,255,.52);
font-size:14px;
line-height:1.8;
}
/* =========================================
QUIZ CONTAINER
========================================= */
.quiz-container{
position:relative;
z-index:5;
width:min(850px,100%);
margin:70px auto 0;
padding:35px;
border:1px solid rgba(255,255,255,.1);
background:rgba(255,255,255,.025);
transition:.8s ease;
}
/* =========================================
QUIZ TOP
========================================= */
.quiz-top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:15px;
}
.question-number{
color:rgba(255,255,255,.45);
font-size:9px;
letter-spacing:3px;
}
.difficulty{
padding:7px 12px;
border:1px solid rgba(255,255,255,.15);
color:rgba(255,255,255,.5);
font-size:8px;
letter-spacing:2px;
}
/* =========================================
PROGRESS
========================================= */
.progress{
width:100%;
height:2px;
margin-bottom:45px;
background:rgba(255,255,255,.08);
overflow:hidden;
}
.progress-bar{
width:0%;
height:100%;
background:white;
box-shadow:0 0 10px rgba(255,255,255,.5);
transition:width .5s ease;
}
/* =========================================
QUESTION
========================================= */
.question{
margin-bottom:35px;
font-size:clamp(20px,3vw,30px);
line-height:1.4;
letter-spacing:.4px;
}
/* =========================================
ANSWERS
========================================= */
.answers{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px;
}
.answer{
min-height:70px;
padding:18px 20px;
text-align:left;
color:rgba(255,255,255,.7);
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.02);
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
cursor:pointer;
transition:.3s ease;
}
.answer:hover{
color:white;
border-color:rgba(150,180,255,.45);
background:rgba(100,130,255,.06);
transform:translateY(-3px);
}
.answer.correct{
color:white;
border-color:rgba(100,220,150,.7);
background:rgba(60,180,110,.12);
box-shadow:0 0 20px rgba(60,180,110,.08);
}
.answer.wrong{
color:white;
border-color:rgba(255,90,90,.7);
background:rgba(220,50,50,.12);
box-shadow:0 0 20px rgba(220,50,50,.08);
}
.answer.disabled{
pointer-events:none;
}
/* =========================================
NEXT
========================================= */
.next-area{
display:flex;
justify-content:flex-end;
margin-top:25px;
}
.next-button{
display:none;
padding:13px 25px;
color:rgba(255,255,255,.8);
border:1px solid rgba(255,255,255,.2);
background:transparent;
font-family:Arial,Helvetica,sans-serif;
font-size:9px;
letter-spacing:3px;
cursor:pointer;
transition:.3s ease;
}
.next-button:hover{
color:#010208;
background:white;
border-color:white;
transform:translateY(-3px);
}
/* =========================================
RESULT
========================================= */
.result{
display:none;
position:relative;
text-align:center;
min-height:500px;
padding:25px 10px 15px;
overflow:hidden;
}
.result::before{
content:"";
position:absolute;
width:360px;
height:360px;
left:50%;
top:43%;
transform:translate(-50%,-50%);
border-radius:50%;
background:
radial-gradient(
circle,
rgba(130,160,255,.2),
rgba(70,100,230,.07) 38%,
transparent 70%
);
filter:blur(5px);
animation:cosmicGlow 4s ease-in-out infinite;
pointer-events:none;
}
@keyframes cosmicGlow{
0%,100%{
transform:
translate(-50%,-50%)
scale(.82);
opacity:.55;
}
50%{
transform:
translate(-50%,-50%)
scale(1.18);
opacity:1;
}
}
/* =========================================
STAR ICON
========================================= */
.completion-icon{
position:relative;
width:105px;
height:105px;
margin:5px auto 32px;
border-radius:50%;
background:
radial-gradient(
circle,
#ffffff 0%,
#dbe6ff 28%,
#8faeff 58%,
#5575ff 100%
);
box-shadow:
0 0 25px rgba(150,180,255,.75),
0 0 65px rgba(90,120,255,.4),
0 0 120px rgba(60,80,255,.18);
animation:
starAppear 1s ease forwards,
starFloat 4s ease-in-out 1s infinite;
z-index:2;
}
.completion-icon::before{
content:"";
position:absolute;
inset:-17px;
border-radius:50%;
border:1px solid rgba(160,190,255,.4);
box-shadow:0 0 20px rgba(130,160,255,.3);
animation:starRing 7s linear infinite;
}
.completion-icon::after{
content:"";
position:absolute;
inset:-29px;
border-radius:50%;
border:1px dashed rgba(190,210,255,.16);
animation:starRingReverse 12s linear infinite;
}
@keyframes starAppear{
from{
opacity:0;
transform:
scale(.2)
rotate(-60deg);
}
to{
opacity:1;
transform:
scale(1)
rotate(0);
}
}
@keyframes starFloat{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-8px);
}
}
@keyframes starRing{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
@keyframes starRingReverse{
from{
transform:rotate(360deg);
}
to{
transform:rotate(0deg);
}
}
/* =========================================
RESULT TEXT
========================================= */
.result-label{
position:relative;
z-index:2;
margin-bottom:18px;
color:rgba(170,190,255,.6);
font-size:10px;
letter-spacing:6px;
animation:fadeUp .8s ease .2s both;
}
.result-title{
position:relative;
z-index:2;
margin-bottom:12px;
font-size:clamp(32px,7vw,65px);
letter-spacing:5px;
animation:titleAppear 1s ease .35s both;
}
@keyframes titleAppear{
from{
opacity:0;
transform:translateY(20px);
letter-spacing:15px;
}
to{
opacity:1;
transform:translateY(0);
letter-spacing:5px;
}
}
.score{
position:relative;
z-index:2;
margin-bottom:22px;
font-size:25px;
font-weight:bold;
letter-spacing:3px;
animation:fadeUp .8s ease .55s both;
}
.result-text{
position:relative;
z-index:2;
max-width:650px;
margin:0 auto 30px;
color:rgba(255,255,255,.5);
font-size:13px;
line-height:1.8;
animation:fadeUp .8s ease .7s both;
}
@keyframes fadeUp{
from{
opacity:0;
transform:translateY(15px);
}
to{
opacity:1;
transform:translateY(0);
}
}
/* =========================================
SCORE BAR
========================================= */
.final-score-bar{
position:relative;
z-index:2;
width:min(500px,90%);
height:3px;
margin:0 auto 35px;
background:rgba(255,255,255,.08);
overflow:hidden;
animation:fadeUp .8s ease .85s both;
}
.final-score-fill{
width:0%;
height:100%;
background:white;
box-shadow:
0 0 12px
rgba(180,200,255,.9);
transition:
width 1.8s cubic-bezier(.2,.8,.2,1);
}
/* =========================================
RESULT BUTTONS
========================================= */
.result-buttons{
position:relative;
z-index:2;
display:flex;
justify-content:center;
gap:12px;
flex-wrap:wrap;
animation:fadeUp .8s ease 1s both;
}
.result-button{
padding:13px 23px;
color:rgba(255,255,255,.75);
border:1px solid rgba(255,255,255,.2);
background:transparent;
text-decoration:none;
font-family:Arial,Helvetica,sans-serif;
font-size:9px;
letter-spacing:2px;
cursor:pointer;
transition:.3s ease;
}
.result-button:hover{
color:#010208;
background:white;
border-color:white;
transform:translateY(-3px);
}
/* =========================================
PARTICLES
========================================= */
.final-particle{
position:absolute;
width:3px;
height:3px;
border-radius:50%;
background:white;
pointer-events:none;
opacity:0;
animation:particleFly 2.5s ease-out forwards;
}
@keyframes particleFly{
0%{
opacity:0;
transform:
translate(0,0)
scale(.2);
}
15%{
opacity:1;
transform:
translate(0,0)
scale(1);
}
100%{
opacity:0;
transform:
translate(
var(--x),
var(--y)
)
scale(.2);
}
}
/* =========================================
FOOTER
========================================= */
.footer{
position:relative;
z-index:5;
margin-top:35px;
text-align:center;
color:rgba(255,255,255,.25);
font-size:9px;
letter-spacing:4px;
}
/* =========================================
MOBILE
========================================= */
@media(max-width:600px){
.stars-quiz-page{
padding:50px 15px 80px;
}
.quiz-container{
padding:25px;
}
.answers{
grid-template-columns:1fr;
}
.question{
font-size:20px;
}
.completion-icon{
width:85px;
height:85px;
}
.result{
min-height:550px;
}
}