body {
background:#000000;
background-image:url(images/head.jpg),url(images/bg1.jpg);
background-repeat:no-repeat,repeat-y;
background-position:left top,top left;
background-attachment:fixed;
cursor:crosshair;
font-family:'Playfair Display', serif;
color:#ffeef5;
}

#container {
width:800px;
margin-left:600px;
margin-top:150px;
}

#navi {
position:absolute;
opacity:0.95;
top:60px;
left:600px;
width:800px;
padding:14px 20px;
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
}

a.navi {
flex:1;
text-align:center;
padding:10px 14px;
font-size:20px;
text-decoration:none;
color:#fff;
border-radius:14px;
background:linear-gradient(120deg, rgba(120,0,0,.8), rgba(255,0,60,.6));
box-shadow:
0 0 10px rgba(255,0,60,.6),
inset 0 0 12px rgba(255,255,255,.05);
transition:all .3s ease;
}

a.navi:hover {
transform:translateY(-4px) scale(1.04);
background:linear-gradient(120deg, #ff002f, #ff4d6d);
box-shadow:
0 0 20px rgba(255,0,70,1),
0 0 40px rgba(255,0,70,.7);
}

.contentx {
position:relative;
padding:78px 34px;
margin-bottom:45px;
line-height:1.9;
font-size:20px;
text-align:justify;
border-radius:16px;
overflow:hidden;
background:linear-gradient(
135deg,
rgba(0,0,0,0.35) 0%,
rgba(60,0,0,0.25) 40%,
rgba(140,0,30,0.20) 75%,
rgba(255,0,60,0.15) 100%
);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
box-shadow:
0 0 18px rgba(255,0,60,.18),
inset 0 0 25px rgba(255,0,30,.06);
border:3px solid rgba(255,0,60,0.25);
}

h1 {
font-size:44px;
font-family:'Playfair Display', serif;
position:relative;
display:inline-block;
padding-bottom:10px;
background:linear-gradient(
90deg,
#000000,
#ff002f,
#ff4d6d,
#ff99aa,
#ff003c
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
text-shadow:
0 0 10px rgba(255,0,60,.6),
0 0 25px rgba(255,0,60,.4),
0 0 45px rgba(255,0,60,.2);
}
h1::after {
content:"";
position:absolute;
left:0;
bottom:0;
height:3px;
width:100%;
background:linear-gradient(
90deg,
transparent,
#ff002f,
#ff4d6d,
#ff99aa,
#ff003c,
transparent
);
box-shadow:0 0 15px rgba(255,0,60,.8);
border-radius:10px;
}

a {
color:#ff4d6d;
text-decoration:none;
position:relative;
transition:.3s;
}
a:hover {
color:#ff99aa;
text-shadow:
0 0 10px rgba(255,0,60,.8),
0 0 25px rgba(255,0,60,.5);
}
a::after {
content:"";
position:absolute;
left:0;
bottom:-2px;
width:100%;
height:1px;
background:linear-gradient(90deg, transparent, #ff003c, transparent);
opacity:.6;
transition:.3s;
}

a:hover::after {
opacity:1;
box-shadow:0 0 10px rgba(255,0,60,.8);
}

blockquote {
background:rgba(20,0,0,.85);
border-left:5px solid #ff003c;
padding:18px;
border-radius:12px;
font-style:italic;
color:#ffe6ec;
box-shadow:
0 0 20px rgba(255,0,60,.3);
}

.contentx img,
a img {
border:2px solid #ff003c;
padding:4px;
background:#000;
max-width:100%;
box-shadow:0 0 12px rgba(255,0,60,.6);
}

a img:hover {
border-color:#ff99aa;
box-shadow:0 0 20px rgba(255,0,80,.9);
}


b {
color:#ff002f;
font-weight:700;
text-shadow:
0 0 8px rgba(255,0,60,.5),
0 0 15px rgba(255,0,60,.3);
letter-spacing:0.3px;
}

i {
color:#ff99aa;
font-style:italic;
opacity:0.9;
text-shadow:
0 0 8px rgba(255,0,60,.25);
}

#footer {
margin-top:120px;
padding:70px 20px 50px;
text-align:center;
font-size:15px;
letter-spacing:2px;
color:#ff4d6d;
position:relative;
}

#footer::before {
content:"";
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
width:420px;
height:2px;
background:linear-gradient(90deg, transparent, #ff003c, #ff4d6d, #ff003c, transparent);
box-shadow:0 0 15px rgba(255,0,60,.9);
}

#footer::after {
content:"✦ ♥ ✦ ♥ ✦";
display:block;
margin-top:18px;
font-size:18px;
letter-spacing:14px;
color:#ff003c;
opacity:.9;
}

#footer a {
color:#ff4d6d;
transition:.3s;
}

#footer a:hover {
color:#ff99aa;
text-shadow:0 0 10px rgba(255,0,60,.9);
}

@media screen and (max-width: 900px) {
body {
background-image:url(images/bg.jpg);
background-repeat:repeat;
background-attachment:scroll;
}

#container {
width:auto;
margin:140px 20px 40px;
}

#navi {
position:relative;
left:auto;
top:auto;
width:auto;
margin:20px;
flex-wrap:wrap;
justify-content:center;
opacity:1;
}

#mobile-header {
width:90%;
height:260px;
background:url(images/head.jpg) center top no-repeat;
background-size:cover;
border-radius:18px;
margin:10px 20px 25px;
box-shadow:
0 10px 35px rgba(0,0,0,.9),
0 0 25px rgba(255,0,60,.6);
}

.contentx {
opacity:.97;
padding:22px;
font-size:18px;
}

h1 { font-size:30px; }
h2 { font-size:22px; }
}

input,
textarea,
select {
width:40%;
padding:12px 14px;
margin:10px 0;
font-family:'Playfair Display', serif;
font-size:16px;
color:#ffeef5;
background:#000; 
border:2px solid transparent;
border-radius:12px;
outline:none;
background-image:
linear-gradient(#000, #000),
linear-gradient(120deg, #ff003c, #ff4d6d);
background-origin:border-box;
background-clip:padding-box, border-box;
box-shadow:
0 0 10px rgba(255,0,60,.5),
inset 0 0 8px rgba(255,255,255,.05);
transition:all .3s ease;
}

input:focus,
textarea:focus,
select:focus {
background-image:
linear-gradient(#000, #000),
linear-gradient(120deg, #ff003c, #ff99aa);
box-shadow:
0 0 15px rgba(255,0,60,.9),
0 0 25px rgba(255,0,60,.6);
transform:scale(1.02);
}

textarea {
min-height:120px;
resize:vertical;
}

select {
appearance:none;
cursor:pointer;
}

.glitter-container {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
overflow:hidden;
z-index:99999;
}

.glitter {
position:absolute;
top:-20px;
width:8px;
height:8px;
border-radius:50%;
background:#ff003c;
box-shadow:
0 0 10px #ff003c,
0 0 20px #ff003c,
0 0 30px rgba(255,0,60,0.8);
animation:fall linear forwards;
}

@keyframes fall {
0% {
transform:translateY(0);
opacity:1;
}
100% {
transform:translateY(120vh);
opacity:0;
}
}