html{
position:relative;
height:100%;
min-height:100%
}
body{
margin:0;
background-image:url('img_index/fondo-.png');
background-size:cover;background-attachment:fixed;
background-position:center;
font:15px 'Rubik';
color:#E6E6E6
}
::selection{background:transparent;color:#FBFF42}
a{color:inherit;text-decoration:inherit}
p{margin:0 0 20px 0;text-align:justify;line-height:2}
li{margin-bottom:5px;list-style:disc;line-height:25px}
h1{margin:0 0 15px 0;font-size:35px;font-weight:300}
h2{
width:100%;
margin:15px 0 10px 0;
padding-bottom:5px;
font-size:24px;font-weight:500;
border-bottom:1px solid #6F6E6E
}
h3{margin-top:25px;font-size:18px}
h4{width:95%;font-size:13px;font-weight:400;text-align:right}
main{
width:830px;height:fit-content;
margin:auto;padding:0 100px;
}
#header{
width:900px;min-height:150px;margin:auto;
color:#FBFF42;
position:relative;
& a:hover{color:#FDFEA7;text-decoration:2px solid underline}
& #title{
font-size:25px;font-weight:600;
position:absolute;top:70px;left:280px}
& #link{
font-size:14px;font-weight:700;
text-transform:uppercase;
position:absolute;
bottom:15px;left:270px}
table tr td{padding:5px 10px;cursor:pointer}
}
#header-logo{
width:250px;height:60px;
background-image:url('img_index/logo-.png');
background-repeat:no-repeat;
position:absolute;
bottom:20px;left:0
}
#fanmade-wiki{
width:830px;min-height:950px;
margin:auto;padding:25px 35px;
background-color:#474646;
position:relative;
& a{color:#75BAFF;&:hover{color:#DAECFE;text-decoration:underline solid}}
}

#quote{margin:auto;text-align:center;font-family:'Times New Roman';border:none}
#quote-left, #quote-right{font-size:45px;color:#B2B7F2;font-weight:bold;}
#quote-left{vertical-align:top;padding:.3em 0em 0em 0em;&::before{content:'“'}}
#quote-right{vertical-align:bottom;padding:0;&::before{content:'”'}}
#quote-center{padding:1em 1em;font-size:15px;font-style:italic;line-height:2}

#navigation{width:100%;margin:0 0 20px 0}
#navigation button{
margin-left:3px;padding:10px;
background-color:rgb(0, 0, 0);
font:14px 'Rubik';font-weight:700;
color:rgb(255, 255, 255);
border-radius:10px 10px 0 0;
cursor:pointer
}
#red{border:2px solid #FF0000;&:hover{background-color:#FF0000}}
#orange{border:2px solid #FFA500;&:hover{background-color:#FFA500}}
#yellow{border:2px solid #FFFF00;&:hover{background-color:#FFFF00;color:rgb(0, 0, 0)}}
#green{border:2px solid #7FFF00;&:hover{background-color:#7FFF00;color:rgb(0, 0, 0)}}
#blue{border:2px solid #40E0D0;&:hover{background-color:#40E0D0}}
#pink{border:2px solid #EE82EE;&:hover{background-color:#EE82EE}}

#content-i{width:100%;display:flex;flex-direction:row;margin:30px 0 0 0}
#i{width:85%;margin:0 30px 0 0}
#ii{width:300px}

.gallery{margin:auto;text-align:center;
& img{width:300px;margin:0 -1px -4px -1px}}
#pics-nav{display:flex;flex-direction:row;justify-content:center;margin:-1px}
.button{
padding:10px;
font-size:15px;font-weight:600;
cursor:pointer;
&:hover{background-color:#5A7B9C}
&.active{background-color:#5A7B9C}
}

#warning{
list-style-image:url('img_index/warning-.png');
color:rgb(255, 204, 77);font-size:16px;
font-weight:700;font-style:italic;
}
#warning-show{
display:flex;align-items:center;
justify-content:space-between;
}

