*{margin:0;padding:0;box-sizing:border-box}
body{
background:url('img_visual-novel/fondo-.png') no-repeat;
background-size:cover;background-position:center;
background-attachment:fixed;
color:#FFFFFF;
font:600 18px 'Mohave'
}
::-webkit-scrollbar{display:none}
html{-ms-overflow-style:none;scrollbar-width:none}
.static::before{
background:linear-gradient(#12101000 50%, #00000040 50%), linear-gradient(90deg, #FF00000F, #00FF0005, #0000FF0F);
background-size:100% 2px, 3px, 100%;
pointer-events:none;
content:" ";
display:block;
position:fixed;
top:0;bottom:0;
left:0;right:0;
z-index:10
}

main, #introduction-i, #introduction{width:750px;height:959px;position:relative}
main{width:fit-content;margin:auto;padding:0 50px}

aside{
color:#FFFFFF;
font:800 15px 'Figtree';
text-transform:uppercase;
display:flex;
position:absolute;
z-index:5;
& p{background-color:#00000099;margin-right:5px;padding:5px 10px}
}
aside a{color:#FFFF00;text-decoration:none}
aside a:hover{color:#40E0D0}

#aominessa{position:absolute;bottom:0;z-index:1}

#name-title{
height:63px;
position:absolute;
left:20px;top:-25px;
z-index:3;
}
#chat-content{
width:fit-content;height:fit-content;
display:flex;
position:absolute;
bottom:20px;
text-shadow:2px 2px 1px #000
}
#chat-i, #chat-ii, #chat-iii{
width:750px;height:170px;
display:flex;
justify-content:center;
align-items:center;
position:relative;
z-index:2;
}
#chat-i{background-color:#00000099}
#chat-ii{background-color:#009F3C90}
#chat-iii{background-color:#156CB999}
#chat-box{width:740px;height:160px;border:4px solid #FFFFFF}
#chat-text{
padding:45px 25px 0 25px;
color:#ffffbe;
line-height:25px;
position:absolute;
z-index:4;
&::after{content:' /'}
}

button{border:none;border-radius:0px;cursor:pointer} 

nav{position:absolute;top:18px;right:15px;z-index:5}
nav button{
margin-left:5px;
padding:0 5px;
background:none;
color:#FFFFFF;
font:800 15px 'Figtree';
text-transform:uppercase;
text-shadow:2px 2px 1px #000;
&:hover{color:#FFFF00}
&::before{content:'▶ '}
}

#question-box{
width:750px;height:160px;
position:absolute;
display:flex;
flex-direction:column;
align-items:center;
bottom:225px;
z-index:3;
overflow-y:scroll;
}
#aomine-button, #melody-button{
width:100%;
margin-top:10px;padding:7px 10px;
font:600 18px 'Mohave';
line-height:20px;
text-align:center;
border-radius:15px;
text-shadow:1px 1px 1px #FFFF00;
&:first-of-type{margin-top:0}
}
#aomine-button{
background-color:#FFFFFF;
color:#156CB9;
border:3px solid #156CB9;
&:hover{background-color:#156CB999;color:#FFFF00;text-shadow:2px 2px 1px #000}
}
#melody-button{
background-color:#FFFFFF;
color:#009F3C;
border:3px solid #009F3C;
&:hover{background-color:#009F3C99;color:#FFFF00;text-shadow:2px 2px 1px #000}
}
h1{
color:#FFFF00;
font:800 16px 'Figtree';
text-transform:uppercase;
position:absolute;
bottom:390px;right:10px;
z-index:5;
text-shadow:2px 2px 1px #000;
}