@font-face {
    font-family: 'Alagard';
    src: url('fonts/Alagard.woff2') format('woff2'), url('fonts/Alagard.woff') format('woff');
}

@font-face {
    font-family: 'Super FamiFont';
    src: url('fonts/SuperFamiFont.woff2') format('woff2'), url('fonts/SuperFamiFont.woff') format('woff');
}

body { /*background: #777;*/ color: #eee;
    text-shadow: 2px 2px #000;
    /*background-image: linear-gradient(to right, #000, #333);*/
    background-color: #000;
    background-image: url('img/backland3.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0px;
}

.headmenu { color: #ddd; font-size: 2.5em; padding: 0.2em; padding-left: 0.8em;
    font-family: 'Alagard'; 
    border: 3px solid #666; border-left: none; border-right: none; border-top: none;
    background-image: linear-gradient( rgba(0, 0, 55, 0.5), rgba(0, 0, 100, 0.8) );
    /*padding: 0.2em;*/
}
.headmenu .tab { padding: 0.5em; }
.headmenu .tabact { padding-left: 1em; padding-right: 0.5em; }
.headmenu .tabcursor { width: 1em; height: 1em;  position: absolute; }

.tabcursor { transition: transform .7s ease-in-out; }
.tabcursor:hover  { transform: rotate(360deg); }
a { color: #ddd; text-decoration: none; }
a:hover { color: #ffff00; }

.content { color: #ddd; font-size: 1.5em; border: 2px solid #aaa; border-radius: 32px;
    font-family: 'Alagard';
    /*background: #000;*/ margin: 0.5em; padding: 0 1em;
    /*background-image: linear-gradient(#0000aa, #000033);*/
    background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8) );
}

.content.toolong { background-image: linear-gradient( rgba(0, 0, 100, 0.8), rgba(0, 0, 50, 0.8) );}

.content.wip { background-image: linear-gradient( rgba(150, 0, 0, 0.8), rgba(50, 0, 0, 0.8) ); }

.content.recruiting { background-image: linear-gradient( rgba(0, 150, 0, 0.8), rgba(0, 50, 0, 0.8) ); }

.footer { color: #ddd; font-size: 2em; border: 3px solid #ddd; border-radius: 32px;
    font-family: 'Alagard';
    /*background: #000;*/ margin: 0.5em; padding: 0 1em;
    /*background-image: linear-gradient(#0000aa, #000033);*/
    background-image: linear-gradient( rgba(0, 0, 0, 0.8), rgba(50, 0, 0, 0.1) );
}

.content a { color: #aaaaff; }
.content a:hover { color: #ffff00 }
.content img { padding: 0.5em; }

.feat { text-decoration: underline; color: #aaa; }

h1 { color: #fff; padding-left: 1em;
    /*font-family: 'Super FamiFont';*/ font-size: 3em;
    text-shadow: 3px 3px #000;
    margin: 0px;
    border: 3px solid #666; border-left: none; border-right: none;
    background-image: linear-gradient(#000077, #000);
    display: none;
 }
 
body h1 { 
    /*background-image: url('img/backlogo.png');*/
    background-size: cover;
    background-repeat: no-repeat; }

h2 { font-family: 'Alagard'; font-size: 1em; text-decoration: underline; }

h3 { text-decoration: underline; }

.albumsection {
    font-size: 2em; margin: 1em 1em 0em 0em; padding: 0.1em; text-align: center; text-transform: uppercase;
    background-image: linear-gradient( rgba(0, 0, 100, 0.9), rgba(0, 0, 0, 0.2) );
    border: 2px solid #777;
    border-radius: 12px; border-bottom: 0px; border-left: 0px;
}
.albumsection-description { font-size: 0.5em; text-transform: none; }

.albumslist {
    margin: 0.2em;
    display: flex;
    flex-wrap: wrap;
    /*flex-direction: column;*/
}

.albumitem {
    margin: 0.2em; padding: 0.2em; text-align: center;
    background-image: linear-gradient( rgba(0, 0, 55, 0.8), rgba(0, 0, 0, 0.3) );
    border: 1px solid black;
    border-radius: 12px;
    width: 20%;
    flex-wrap: wrap;
}

.albumitem img { object-fit: cover; width: 90%; text-align: center; }
.albumitem img:hover { opacity: 70%; }

ul { margin: 0px; }

.floatbreak { display: block; clear: both; }

.content-logo img { width: 90%; image-rendering: pixelated; text-align: center; clear: both; object-fit: contain; max-height: 220px; }
.content .cover { object-fit: cover; width: 40%; float: right; padding: 0px; margin: 0.5em;
border: 2px solid #000; }

.tracklist ol { list-style-type: decimal-leading-zero; }

.chocolist { padding: 0px; }
.chocolist li { list-style-type: none; padding-left: 1em; background-size: contain; }

.content .tracklistchocos { }
.content .tracklistchoco { height: 1em; width: auto; padding: 0px; object-fit: contain; }

.content blockquote { color: #aaa; }

[open] summary { position: absolute; bottom: -1.5em; left: 0;}
summary::before { content: "see full description"; }
[open] summary::before { content: "hide"; }
details { display: inline; }
/*summary { display: inline; border: 1px solid; border-radius: 0.5em; padding: 0.3em; }*/
summary { display: inline; text-decoration: underline; }
summary:hover { background: #aaaaff; }
.content-description { position: relative; margin-bottom: 2em; }

.track-finished { background:url('chocos/track-finished.png') no-repeat; padding: 0px;  }
.track-wip { background:url('chocos/track-wip.png') no-repeat; padding: 0px;  }
.track-recruiting { background:url('chocos/track-recruiting.png') no-repeat; padding: 0px;  }

.choco-upa { background:url('chocos/upa.png') no-repeat;  }
.chocoghost { background:url('chocos/chocoghost.png') no-repeat;  }
.jinx-sing { background:url('chocos/jinx-stand.png') no-repeat;  }
.jinx-acguitar { background:url('chocos/jinx-acguitar.png') no-repeat;  }
.jinx-ocarina { background:url('chocos/jinx-stand.png') no-repeat;  }
.jinx-piano { background:url('chocos/jinx-piano.png') no-repeat;  }
.pf-guitar { background:url('chocos/pf-guitar.png') no-repeat;  }
.nikki-guitar { background:url('chocos/nikki-guitarf.png') no-repeat;  }
.ianm-whistle { background:url('chocos/ianm-whistlef.png') no-repeat;  }
.ianm-keys { background:url('chocos/ianm-keys.png') no-repeat;  }
.siolfor-guitar { background:url('chocos/siolfor-guitarf.png') no-repeat;  }
.siolfor-bass { background:url('chocos/siolfor-guitarf.png') no-repeat;  }
.nemo-viola { background:url('chocos/nemo-violaf.png') no-repeat;  }
.tripleb-bass { background:url('chocos/tripleb-bassf.png') no-repeat;  }
.tripleb-guitar { background:url('chocos/tripleb-bassf.png') no-repeat;  }
.seph-bass { background:url('chocos/seph-bassf.png') no-repeat;  }
.josh-drums { background:url('chocos/josh-drumsf.png') no-repeat;  }
.wake-keys { background:url('chocos/wake-keys.png') no-repeat;  }
.donut-clarinet { background:url('chocos/donut-clarinet.png') no-repeat;  }
.joe-sax { background:url('chocos/joe-sax.png') no-repeat;  }
.evilsonic-guitar { background:url('chocos/evilsonic-guitar.png') no-repeat;  }
.evilsonic-bass { background:url('chocos/evilsonic-guitar.png') no-repeat;  }
.darmock-bass { background:url('chocos/darmock-bassf.png') no-repeat;  }
.krobo-keys { background:url('chocos/krobo-keys.png') no-repeat;  }
.dolemite-drums { background:url('chocos/dolemite-drumsf.png') no-repeat;  }
.minus-guitar { background:url('chocos/minus-guitarf.png') no-repeat;  }
.minus-bass { background:url('chocos/minus-bass.png') no-repeat;  }
.tibo-guitar { background:url('chocos/tibo-guitar.png') no-repeat;  }
.zach-bass { background:url('chocos/zach-bass.png') no-repeat;  }
.rabbit-keys { background:url('chocos/rabbit-keys.png') no-repeat;  }
.apb-keys { background:url('chocos/apb-keys.png') no-repeat;  }
.alyssa-guitar { background:url('chocos/alyssa-guitar.png') no-repeat;  }
.nirst-bass { background:url('chocos/nirst-bass.png') no-repeat;  }
.sly-bass { background:url('chocos/sly-bass.png') no-repeat;  }
.jillm-recorder { background:url('chocos/jillm-recorder.png') no-repeat;  }
.vkg-guitar { background:url('chocos/vkg-guitar.png') no-repeat;  }
.serrin-drums { background:url('chocos/serrin-drums.png') no-repeat;  }
.shea-violin { background:url('chocos/shea-violin.png') no-repeat;  }
.colorado-bass { background:url('chocos/colorado-bass.png') no-repeat;  }
.rob-guitar { background:url('chocos/rob-guitar.png') no-repeat;  }
.mocha-bass { background:url('chocos/mocha-bass.png') no-repeat;  }
.hld-drums { background:url('chocos/hld-drums.png') no-repeat;  }
.atomic-acguitar { background:url('chocos/atomic-acguitar.png') no-repeat;  }
.cosmicb-drums { background:url('chocos/cosmicb-drums.png') no-repeat;  }
.matt-ocarina { background:url('chocos/matt-ocarina.png') no-repeat;  }