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

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

#navi {
position:absolute;
opacity:0.9;
top:60px;
left:730px;
width:780px;
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:#fff0f6;
border-radius:14px;
background:linear-gradient(120deg, rgba(255,0,80,.65), rgba(0,200,255,.35));
box-shadow:0 0 10px rgba(255,0,90,.5), inset 0 0 10px rgba(255,255,255,.05);
transition:all .35s ease;
}

a.navi:hover {
transform:translateY(-4px) scale(1.03);
background:linear-gradient(120deg, #ff0055, #00d4ff);
box-shadow:0 0 18px rgba(255,0,90,.9), 0 0 25px rgba(0,200,255,.6);
}

.contentx {
opacity:0.9;
padding:78px 34px;
margin-bottom:45px;
line-height:1.9;
font-size:20px;
text-align:justify;
top:30px;
background:rgba(10,10,15,.75);
border-radius:16px;
box-shadow:0 0 25px rgba(255,0,80,.2), 0 0 40px rgba(0,200,255,.1);
}

h1 {
font-size:42px;
font-family:'Playfair Display', serif;
background:linear-gradient(90deg, #ff0055, #ff66cc, #00d4ff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
border-bottom:2px solid #ff0055;
padding-bottom:6px;
text-shadow:0 0 10px rgba(255,0,90,.6);
}

h2 {
font-size:26px;
color:#ff66cc;
border-bottom:2px solid rgba(255,0,90,.5);
}

a {
color:#00d4ff;
text-decoration:none;
transition:.3s;
}

a:hover {
color:#ff66cc;
text-shadow:0 0 10px rgba(255,0,120,.8), 0 0 18px rgba(0,200,255,.6);
}

blockquote {
background:rgba(20,0,20,.7);
border-left:5px solid #ff0055;
padding:18px;
border-radius:12px;
font-style:italic;
color:#ffe6f5;
box-shadow:0 0 20px rgba(255,0,90,.2);
}

.contentx img,
a img {
border:2px solid #ff0055;
padding:4px;
background:#000;
max-width:100%;
box-shadow:0 0 10px rgba(255,0,90,.5);
}

a img:hover {
border-color:#00d4ff;
box-shadow:0 0 15px rgba(0,200,255,.8);
}

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

#footer::before {
content:"";
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
width:420px;
height:2px;
background:linear-gradient(90deg, transparent, #ff0055, #00d4ff, #ff0055, transparent);
box-shadow:0 0 12px rgba(255,0,90,.8);
}

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

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

#footer a:hover {
color:#ff66cc;
text-shadow:0 0 10px rgba(255,0,120,.8);
}

@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,.8), 0 0 25px rgba(255,0,90,.4);
}

.contentx {
opacity:.95;
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:#f5eaff;
background:#000; 
border:2px solid transparent;
border-radius:12px;
outline:none;


background-image:
linear-gradient(#000, #000),
linear-gradient(120deg, #ff0055, #ff66cc, #00d4ff);
background-origin:border-box;
background-clip:padding-box, border-box;

box-shadow:
0 0 10px rgba(255,0,90,.4),
0 0 15px rgba(0,200,255,.2),
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, #ff0055, #00d4ff);
box-shadow:
0 0 12px rgba(255,0,90,.7),
0 0 20px rgba(0,200,255,.5),
inset 0 0 10px rgba(255,255,255,.08);
transform:scale(1.02);
}

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

select {
appearance:none;
cursor:pointer;
}