*{margin:0;padding:0}

html{position:relative;height:100%;min-height:100%}

[data-theme="teiko-high"]{
--background:url('img_my-blog/fondo-blue.png');
--header:url('img_my-blog/header-.png');
--text:#523829;
--color-i:#FFFFFF;
--color-ii:#5FA1CA;
--link:#FFA500;
--border:#5FA1CA;
--nav:#B8DBF45D;
--folder:url('img_my-blog/folder-blue.gif');
--title:url('img_my-blog/title-blue.gif');
--ribbon:url('img_my-blog/ribbon-blue.gif');
--footer:url('img_my-blog/footer-.png');
--button-text:'◐ Tōō Academy Theme';
}

[data-theme="too-academy"] {
--background:url('img_my-blog/fondo-red.png');
--header:url('img_my-blog/header-red.png');
--text:#FFFFFF;
--color-i:#010101;
--color-ii:#FFA500;
--link:#5050C4;
--border:#5B0D16;
--nav:#5B0d1662;
--folder:url('img_my-blog/folder-red.gif');
--title:url('img_my-blog/title-red.gif');
--ribbon:url('img_my-blog/ribbon-red.gif');
--footer:url('img_my-blog/footer-red.png');
--button-text:'◑ Teikō High Theme';
}

body{
background:var(--background);
color:var(--text);
font:16px 'Roboto Condensed';
text-align:justify
}
main{
width:1015px;
margin:auto;
background-color:var(--color-i);
border-left:2px dashed var(--border);
border-right:2px dashed var(--border);
outline:10px solid var(--color-i);
filter:drop-shadow(2px 0 0 var(--border)) drop-shadow(0 2px 0 var(--border)) drop-shadow(-2px 0 0 var(--border)) drop-shadow(0 -2px 0 var(--border));
}
header{
width:100%;height:214px;
background:var(--header) no-repeat;
background-size:100%;
position:relative
}
#i{width:325px}
#ii{width:630px}
#iii{
padding:0 20px 20px 20px;
display:flex;flex-wrap:wrap;
justify-content:space-between
}
a{color:var(--color-ii);text-decoration:2px dotted underline;cursor:pointer}
a:hover{color:var(--link)}
h2{
margin-top:20px;padding:5px 10px;
background-image:var(--title);
font:900 18px 'Roboto Condensed';
text-transform:uppercase;
border-bottom:2px dashed var(--color-ii);
text-shadow:2px 1px 1px var(--color-i), 1px -2px 0 var(--color-i), -1px 1px 0 var(--color-i), -1px -1px 0 var(--color-i), 1px 0px 0 var(--color-i), 0px 2px 0 var(--color-i), -2px 0px 0 var(--color-i), 0px -2px 0 var(--color-i), 2px 2px 2px #DD658B00;
&::before{
margin-right:5px;
content:var(--ribbon);
filter:drop-shadow(1px 1px 0px var(--color-i)) drop-shadow(-1px -1px 0px var(--color-i)) drop-shadow(-1px 1px 0px var(--color-i)) drop-shadow(1px -1px 0px var(--color-i))
}
}
p{margin:10px 0}
b{font-weight:600}
font{color:var(--color-ii)}
table{width:100%}
nav{margin:10px 0;padding:15px;background-color:var(--nav);border-radius:10px}
h3{
font:800 18px 'Roboto Condensed';
border-bottom:1px dashed var(--text);
}
li{
list-style:var(--folder);
margin:5px 0 5px 15px;
font-size:14px;font-weight:700;
text-align:left;
text-transform:uppercase
}
.entry.active{color:var(--link)}
#blush{
padding:0 3px;
font-size:10px;letter-spacing:1px;
color:#FF889D;
background-color:#FECECD52;
border-radius:10px;
box-shadow:0 0 5px #FECECD99
}
#blush::before{content:"/ / /"}

.audio{
width:250px;
margin:auto;margin-top:15px;
color:var(--color-ii);
font-size:14px;
text-decoration:dotted underline;
text-align:center
}
audio{width:250px;height:30px;margin-bottom:5px;border-radius:40px}

aside{
margin:10px 0;padding-left:10px;
color:var(--color-ii);
border-left:3px solid var(--color-ii)
}
header, header img{width:100%}

hr{width:100%;border:none;border-top:2px dashed var(--color-ii)}
#scroll{font-size:15px;font-weight:900;text-transform:uppercase;text-align:center}

footer{
width:100%;height:100px;
background:var(--footer) no-repeat;
background-size:100%;
background-position:top;
font-size:18px;
text-transform:uppercase;
text-align:center;
& p{margin:0;padding:30px 30px 0 30px}
& a{font-weight:800}
}

button{
padding:5px 10px;
background-color:var(--color-i);
color:var(--color-ii);
font:900 17px 'Roboto Condensed';
text-transform:uppercase;
border:2px solid var(--color-ii);
border-radius:50px;
cursor:pointer;
position:absolute;
top:15px;right:20px;
&::before{content:var(--button-text)}
}