/* Mizuyang Shrine CSS */

*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%}
body{
font-family:"Segoe UI",sans-serif;
background:url("bg.jpg") center/cover fixed no-repeat;
color:#333;
overflow-x:hidden;
}

.topbar{
position:fixed;top:0;left:0;width:100%;height:72px;
display:flex;justify-content:center;align-items:center;
background:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.18));
backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
border-bottom:1px solid rgba(255,255,255,.45);
box-shadow:0 8px 30px rgba(0,0,0,.25);
z-index:1000;
}
.topbar h1{
font-size:48px;font-weight:300;letter-spacing:2px;
color:#444;text-shadow:0 1px #fff,0 0 10px rgba(255,255,255,.7);
}

.wrapper{
position:relative;
width:820px;
max-width:95%;
margin:120px auto;
min-height:420px;
}

.render-wrap{
position:absolute;
left:-20px;
bottom:0;
animation:float 5s ease-in-out infinite;
z-index:5;
}
.render{
width:310px;
display:block;
filter:drop-shadow(0 0 12px rgba(0,170,255,.35))
drop-shadow(0 0 28px rgba(0,170,255,.2));
}
.render:hover{
animation:jelly .7s ease;
filter:drop-shadow(0 0 18px rgba(150,220,255,.9))
drop-shadow(0 0 40px rgba(0,170,255,.45));
}

.textbox{
margin-left:260px;
width:500px;
height:380px;
border-radius:10px;
overflow:hidden;
border:1px solid #4d83d8;
background:#f6f8fc;
box-shadow:
0 0 14px rgba(0,170,255,.35),
0 0 34px rgba(0,170,255,.18),
0 12px 24px rgba(0,0,0,.25);
}
.textbox::before{
content:"About";
display:flex;
align-items:center;
height:32px;
padding-left:12px;
color:#fff;
font-weight:bold;
font-size:14px;
background:linear-gradient(#6db6ff,#2d7ef0 55%,#1d63d7);
text-shadow:0 1px rgba(0,0,0,.35);
border-bottom:1px solid #9bc6ff;
}

.content{
height:calc(100% - 32px);
overflow-y:auto;
padding:18px;
line-height:1.7;
background:#f7f7f7;
}
.content h2{margin-bottom:10px;font-size:28px}
.content h3{margin:18px 0 10px}
.content p{margin-bottom:12px}
.content ul{margin-left:20px}
.content li{margin-bottom:8px}

.content::-webkit-scrollbar{width:10px}
.content::-webkit-scrollbar-thumb{
background:#4f97ff;border-radius:999px}
.content::-webkit-scrollbar-track{background:#ececec}

@keyframes float{
0%{transform:translateY(0) rotate(-1deg)}
50%{transform:translateY(-8px) rotate(1deg)}
100%{transform:translateY(0) rotate(-1deg)}
}
@keyframes jelly{
0%{transform:scale(1)}
25%{transform:scaleX(1.08) scaleY(.92)}
45%{transform:scaleX(.92) scaleY(1.08)}
65%{transform:scaleX(1.04) scaleY(.96)}
100%{transform:scale(1)}
}

@media(max-width:900px){
.wrapper{width:100%;display:flex;flex-direction:column;align-items:center}
.render-wrap{position:relative;left:0;margin-bottom:-35px}
.textbox{margin-left:0;width:95%;max-width:500px}
.topbar h1{font-size:34px}
}