html{position:relative;height:100%;min-height:100%}
body{
background-image:url('img_tartan-clovers/img_fanmade/fondo-wiki.png');
color:#3A3A3A;
background-attachment:fixed;
font:15px 'Rubik';
text-align:justify
}
::-webkit-scrollbar{display:none}
html{-ms-overflow-style:none;scrollbar-width:none}
a{color:inherit;text-decoration:inherit}
p{margin:0 0 20px 0;text-align:justify;line-height:25px;}
li{margin-bottom:5px;list-style:disc;line-height:25px}
p a, li a, #section a, h3 a, .coment a{color:#006CB0;&:hover{color:#002D4A;text-decoration:underline solid}}
#header{
width:900px;min-height:150px;margin:auto;
background:linear-gradient(to bottom, #7AC1C100 25%, #7AC1C1);
position:relative;
& #title{
font-size:25px;font-weight:600;
position:absolute;top:70px;left:280px;
&:hover{color:#31585C;text-decoration:2px solid underline}}
& #link{
font-size:14px;font-weight:700;
color:rgb(255, 255, 255);
text-transform:uppercase;
position:absolute;
bottom:15px;left:270px}
table tr td{
padding:5px 10px;
cursor:pointer;
&:hover{color:#31585C;text-decoration:2px solid underline}}}
#header-logo{
width:250px;height:80px;
background-image:url('img_tartan-clovers/img_fanmade/logo-.png');
background-size:contain;background-repeat:no-repeat;
position:absolute;
bottom:20px;left:20px
}
#fanmade-wiki{
width:830px;min-height:950px;
margin:auto;padding:25px 35px;
background-color:#FFFFFF;
position:relative
}
#content-i{width:100%;display:flex;flex-direction:row}
#i{width:64%;margin:0 25px 0 0}
#ii{width:270px;position:relative}
table.information{
width:100%;padding:2px;
background-color:#F5F5F5;
border:1px solid #C3C6C6;
border-radius:1.5em;
vertical-align:top;font-size:12px
}
#table-title{
padding:12px 9px;
background:#B22222;
color:#FFFFFF;
font-size:20px;font-weight:700;
text-align:center;
border-radius:1em
}

