body,td,th {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    color:#eee;
}
body {
    background-color: #191919;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
body.home {
    overflow-x: hidden; background-color:black;
}
a:link {
    color: #ffffff;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #ffffff;
}
a:hover {
    text-decoration: none;
    color: #cacaca;
}
a:active {
    text-decoration: none;
    color: #ffffff;
}
a {
    font-weight: bold;
    font-size: 16px;
}
.style1 {color: #D80303;}

header, section, footer {
    width:764px;
    margin: 0 auto;
}

header { background-image: url(../../../imgs/topo.gif); }
header img { width: 100%; height:100px; }

footer { margin-top:24px; }
footer ul { padding:0; margin:8px 16px; }
footer ul li { display:inline-block; padding:0 16px; margin:0; border-left:1px dashed #dbdbdb; }
footer ul li:first-child { border-left:none; padding-left:0; }
footer ul li:last-child {float:right; padding:0; border:none; }
footer ul li:last-child a { font-size:smaller; text-transform: uppercase; letter-spacing:0.05em;}
footer a { color:#D80303 !important; font-size:small; }
footer a:hover, footer a.active { color:#aeaeae !important; }

h1 { color: #D80303; border-color: #D80303; }
h3 { margin-bottom: 48px; font-size:larger; }
h4 { font-size:medium; }
h5 { font-size:small; }
strong { font-weight:900; font-size:110%; }
p a { color: #D80303 !important; font-size:small;}
p a:hover { color: #eee !important; font-size:small;}

button {
    padding: 13.5px 20px;
    text-transform: uppercase;
    font-weight:700;
    font-size:smaller;
    color: #eee;
    background-color: #D80303;
    border: 1px solid #D80303;
    border-radius: 6px;
    min-width:164px;
}
button:hover {
    cursor:pointer;
    background-color:#920000;
    border: 1px solid #920000;
}
button.secondary {
    float:left;
    margin-right:24px;
    background-color: transparent;
    border: 1px solid #D80303;
}
button.secondary:hover {
    cursor:pointer;
    border: 1px solid #920000;
}

picture { float:right; margin-left:48px; clear:both;}
picture img { max-width: 340px; border-radius: 6px; border:1px dashed #BE1312; }

ul { margin: 24px 0;}
ul li { line-height:20px; margin-bottom:4px;}
ul li li { font-size:small; }

aside { float:right; }

#collection {
    padding:0; margin:0; 
    list-style:none;
    margin-bottom   :-24px;
}
#collection span {
    clear:both;
}
#collection li { 
    display:inline-block;
    margin-bottom:24px;
    margin-right:24px;
}
#collection li:nth-child(3n+3) { margin-right:0; }

#collection p { padding:12px 16px; margin:0; }
#collection a {
    display:block;
    max-width:234px;
    max-height:200px;
    overflow:hidden;
    border-radius:8px;
    border:2px solid #D80303;
    background-color:#D80303;
    padding:0; margin:0;
}
#collection a:hover { border:2px solid #920000; background-color:#920000; color:white; }
#collection img { width:100%; }

table, #spotify {
    overflow:hidden;
    max-width:764px;
}
#spotify { 
    position: absolute;
    top:61px;
    width:764px; height:371px;
    margin-left:-382px;
    left:50vw;
    opacity:0.8; 
    border-radius:12px;
}

#footer { padding:0; width: 100%;}
#footer img { height: 48px; }
#footer li { 
    list-style: none; 
    display: inline-block; 
    line-height:0; 
    margin:0;
    padding:0;
}
#footer li a { 
    color: white;
    border: 1px solid #979797;
    border-radius:8px;
    margin-left:24px;
    padding: 13.5px 20px;
    position:relative;
    top:-20px;
}
#footer li a:hover {
    color: white;
    border:1px solid white;
}
#footer li a.spotify { 
    border:none; 
    margin:0; 
    padding:0;
    position:inherit;
}

footer h6 {
    color: #666;
    text-align: center; 
    font-size: x-small;
    font-weight: 900;
}
.home footer h6 { 
    border-top: 1px dashed #222; padding-top:16px; 
}

@media only screen and (max-width: 768px) {
    header { width: 100%; background-position-x: right; }
    header img { height:72px; }
    header.home img { height: 96px; }

    section { width: calc(100% - 48px); padding:0 24px; }

    h3 { margin-bottom: 24px; }

    footer { width: 100%; }
    footer ul li:last-child { display:none; }

    picture { float:none; margin: 0; }
    picture img { width: 100%; }

    button { width: 100%; margin-top:24px; }

    #collection li:first-child { margin-top:0; }
    #collection li { margin-right:0; }
    #collection a { 
        max-width: 100%; 
        max-height: 216px;
    }

    #oldschool { 
        overflow-x:hidden; 
        margin:-24px -24px 24px -24px;
        float:right;
    }
    #spotify { 
        top:61px;
        left:0;
        margin:0;
        width:100%; height:367px;
        border-radius: 0;
    }

    #footer li a.spotify { 
        margin-bottom: 24px;
    }
    #footer img { width: 100%; height:auto; }

    #footer li { 
        display:block; 
        width:100%; 
        line-height:unset;
    }
    #footer li a {
        position:inherit;
        margin:0 0 24px 0;
        width:calc(100%-48px);
        display:block;
        line-height:unset;
    }
 }