body{
background-image:url('img_index/fondo-.jpg');
background-repeat:repeat;background-attachment:fixed;
font:17px 'Wanderer';
color:#000000
}
::-webkit-scrollbar{display:none}
html{-ms-overflow-style:none;scrollbar-width:none}
::selection{background:#FFA6004B;color:#55922C;text-decoration:1px wavy underline}
a{color:#0000FF;text-decoration:1px wavy underline;&:hover{color:#FFA500}}
p{margin:10px;text-shadow:1px 1px 0px #F3B365;position:relative;z-index:1}
b{font-weight:800}
img{-webkit-user-drag:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}
@font-face {font-family:'Wanderer';src:url('fonts/Wanderer-.woff')}
#adds{
width:100%;margin:10px 0 5px 0;
display:flex;flex-wrap:wrap;
justify-content:space-between;
& img{height:59px}
}
#add-brother{width:100%;height:85px;margin:10px 0 -5px 0}
main{width:980px;margin:auto;padding:20px 100px}
.melody-nomas{
width:980px;margin:auto;
background-image:url('img_index/fondo-base.png');
border:3px ridge #FBAF55;border-radius:15px;
position:relative
}
header{
width:100%;height:225px;
background-image:url('img_index/melo-nomas-header.png');
background-size:980px;
border-bottom:3px ridge #FBAF55;
border-radius:20px 20px 0 0;
}
#marquee-box{
width:100%;height:60px;
margin-bottom:10px;
background-image:url('img_index/gingham-green.gif');
border-bottom:3px ridge #FBAF55;
}
#marquee-box img{height:60px}
.my-content{padding:0 10px;display:flex;flex-wrap:wrap;justify-content:space-between}
#big-section{width:555px}
#small-section, .content.iv{width:195px;position:relative}
.content.iv{margin-top:5px;text-align:center;& p{margin:0 0 5px 0}}
iframe{
width:195px;height:355px;
margin:auto;margin-top:8px}

#button, #ii, nav{background-color:#FFFFFF;border:3px ridge #D3D3D3;border-radius:5px}
.content{background-color:#FFFFFF;border:3px ridge #F9D19E;border-radius:5px}
.content.i{height:fit-content;margin:0 10px 10px 10px}
.content.ii{width:470px;margin:5px 0 0 0;position:relative}
#sub-content{width:325px;margin:0 10px}

.content.iii{
height:190px;margin-bottom:4px;
background:url('img_index/aomine-daiki.png') ,url('img_index/otome-fondo.jpg');
background-size:160px, cover;background-position:right center, bottom;
background-repeat:no-repeat;
color:#FFFFFF;
border:2px ridge #CACACA;
border-radius:0;
display:flex;flex-direction:column;
justify-content:flex-end;
& aside{
padding:5px;
background-color:#FFFFFF85;
color:#000000;
font:600 10px 'Unbounded';
text-shadow: #FFF 1px 0px 0px, #FFF 0.540302px 0.841471px 0px, #FFF -0.416147px 0.909297px 0px, #FFF -0.989992px 0.14112px 0px, #FFF -0.653644px -0.756802px 0px, #FFF 0.283662px -0.958924px 0px, #FFF 0.96017px -0.279415px 0px;
position:relative
}
& li{
width:fit-content;
margin:0;padding:3px 5px;
background-color:#455C91;
list-style:none;
font:600 8px 'Unbounded';
text-transform:uppercase;
border-radius:0 10px 0 0;
}
}
.triangle{
width:0;height:0;
border-left:7px solid transparent;
border-right:7px solid transparent;
border-top:7px solid #000;
position:absolute;
top:5px;right:4px
}

#button{
margin-bottom:10px;
padding:10px;
background-image:url('img_index/gingham-green.gif');
font-size:14px;font-weight:900;
text-align:center;
text-shadow:2px 1px 1px #FFFFFF, 1px -2px 0 #FFFFFF, -1px 1px 0 #FFFFFF, -1px -1px 0 #FFFFFF, 1px 0px 0 #FFFFFF, 0px 2px 0 #FFFFFF, -2px 0px 0 #FFFFFF, 0px -2px 0 #FFFFFF, 2px 2px 2px #DD658B00;
& textarea{
width:165px;height:34px;
margin:5px 0;
font:12px 'Wanderer'
}
}

.mini-daiki{width:63px;margin:8px 13px 5px 10px;float:left}

#ii{
background-image:url('img_index/gingham-green.gif');
display:flex;flex-wrap:wrap;
align-content:flex-start;
overflow:hidden;
position:relative;
padding-bottom:10px;
}
.border{
width:100%;height:40px;
background-image:url('img_index/border-.png');
background-size:218px;background-repeat:repeat-x
}