.gallery{margin:auto;text-align:center;
& img{width:98%;border:1px solid #C3C6C6}}
#navigation{display:flex;flex-direction:row;justify-content:center}
.button{
padding:5px;
font-size:15px;font-weight:600;
color:#686868;
border-bottom:2px solid transparent;
cursor:pointer;
&:hover{color:#3A3A3A}
&.active{color:#006CB0;border-bottom:2px solid #006CB0}
}

#section{
padding:9px 0 9px 9px;
border-bottom:1px solid #ADC7FA;
display:flex;flex-direction:row}
#iii{width:90px;font-weight:600}
.section-table{
padding:2px;
color:rgb(255, 255, 255);
font-size:14px;font-weight:700;
text-align:center;
border-radius:1.5em;
}
.section-table.i{background-color:#000000;
& a:hover{text-decoration:1px solid underline}}
.section-table.ii{background-color:#2E8B57}
#touou{
width:28px;height:21px;
background-image:url('img_tartan-clovers/img_fanmade/touou-.png');
position:absolute;
top:-5px;right:-10px
}
#name{margin-bottom:15px;font-size:35px;font-weight:300}
#sections{width:fit-content;border-bottom:1px solid #B53A4D;margin-bottom:20px}
#sections button{
width:166px;padding:10px 0;
background-color:#000000;
font:600 15px 'Rubik';
color:#FFFFFF;
border:2px solid #B53A4D;
border-radius:10px 10px 0 0;
cursor:pointer
}
#sections button.i{
background-color:#B53A4D;
font-weight:800;color:#FFFFFF;
text-shadow:2px 1px 1px #000, 1px -2px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000, 1px 0px 0 #000, 0px 2px 0 #000, -2px 0px 0 #000, 0px -2px 0 #000, 2px 2px 2px #DD658B00
}
#sections button.ii{
text-shadow:1px 1px 0 #B53A4D, -1px 1px 0 #B53A4D, 1px -1px 0 #B53A4D, -1px -1px 0 #B53A4D, 0px 1px 0 #B53A4D, 0px -1px 0 #B53A4D, -1px 0px 0 #B53A4D, 1px 0px 0 #B53A4D, 1px 1px 0 #B53A4D, -1px 1px 0 #B53A4D, 1px -1px 0 #B53A4D, -1px -1px 0 #B53A4D, 0px 1px 0 #B53A4D, 0px -1px 0 #B53A4D, -1px 0px 0 #B53A4D, 1px 0px 0 #B53A4D, 1px 1px 0 #B53A4D, -1px 1px 0 #B53A4D, 1px -1px 0 #B53A4D, -1px -1px 0 #B53A4D, 1px 1px 0 #B53A4D, -1px 1px 0 #B53A4D, 1px -1px 0 #B53A4D, -1px -1px 0 #B53A4D;
&:hover{text-decoration:1px underline solid #000}
}

h2{
width:100%;
margin:35px 0 10px 0;
padding-bottom:5px;
font-size:24px;font-weight:500;
border-bottom:1px solid #CECECE
}
h3{margin-top:25px;font-size:18px}
h4{width:95%;font-size:13px;font-weight:400;text-align:right}


#content{
width:300px;
border:1px solid #CECECE;
border-radius:8px;
& #title{list-style-image:url('img_tartan-clovers/img_fanmade/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 #CECECE;
& button{
width:100%;padding:5px 10px;
background:none;border:none;
font:16px 'Rubik';color:#3A3A3A;
text-align:left;
border-radius:3px;
cursor:pointer;
&.ii{padding:5px 10px 5px 20px}
& span{color:#898989;margin:0 10px 0 0}
&:hover{background-color:#D9E9F3;color:#006CB0}
}
}


#hide-show{font-size:12px;color:#006CB0;cursor:pointer;text-decoration:none;
&:hover{color:#002D4A}
&::before{content:'[ ';color:#3A3A3A}
&::after{content:' ]';color:#3A3A3A}}

#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}
#quote-right{vertical-align:bottom;padding:0}
#quote-center{padding:1em 1em;font-size:17px;line-height:2}

.other-links{
width:830px;
margin:auto;padding:15px 35px;
background-color:#280033;
color:#FFFFFF;
font-size:13px;text-transform:uppercase;
text-align:center;line-height:25px;
& a{color:#FFC500;font-weight:700}
& a:hover{color:#FFFFFF}
& span{margin:0 10px;&::before{content:'|';}}
}

.in-progress{
width:475px;margin:20px auto 10px auto;
background-color:#F9F9F9;
border:1px solid #AAA;
border-right:5px solid #40E0D0;
border-left:5px solid #40E0D0;
border-radius:15px;
& img{width:65px;height:65px;margin:3px 10px 0 7px}
& p{margin:0}}

.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{height:fit-content;
border:1px solid #D3D3D3;
& img{width:180px}
& img:hover{transform:scale(1.05);cursor:pointer}
}
.piece-footer{
width:180px;text-align:center;font-size:12px;
& p{margin:5px 0 0 0;line-height:18px;text-align:left}
&.i{float:left;margin-right:15px}
&.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:#FFFFFF;
margin:auto;padding:25px 25px 20px 25px;
color:#3A3A3A;
text-align:left;
border:1px solid #CECECE;
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:#006CB0;color:#FFFFFF;font-weight:600;border-radius:10px}}
& p{margin:0;font-size:13px;line-height:18px;text-align:justify}
& mark{padding:2px 7px;background:#2E8B57;color:#FFFFFF;font-weight:600;border-radius:10px}
}
.close{
color:#3A3A3A;
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}
}