#content{
width:300px;
border:1px solid #6F6E6E;
border-radius:5px;
& #title{list-style-image:url('img_index/menu-.png');margin:0;font-weight:600}
}
#content-title{display:flex;align-items:center;justify-content:space-between;margin:10px}
.content-show{
padding:10px;
border-top:1px solid #6F6E6E;
& button{
width:100%;padding:5px 10px;
background:none;border:none;
font:16px 'Rubik';color:#E6E6E6;
text-align:left;
border-radius:3px;
cursor:pointer;
&.ii{padding:5px 10px 5px 20px}
&.iii{padding:5px 10px 5px 33px}
& span{color:#A6A6A6;margin:0 10px 0 0}
&:hover{background-color:#4D5862;color:#75BAFF}
}
}
#hide-show{font-size:12px;color:#75BAFF;text-decoration:none;cursor:pointer;
&:hover{color:#DAECFE}
&::before{content:'[ ';color:#E6E6E6}
&::after{content:' ]';color:#E6E6E6}}

#ii table{
width:100%;font-size:13px;
border-collapse:collapse;
border:1px solid #AAAAAA;
& td, tr, th{border:1px solid #AAAAAA}
& th.title{padding:12px;background-color:#000000;font-weight:700;text-align:center;
&.i{font-size:18px} &.ii{padding:10px;font-size:14px}}
& td.i{width:35%;vertical-align:top;padding:5px 0 0 5px;background-color:#FF0000;font-weight:700}
& td.ii{padding:8px}
}
.other-links{
width:830px;
margin:auto;padding:15px 35px;
background-color:#280033;
color:#FFFFFF;
font-size:13px;text-transform:uppercase;
& a{color:#FFC500;font-weight:700}
& a:hover{color:#FFFFFF}
& p{margin:3px;text-align:center}
& span{margin:0 10px;&::before{content:'|';}}
}


.gallery-section{
width:650px;margin:auto;
font-size:12px;
display:flex;flex-wrap:wrap;
justify-content:space-between;
&.i{width:650px} &.ii{width:420px}
}
.piece{width:180px;height:fit-content;
border:1px solid #D63429;
overflow:hidden;
& img{width:100%;margin-bottom:-3px}
& img:hover{transform:scale(1.05);cursor:pointer}
}
.piece-footer{
width:180px;margin-bottom:60px;
text-align:center;font-size:12px;
& p{margin:5px 0 0 0;line-height:18px;text-align:left}
&.i{float:left;margin-right:15px;margin-bottom:0}
&.ii{float:right;margin-left:15px}
}
.piece-zoom{
width:100%;height:100%;
padding:100px 0 0 0;
background-color:rgba(0,0,0,0.3);
display:none;
position:fixed;
left:0;top:0;
z-index:1
}
.piece-content{
width:440px;background:#474646;
margin:auto;padding:25px 25px 20px 25px;
text-align:left;
border:1px solid #6F6E6E;
border-radius:10px;
position:relative;
-webkit-animation-name:animatetop;
-webkit-animation-duration:0.4s;
animation-name:animatetop;
animation-duration:0.4s;
& .zoom{width:442px;height:442px;margin:15px 0 10px 0;border:1px solid #D3D3D3;object-fit:contain}
& .date{font-size:15px;
& a{padding:2px 7px;background:#FBFF42;font-weight:600;border-radius:10px}}
& p{margin:0;font-size:13px;line-height:18px;text-align:justify}
& mark{padding:2px 7px;background:#FBFF42;color:#000000;font-weight:600;border-radius:10px}
}
.close{
font:600 30px 'Rubik';
position:absolute;
top:5px;right:15px;
cursor:pointer;
&::before{content:'×'}
}
@-webkit-keyframes animatetop{
from{top:-300px;opacity:0}
to{top:0;opacity:1}
}
@keyframes animatetop{
from{top:-300px;opacity:0}
to{top:0;opacity:1}
}
marquee{
width:900px;height:195px;
margin:15px 0 -5px 0;
background-image:url('img_index/marquee-fondo.png');
background-size:450px;background-repeat:repeat-x;
background-position:left bottom;
& img{height:140px;margin-right:15px}}
#ivarou-header{
width:215px;height:279px;
background-image:url('img_index/header-i.png');
background-size:215px;
position:absolute;
top:10px;right:20px;
z-index:1
}