*{margin:0;padding:0}
body{
background-image:url('img_my-blog/fondo-general.gif');
font:16px 'Roboto Condensed';
color:#523829
}

main{width:980px;padding:10px 50px 20px 50px;margin:auto}
img{-webkit-user-drag:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}

a{text-decoration:none;color:#FF889D;text-decoration:2px dotted underline;&:hover{color:#68A0E3}}
font{color:#F37088}
p, aside{text-align:justify}
p{margin:10px}
aside{margin:10px;color:#FF889D;border-left:3px solid #FF889D;padding-left:10px;& p{margin:10px 0}}

.audio, #foot, h3, #menu-button p, .status p, #poem p, #quote, #scroll-top, footer{text-align:center}
.audio, #foot span, h1, h2, h3, #menu-button, .i-love-you, dt, #scroll-top{text-transform:uppercase}
h1, h2, h3, .i-love-you, dt{font-weight:900}

.audio{
width:250px;
margin:auto;margin-top:15px;
color:#FF889D;
font-size:13px;
text-decoration:dotted underline;
}
audio{width:250px;height:30px;margin-bottom:5px;border-radius:40px}

#foot span{font-size:15px}
#version{
width:auto;padding:0 5px;
background-color:#FECECDB3;
font-size:11px;
position:absolute;
top:235px;right:345px;
z-index:5
}
mark{
padding:0 3px;
background-color:#ffd7dba2;
border-radius:5px
}
#blush{
padding:0 3px;
font-size:10px;letter-spacing:1px;
color:#FF889D;
background-color:#FECECD52;
border-radius:10px;
box-shadow:0 0 5px #FECECD99
}
#blush::before{content:"/ / /"}

#my-blog{
width:980px;
background-color:#FFFFFF99;
display:flex;flex-wrap:wrap;
position:relative
}
#lace-top, #lace-bottom{
width:100%;height:55px;
background-image:url('img_my-blog/-line.gif');
position:absolute
}
#lace-top{background-position:top left;background-repeat:repeat-x;top:0;z-index:4}
#lace-bottom{background-position:bottom left;background-repeat:repeat-x;bottom:0;z-index:4}
#lace-left, #lace-right{
width:68px;height:100%;
background-image:url('img_my-blog/-lace-.gif');
background-repeat:repeat-y;
position:absolute
}
#lace-left{left:-9px}
#lace-right{right:-9px}
#lace-center{
width:99%;height:48px;
background-image:url('img_my-blog/line-center.gif');
background-repeat:repeat-x;
position:absolute;
top:260px;left:5px
}
#header-welcome{width:59%;height:170px;margin:65px 0 0 60px}

