@font-face {
    font-family: "Digital7";
    src: url('../fonts/digital-7.ttf');
    font-style: normal;
    font-weight: 400;
}

@keyframes marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}
@keyframes marquee2 {
    0% { right:-50%; }
    100% { right:100%; }
}

* { padding:0; margin:0; border:0; }

body { background:url(../img/bg_wood.jpg); padding-top:40px; color:#333; font-family:'Montserrat'; }
ul { list-style-position:inside; }

header { position:fixed; top:0; width:100%; background:#333; text-align:center; font-family:'Quantico', sans-serif; color:#fff; z-index:100; }

#flashmessage { background:rgba(135, 206, 235, 0.8); padding:1em; }
#flashmessage .alert { max-width:800px; margin:auto; font-weight:700; }
#flashmessage .alert .close { display:none; }
#flashmessage.error { background:rgba(255, 69, 0, 0.8); }
#flashmessage.error .alert { text-align:center; color:#fff; font-size:1.25em; text-transform:uppercase; }

footer { text-align:right; }
footer span { background:rgba(255,255,255,0.8); padding:0 0.25em; }

section { background:rgba(255,255,255,0.8); padding:1em; max-width:800px; margin:3em auto; border-radius:1em; }
section h2 { padding-bottom:0.5em; text-align:center; font-family: 'Orbitron', sans-serif; }

#player { position:relative; max-width:600px; margin:auto; }
#player audio { position:absolute; left:0; }

#player .screen { position:relative; background:#333; height:60px; text-align:center; color:skyblue; font-family:"Digital7"; font-size:40px; overflow:hidden; }
#player .screen > span { line-height:60px; }

#player .infos { position:absolute; display:none; background:#333; width:100%; height:100%; z-index:2; }
#player .title { display:block; width:125%; text-transform:capitalize; transform:translateX(100%); animation:marquee 15s linear infinite; }
#player .title.suspend { animation-play-state:paused; }
#player .title.remove { animation-name:none; }

#player .title { font-family: 'Quantico', sans-serif; }
#player .title { font-family: 'Orbitron', sans-serif; }

#player .controls { position:relative; background:#333; text-align:center; color:skyblue; font-family:"Digital7"; font-size:.9rem; z-index:3; }
#player .controls button { background:none; margin:0 .25rem; color:skyblue; font-size:1.25rem; cursor:pointer; }
#player .controls button.small { font-size:0.7em; }
#timebox { position:absolute; bottom:0; right:.25em; font-size:.9rem; z-index:0; }

#player #seekslider { display:none; width:100px; margin:1rem auto; }

.songlist { height:200px; overflow:auto; padding:1em; border:1px solid; }
.playtitle { cursor:pointer; }
.playtitle::before { content:'▶'; padding-right:.5em; }
.playtitle.active { font-weight:700; }


#bio ul { max-width:280px; margin:auto; }

#contactForm .form-group { width:280px; margin:.5em auto; }
#contactForm input, #contactForm textarea { width:100%; padding:.5em; }
#contactForm textarea { height:200px; }
#contactForm .text-center { text-align:center; }
#contactForm .text-center .btn { background:none; font-size:1.5em; font-family:'Orbitron', sans-serif; cursor:pointer; }
#contactForm .text-center .btn:hover::before { content:'→ '; }
#contactForm .text-center .btn:hover::after { content:' ←'; }