nav #top, nav #center, nav #bottom, h1{
margin:0;padding:4px 0;
background-image:url('img_index/gingham-orange.gif');
color:#FFC989;
font:18px 'Kavoon';
letter-spacing:1px;
text-transform:uppercase;
text-align:center;
box-shadow: 0 -1.4px 1px inset #9E9699, 2px 3px 1.5px inset #FFF, 0px 0px 2px #ABA4A6;
&::before{content:url('img_index/sunflower-.gif');margin:0 5px}
&::after{content:url('img_index/sunflower-.gif');margin:0 5px}
&::after, &::before{
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);
}
}
nav span, h1 font{
background:linear-gradient(#99CC32 20%, #55922C 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);
}
nav #bottom{box-shadow:2px 3px 1.5px inset #FFF, 0px 0px 2px #ABA4A6}
nav{
margin-bottom:8px;
font-size:16px;
text-transform:uppercase;
& a{text-decoration:none}
& li{
padding:6px 5px 4px 7px;
background:linear-gradient(180deg, #FFFAF4 41%, #FFE8D5 56%);
list-style:url('img_index/ball-pink.gif') inside;
box-shadow:0px -1.5px 1px inset #9E9699, 2px 3px 1.5px inset #FFF, 0px 0px 2px #ABA4A6;
}
& li:nth-child(odd){background:linear-gradient(180deg, #FFFFF4 41%, #FFF7D2 56%)}
}

#credit{
width:100%;
padding:10px 0;
background-color:#FFF0DD;
line-height:25px;
text-align:center;
border-top:3px ridge #FBAF55;border-radius:0 0 20px 20px;
& a{text-decoration:1px dashed underline}
}

.last-art{
width:190px;height:237px;
margin:0 0 0 5px;
position:relative;
& .art{
width:190px;height:237px;
background-image:url('img_index/marco-.png');
background-repeat:no-repeat;background-size:190px;
position:absolute;
z-index:2;
}
& img{
width:150px;
position:absolute;
left:10px;top:30px;
z-index:1
}
& h3{
margin:0;
background:linear-gradient(180deg, #71A74E 0%, #55922C 70%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family:'Kavoon';
position:absolute;
z-index:3;
animation:hover 3s infinite;
filter:drop-shadow(1px 1px 0px #FFFFFF) drop-shadow(-1px -1px 0px #FFFFFF) drop-shadow(-1px 1px 0px #FFFFFF) drop-shadow(1px -1px 0px #FFFFFF);
}
}
#h3-i{font-size:26px;top:15px;left:23px}
#h3-ii{font-size:27px;bottom:15px;left:15px}
@keyframes hover{0%, 100%{
-moz-transform:translateY(10%);
-webkit-transform:translateY(10%);	
transform:translateY(10%);
}
50%{
-moz-transform:translateY(0%);
-webkit-transform:translateY(0%);	
transform:translateY(0%);
}
}

#iii{
width:270px;
margin:5px 0 0 0;
display:flex;flex-direction:column;
justify-content:space-between;
& img{width:100%}
}
.last-art:hover, .card-club:hover{
transform:rotate(-1deg);-webkit-transition:0.1s;transition:0.2s;
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)
}
.card-club.i{margin:0 0}

#scroll{
font:13px 'Kavoon';
letter-spacing:1px;
text-transform:uppercase;
color:#FF0000;
position:absolute;
top:-8px;right:-8px;
z-index:2;
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);
transform:rotate(8deg);
}