h1{
margin:0;
font-size:38px;
background:linear-gradient(#FFD1D4 20%, #FF889D 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);
position:absolute;
top:210px;left:65px;
}
h2, h3{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}
h2{
width:92%;
margin:20px auto 0;padding:5px 10px;
font-size:17px;
background-image:url('img_my-blog/fondo-título.gif');
&::before{
margin-right:5px;
content:url('img_my-blog/icon-ribbon-i.gif');
filter:drop-shadow(1px 1px 0px #FFF) drop-shadow(-1px -1px 0px #FFF) drop-shadow(-1px 1px 0px #FFF) drop-shadow(1px -1px 0px #FFF)
}
&:first-of-type{margin-top:0}
}
h3{
width:92%;height:37px;
margin:10px auto;
background-image:url('img_my-blog/título-fondo.png');
background-size:13px;
background-position:bottom;background-repeat:repeat-x;
font-size:18px;
&::before{
margin-right:5px;
content:url('img_my-blog/icon-ribbon-i.gif');
filter:drop-shadow(1px 1px 0px #FFF) drop-shadow(-1px -1px 0px #FFF) drop-shadow(-1px 1px 0px #FFF) drop-shadow(1px -1px 0px #FFF)
}
&::after{
margin-left:5px;
content:url('img_my-blog/icon-ribbon-i.gif');
filter:drop-shadow(1px 1px 0px #FFF) drop-shadow(-1px -1px 0px #FFF) drop-shadow(-1px 1px 0px #FFF) drop-shadow(1px -1px 0px #FFF)
}
}

.about-me-i{
width:305px;padding:10px;
background:url('img_my-blog/fondo-título.gif');
border:1px solid #FFD1D4;
border-radius:5px;
box-sizing:border-box;
position:absolute;
top:73px;left:155px
}
.about-me{
width:100%;
background:#FFF;
font-size:12px;
border-radius:5px;
box-shadow:0px 0px 3px #0000004D;
& li{list-style:url('img_my-blog/icon-ribbon.gif') inside;margin:10px 0}
& table img{margin:5px 10px}
}

.aomine-daiki{
width:175px;height:220px;
background-image:url('img_my-blog/aomine-daiki.png');
background-size:175px;background-repeat:no-repeat;
position:absolute;
top:60px;right:365px;
z-index:4
}

.menu{width:80px;margin-top:-9px;& a{color:#523829;text-decoration:none}}
#menu-button{
width:80px;height:27px;
margin-bottom:5px;
background-image:url('img_my-blog/menu-button.gif');
& p{padding:13px 0 0 1px;font-size:10px}
&:hover{filter:drop-shadow(0px 0px 1px #FECECD) drop-shadow(0px 0px 0px #FECECD) drop-shadow(0px 0px 1px #FECECD) drop-shadow(0px 0px 0px #FECECD) drop-shadow(0px 0px 1px #FECECD) drop-shadow(0px 0px 1px #FECECD)}
}

#i{
width:565px;
margin:70px 15px 0 65px;
background-image:url('img_my-blog/left-.gif'), url('img_my-blog/right-.gif');
background-position:top left, top right;
background-repeat:repeat-y, repeat-y;
background-color:#FFF;
& #content{width:97%;height:100%;margin:auto;margin-top:20px;margin-bottom:55px}
& hr{width:96%;margin:auto;border:none;border-top:2px dashed #F37088}
& table{width:95%;margin:auto;margin-bottom:20px}
}

#ii{
width:270px;margin:-160px 0 0 0;
background-image:url('img_my-blog/line-.gif'), url('img_my-blog/left-.gif'), url('img_my-blog/right-.gif');
background-position:top, top left, top right;
background-repeat:repeat-x, repeat-y, repeat-y;
background-color:#FFF;
z-index:3;
& #content{width:95%;height:100%;margin:auto;margin-top:50px;margin-bottom:65px}
& hr{width:91%;margin:15px auto;border:none;border-top:2px dashed #F37088}
& li{margin:0 10px 3px 10px;list-style:url('img_my-blog/icon-note.gif') inside}
}

.status{
width:199px;height:146px;
margin:auto;
background-image:url('img_my-blog/status-.gif');
background-repeat:no-repeat;
& p{padding:36px 15px 0 15px;font-size:14px}
}

.i-love-you{
width:240px;height:69px;
margin:15px auto;
background-image:url('img_my-blog/i-love-you.gif');
background-repeat:no-repeat;
& p{
padding:8px 0 0 20px;
color:#FF889D;
font-size:14px
}
}
footer{margin-top:15px;font-size:20px;font-weight:500}

.entry{cursor:pointer}
.entry.active{color:#68A0E3}

dl{
width:215px;
margin:auto;padding:10px;
background-color:#FFEAEC;
border-radius:10px
}
dt{
margin:0 10px 5px 10px;
font-size:18px;
letter-spacing:1px;
border-bottom:1px dashed #523829;
}
dd{margin:5px 10px;font-size:16px}
dd::before{content:url('img_my-blog/icon-entry.gif');margin-right:5px}

#poem{font-style:italic}
#quote{
width:450px;margin:10px auto;
font-style:italic;
color:#F37088
}
#scroll-top{margin-top:20px;font-size:13px;padding-bottom:20px}