html{
position:relative;
height:100%;min-height:100%
}
body{
margin:0;
background:url('img_aomine-daiki-shrine/fondo-.png');
font:16px 'Wellfleet';
color:#A57C81;
text-align:justify;
animation:moveIt 15s linear infinite;
animation-timing-function:linear
}
@keyframes float{0%, 100% {transform:translateY(-5px)}
50%{transform: translateY(5px)}}
@keyframes moveIt{from {background-position:0px 0px;}to {background-position:210px 210px;}}
::selection{background-color:rgb(215, 237, 250);color:rgb(104, 160, 227);}
a{
color:#68A0E3;
text-decoration:1px wavy underline;
font-weight:600;
&:hover{color:#CA7D9C}
}
p{margin:10px 0 0 0}
u{color:#CA7D9C;text-decoration:1px wavy underline}
#li-blue{margin:10px 17px;list-style:url('img_aomine-daiki-shrine/li-blue.gif')}
#li-pink{margin:10px 17px;list-style:url('img_aomine-daiki-shrine/li-pink.gif')}
img{-webkit-user-drag:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}
.blush{
padding:0 2px 0 3px;
background-color:#FFE4E8A2;
color:#F8ACB5;
font:13px 'Calibri';
letter-spacing:3px;
border-radius:10px;
box-shadow:0 0 5px #FFE4E8;
&::before{content:'///'}}

#aomine-daiki, aside{
border:2px solid #FFFFFF;
outline:2px solid #95BCDD
}

main{width:fit-content;margin:auto;padding:25px 50px}
#aomine-daiki{
width:900px;min-height:1000px;
margin:auto;padding:20px;
background-image:url('img_aomine-daiki-shrine/fondo-i.png');
border-radius:15px;
box-shadow:inset 2px 2px 2px #FFFFFF;
position:relative
}
#border{
background-image:url('img_aomine-daiki-shrine/fondo-ii.png');
border:2px dashed #95BCDD;
outline:5px solid #FFFFFF;
border-radius:10px;
}
header{
height:275px;
margin-bottom:15px;
background-image:url('img_aomine-daiki-shrine/header.png');
background-size:100%;background-repeat:none;
border-radius:10px 10px 0 0;
}
#keychain, #quote, #text{position:absolute}
#keychain{top:39px;right:-163px;z-index:2}
#quote{width:430px;bottom:0;right:10px;z-index:1}
#aomine-daiki-ii{
width:55%;height:100%;
background-image:url('img_aomine-daiki-shrine/aomine-daiki-ii.png');
background-size:cover;
position:absolute;
top:100px;right:-110px;
z-index:2
}
h1{
width:fit-content;
margin:0;padding:0px 10px;
background:linear-gradient(#00000000 50%, #F8D2E1 50%);
color:#FFFFFF;
font:900 25px 'Playwrite CO';
line-height:40px;
text-shadow:0px 0px .2px #CA7D9C, 1px 1px .2px #CA7D9C, -1px -1px .2px #CA7D9C, -1px 1px .2px #CA7D9C, 1px -1px .2px #CA7D9C;
& span{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)}
}

table{
background-color:#fff7cb;
border-collapse:collapse
}
table td{
padding:10px;
background:radial-gradient(rgba(255, 255, 255, 0.7), transparent);
border:1px dotted rgb(255, 105, 180);
}
table img{width:160px;height:240px;border:1px dotted rgb(128, 128, 128)}

#divider{
width:94.5%;height:12px;
margin:15px auto;
background-image:url('img_aomine-daiki-shrine/divider-.gif')
}
#credits{
width:95%;margin:10px auto;
background:linear-gradient(180deg, #F2F8FF 0%, #BDDDFE 100%);
text-align:center;
border:2px groove rgb(189, 221, 254);
border-radius:5px
}

aside{
width:840px;
margin:15px auto 15px;
padding:10px;
background-image:url('img_aomine-daiki-shrine/fondo-i.png');
border-radius:5px;
& #i{
padding:10px 20px 20px 20px;
background-color:#FFFFFF;
border:1px solid #95BCDD;
border-radius:5px;
position:relative;
}
}

#ii{
width:864px;height:346px;
margin:auto;
position:relative
}

#i-love-you{
width:261px;height:248px;
background-image:url('img_aomine-daiki-shrine/fondo-heart.png');
margin:10px 15px 0 0;
display:flex;
justify-content:center;
align-items:center;
float:left;
position:relative
}
#text:hover, #closed:hover{
cursor:pointer;
transform:rotate(3deg);-webkit-transition:0.1s;transition:0.2s;
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)
}
#text{top:-20px;right:-55px;z-index:3}
#closed{display:block}
#open{
display:none;
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)
}
#text-open{
width:210px;
color:#8A6666;
font-size:23px;font-weight:900;
text-align:center;
display:none;
position:absolute;
top:84px;left:-88px;
z-index:2;
text-shadow:2px 2px 0px #E3CEA5;
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);
transform:rotate(-3deg);
}