/*
   written by Rudolph Johnson*/

@font-face {
    font-family: 'Kingthings Trypewriter 2';
    src: url('https://db.onlinewebfonts.com/t/56f6250e0905ad8af7f1a6db32c98057.woff2') format('woff2');
}

body {
    background:#000;
    color:#888;
    font-family:'Kingthings Trypewriter 2',monospace;
    margin:0;
    line-height:1.6;
}

header {
    background:#0c0c0c;
    text-align:center;
    padding:80px 20px 40px;
}

.logo {
    max-width:600px;
    width:90%;
    margin:0 auto 20px;
}

header p {
    font-size:1.3em;
    letter-spacing:3px;
    color:#555;
    margin:20px 0;
}

/* navigation */
nav {
    background:#111;
    border-top:2px solid #300;
    border-bottom:2px solid #300;
    padding:15px 0;
    text-align:center;
}

nav a {
    color:#888;
    font-size:1.3em;
    margin:0 25px;
    text-decoration:none;
    letter-spacing:2px;
    transition:all .3s;
}

nav a:hover {
    color:#f00;
    text-shadow:0 0 10px #900;
}

nav a.current { color:#c00; }

/* shared */
footer {
    background:#0c0c0c;
    padding:50px 20px;
    text-align:center;
    color:#444;
    font-size:1.1em;
}

footer a { color:#700; text-decoration:none; }

/* releases page */
.releases {
    max-width:1000px;
    margin:80px auto;
    padding:0 20px;
}

.release {
    background:#0f0f0f;
    border:2px solid #300;
    padding:30px;
    margin-bottom:60px;
    overflow:hidden;
    position:relative;
}

.release:hover { border-color:#600; }

.soldout {
    opacity:.4;
    pointer-events:none;
}

.soldout::after {
    content:"SOLD OUT";
    position:absolute;
    top:50%; left:0; right:0;
    font-size:5em;
    color:#c00;
    transform:translateY(-50%);
    font-weight:bold;
    letter-spacing:8px;
    text-align:center;
}

.release img {
    max-width:100%;
    border:1px solid #333;
    margin-bottom:20px;
    display:block;
}

.release h2 {
    font-size:2.2em;
    margin:0 0 10px;
    color:#f00;
    letter-spacing:3px;
}

.release h3 {
    font-size:1.4em;
    color:#ccc;
    margin:10px 0;
}

.info { color:#888; font-size:1.1em; margin:15px 0; }
.stock { font-size:2.5em; color:#0f0; margin:15px 0; letter-spacing:2px; }
.price {
    background:#111;
    border:1px solid #400;
    color:#f99;
    padding:10px 20px;
    font-size:1.6em;
    letter-spacing:3px;
    display:inline-block;
    margin:20px 0;
}

.buy {
    font-size:1.2em;
    color:#a00;
    letter-spacing:2px;
    text-decoration:none;
    border-bottom:1px solid #600;
    padding-bottom:2px;
}

.buy:hover {
    color:#f00;
    border-bottom-color:#c00;
}

/* bands page */
.bands { max-width:1000px; margin:80px auto; padding:0 20px; }
.band {
    background:#0f0f0f;
    border:2px solid #300;
    padding:35px;
    margin-bottom:60px;
    overflow:hidden;
}
.band:hover { border-color:#600; }
.bandimg {
    float:left;
    margin-right:30px;
    width:300px;
    border:1px solid #333;
}
.bandinfo { overflow:hidden; }
.bandname {
    font-size:2.4em;
    color:#f00;
    margin:0 0 15px;
    letter-spacing:3px;
}
.banddesc {
    font-size:1.3em;
    color:#aaa;
    margin:15px 0;
    line-height:1.7;
}
.bandlinks a {
    color:#a00;
    font-size:1.2em;
    margin-right:25px;
    text-decoration:none;
    border-bottom:1px solid #600;
}
.bandlinks a:hover { color:#f00; border-bottom-color:#c00; }

/* mobile */
@media(max-width:700px){
    header { padding:60px 20px; }
    .logo { width:80%; }
    nav a { margin:0 12px; font-size:1.1em; }
    .release { padding:20px; }
    .bandimg { float:none; margin:0 auto 25px; display:block; width:100%; max-width:400px; }
}