html{position:relative;height:100%;min-height:100%}
body{
background:url('img_index/fondo-.png');
font:14px 'Parkinsans';
color:#2C2A28
}
a{
color:#C33D31;
text-decoration:1px wavy underline;
font-weight:600;
&:hover{
padding:2px 4px;
background-color:#FEE07E;
border-radius:5px
}}
img{-webkit-user-drag:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}
::-webkit-scrollbar{display:none}
html{-ms-overflow-style:none;scrollbar-width:none}

main{
width:1523px;height:auto;
margin:auto;margin-top:20px;
position:relative
}
#keyring{
position:absolute;
left:-16px;top:10px;
z-index:1;
}
#micro-blog, #meiling, #ren, .photo{
filter:drop-shadow(3px 0 0 #FFF) drop-shadow(0 3px 0 #FFF) drop-shadow(-3px 0 0 #FFF) drop-shadow(0 -3px 0 #FFF)}

#meiling{
width:320px;
position:absolute;
bottom:-10px;left:10px;
z-index:1;
transform:rotate(-5deg)
}
#ren{
width:320px;
position:absolute;
top:0;right:10px;
z-index:1;
transform:rotate(5deg)
}
#micro-blog{
width:1050px;height:850px;
margin:auto;
padding:0 25px 25px 25px;
background-image:url('img_index/fondo-.gif');
border:5px solid #FEE07E;
outline:1px solid #696969;
border-radius:20px;
display:flex;flex-wrap:wrap;
align-content:flex-end;
justify-content:space-between;
position:relative
}
.section-content{
height:760px;padding:12px;
background-color:#FEE07E;
border:1px solid #696969;
border-radius:10px
}
.section-content.i{width:300px}
.section-content.i p{margin:10px 0}
.section-content.ii{width:683px}

#ii-section-scroll{width:630px;height:695px;margin:15px 0 0 35px;padding-right:15px;overflow-y:scroll}

#center{
width:53px;height:11px;
background:linear-gradient(90deg, #D3D2D2 30%, #FFF 70%);
border:1px solid #696969;
border-radius:20px;
position:absolute;z-index:4
}
.i-ii, .i-iii{
width:17px;height:17px;
border-radius:50px;
background-color:#FFF;
border:1px solid #696969;
position:absolute;z-index:3
}
.i-i{top:3px;left:3px} .i-ii{top:0;left:0} .i-iii{top:0;right:0}
.ring{width:61px;height:15px;position:absolute}
.ring.i, .ring.ii, .ring.iii, .ring.iv, .ring.v, .ring.vi{left:328px}
.ring.i{top:100px} .ring.ii{top:150px}
.ring.iii{bottom:70px} .ring.iv{bottom:120px}
.ring.v{top:430px} .ring.vi{bottom:380px}

@font-face {font-family:'Mamba';src:url('img_index/mamba-regular.otf')}

h1, h2 font{
background:linear-gradient(#F8786C 20%, #C33D31 80%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
filter:drop-shadow(0px 0px 1px #FFF) drop-shadow(0px 0px 0px #FFF) drop-shadow(0px 0px 1px #FFF) drop-shadow(0px 0px 0px #FFF) drop-shadow(0px 0px 1px #FFF) drop-shadow(0px 0px 1px #FFF) drop-shadow(0px 1px 0px #0000004D)
}

h1{
font:40px 'Mamba';
text-transform:uppercase;
position:absolute;
top:-35px;right:50px;
}

#content{
height:728px;padding:15px;
background-color:#FFF;
border:1px solid #696969;
border-radius:10px;
overflow-y:scroll
}

.photo{
padding:15px 15px 10px 15px;
background:url('img_index/fondo-red.gif') 0px 0px / 10px;
color:#FFE89C;
font:900 18px 'Parkinsans';
text-transform:uppercase;
text-align:center;
letter-spacing:1px;
border:2px solid #C33D31;
position:absolute;
box-shadow:1px 1px 3px #00000080;
z-index:4;
text-shadow:2px 1px 1px #C33D31, 1px -2px 0 #C33D31, -1px 1px 0 #C33D31, -1px -1px 0 #C33D31, 1px 0px 0 #C33D31, 0px 2px 0 #C33D31, -2px 0px 0 #C33D31, 0px -2px 0 #C33D31, 2px 2px 2px #DD658B00;
}
.photo.i{transform:rotate(-5deg);bottom:260px;right:50px}
.photo.ii{transform:rotate(5deg);bottom:10px;right:80px}

#i{
margin-bottom:10px;
display:flex;align-items:center;
justify-content:center;
}

#i img{
width:180px;height:180px;
object-fit:cover;
border:2px dashed #C33D31;
transition:filter 0.3s ease
}

h2{
width:auto;
margin:10px 0;padding-top:3px;
background:url('img_index/fondo-green.gif') 0px 0px / 10px;
color:#C33D31;
font:19px 'Mamba';
text-transform:uppercase;
line-height:30px;
text-align:center;
border-bottom:2px dashed #C33D31;
}

#icon{
width:250px;
border:10px solid #FFF;
outline:2px dashed #C33D31
}

span{
padding:2px 5px;
background:#A7BE7880;
color:#FFE89C;
font-weight:900;
text-transform:uppercase;
letter-spacing:1px;
border-radius:5px;
text-shadow:1px 1px 0px #627A31, -1px -1px 0px #627A31, -1px 1px 0px #627A31, 1px -1px 0px #627A31, 0px 0px 1px #627A31, 0px 0px 1px #ff7fbf, 0px 0px 1px #627A31, 0px -1px 1px #627A31, 2px 1px 1px #627A31, 0px 1px 1px #A7BE78;
}

footer{
width:100%;height:fit-content;
margin-top:15px;
font:700 19px 'Parkinsans';
text-align:center;
text-shadow:2px 1px 1px #FFF, 1px -2px 0 #FFF, -1px 1px 0 #FFF, -1px -1px 0 #FFF, 1px 0px 0 #FFF, 0px 2px 0 #FFF, -2px 0px 0 #FFF, 0px -2px 0 #FFF, 2px 2px 2px #DD658B00;
}

dt{
width:fit-content;
color:#C33D31;
font-size:13px;font-weight:600;
text-decoration:1px wavy underline #FEE07E;
text-align:center;
& #icon-mei{
width:90px;height:90px;
margin-bottom:5px;
background-image:url('img_index/icon-entry.jpg');
background-size:90px;
border:2px solid #C33D31;
outline:2px solid #FEE07E;
border-radius:50%;
}
}
aside{
width:100%;margin-bottom:20px;
display:flex;
justify-content:space-around;
position:relative;
z-index:10;
}
dd{
width:500px;
margin:0;padding:10px;
background-color:#E9EFDD;
text-align:justify;
border-radius:10px;
position:relative;
& p{margin:10px}
}
dd::after{
width:10px;height:10px;
background-color:#E9EFDD;
top:20px;left:-6.5px;
content:'';
position:absolute;
z-index:1;
transform:rotate(225deg)
}