html{position:relative;height:100%;min-height:100%}
body{
margin:0;
background-image:url('img_index/otome-fondo.jpg');
background-size:cover;background-position:center;
background-attachment:fixed;
font:18px 'WDXL Lubrifont JP N';
color:#182441;
text-transform:uppercase;
}
img{-webkit-user-drag:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}
*::-webkit-scrollbar{width:6px;height:6px}
*::-webkit-scrollbar-track{border-radius:0px;background-color:#FFFFFF}
*::-webkit-scrollbar-thumb{border-radius:0px;background-color:#182441}
a{color:#0000FF;text-decoration:none;&:hover{background-color:#182441;color:#FFFFFF}}
#name{
padding:5px 10px;
border-bottom:1px solid #727171;
}
p{margin:0;padding:0 10px;border-bottom:1px solid #000}
.one::before{content:url('img_index/li-one.gif');margin-right:5px}
.two::before{content:url('img_index/li-two.gif');margin:0 5px 0 8px}
main{
width:1050px;height:959px;
margin:auto;
position:relative
}
#general{
width:1050px;height:959px;
background:url('img_index/fondo-site-map.png') no-repeat;
background-position:left bottom;background-size:800px;
position:absolute;
bottom:0;right:0
}
#border, #top, #bottom{background-color:#1A3069}
#top, #bottom{width:330px;height:40px}
#top{border-radius:10px 10px 0 0}
#top, #bottom, #border{box-shadow:inset 4px -1px 0px -1px#33568F, inset -4px 0px 0px -1px #33568F}
#top, #bottom, #border, #flex, #button{filter:drop-shadow(1px 1px 0px #000) drop-shadow(-1px -1px 0px #000) drop-shadow(-1px 1px 0px #000) drop-shadow(1px -1px 0px #000)}
#border-main{
filter:drop-shadow(1px 1px 0px #727171) drop-shadow(-1px -1px 0px #727171) drop-shadow(-1px 1px 0px #727171) drop-shadow(1px -1px 0px #727171);
position:absolute;
bottom:0;right:0
}
#border{
width:240px;height:420px;
padding:30px 50px 35px 40px;
border-top:2px solid #182441;
border-bottom:2px solid #182441;
}
#content{
width:250px;height:420px;
background-color:#FFFFFF;
border:1px solid #727171;
outline:7px solid #182441;
box-shadow:inset 2px 2px 1px #182441, inset -2px -2px 1px #182441;
filter:drop-shadow(1px 1px 0px #33568F) drop-shadow(-1px -1px 0px #33568F) drop-shadow(-1px 1px 0px #33568F) drop-shadow(1px -1px 0px #33568F);
border-radius:3px;
overflow:hidden
}
#scroll{width:248px;height:295px;overflow-y:scroll}
#lol{background-color:#304864;padding:5px 10px;color:#FFF;font-size:17px;letter-spacing:1px}
.under{
width:20px;height:20px;
background-image:url('img_index/under-construction.png');
background-size:20px;background-position:center;
float:right
}
mark{
padding:2px 6px;
background-color:#94C2C3;
color:#3B6061;
border:1px solid #D3D3D3;
border-radius:5px;
&::after{content:'×';margin-left:5px}
}
#title{
width:100px;height:94px;
font:700 26px 'WDXL Lubrifont JP N';
color:#FFFFFF;
text-align:center;
line-height:28px;
position:absolute;
top:100px;right:430px;
&::before{
content: "";
width:100px;height:94px;
background-image:url('img_index/i-.png');
transform:scaleX(-1);
position:absolute;
top:0;left:0
}
&::after{
content:'Are you lost?';
filter:drop-shadow(2px 0 0 #C75C8B) drop-shadow(0 2px 0 #C75C8B) drop-shadow(-2px 0 0 #C75C8B) drop-shadow(0 -2px 0 #C75C8B);
position:absolute;
top:23px;left:0
}
}
#flex, #flex #center, #button{background-color:#263C75}
#flex{
width:330px;height:60px;
box-shadow:inset -5px 0px 0px -1px #182441, inset 4px 4px 0px 0px #182441;
& #center{
width:200px;height:100%;
margin:auto;
box-shadow:inset -4px 0px 0px -1px #182441, inset 3px -7px 0px 0px #182441
}
}
#button{
width:330px;height:170px;
border-top:4px solid #33568F;
}
#button-section{
width:270px;height:110px;
margin:auto;margin-top:25px;
display:flex;
justify-content:space-between;
flex-direction:row;
}
button, #button-center{
background-color:#D3D3D3;
font:25px 'Bakbak One';
border:3px solid #182441;
border-radius:7px;
}
button{cursor:pointer}
.i{width:60px;height:50px;margin-bottom:20px}
.i.e-mail{
background:url('img_index/carta-.png'), #D3D3D3;
background-size:35px;background-position:center;
background-repeat:no-repeat}
.i.homepage{
background:url('img_index/homepage-.png'), #D3D3D3;
background-size:35px;background-position:center;
background-repeat:no-repeat}
.i.neocities{
background:url('img_index/neocities-.png'), #F59C32;
background-size:35px;background-position:center;
background-repeat:no-repeat}
.i.botones{
background:url('img_index/botones-.png'), #D3D3D3;
background-size:35px;background-position:center;
background-repeat:no-repeat}
.i.e-mail, .i.homepage, .i.neocities, .i.botones, #button-center{
filter:drop-shadow(1px 1px 0px #33568F) drop-shadow(-1px -1px 0px #33568F) drop-shadow(-1px 1px 0px #33568F) drop-shadow(1px -1px 0px #33568F)
}
#button-center{
width:115px;height:115px;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
& #center{
width:fit-content;padding:10px;
background-color:#A5A5A5;
border:2px solid #727171;
outline:2px solid #A5A5A5;
border-radius:50%}
}
#section{width:60px}
#date{
padding:5px 10px 5px 5px;
background:url('img_index/fondo-date.png'), #304864;
background-position:center;background-repeat:no-repeat;
text-align:right;
color:#FFFFFF;
}