@font-face {
    font-family: 'Futura';
    src: local('Futura Bold'), local('Futura-Bold'),
        url('../fonts/FuturaLT-Bold.woff2') format('woff2'),
        url('../fonts/FuturaLT-Bold.woff') format('woff'),
        url('../fonts/FuturaLT-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Futura';
    src: local('Futura Regular'), local('Futura-Regular'),
        url('../fonts/FuturaLT.woff2') format('woff2'),
        url('../fonts/FuturaLT.woff') format('woff'),
        url('../fonts/FuturaLT.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Futura';
    src: local('Futura Condensed Light'), local('Futura-Condensed-Light'),
        url('../fonts/FuturaLT-CondensedLight.woff2') format('woff2'),
        url('../fonts/FuturaLT-CondensedLight.woff') format('woff'),
        url('../fonts/FuturaLT-CondensedLight.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
  }

.edit {
    display: none;
}

div.content div h1 {
    color: white;
    justify-content: center;
    font-family: 'Futura';
    font-weight: bold;
    font-size: 24pt;
    text-shadow: 
        -1px -1px 0 #000,  
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000,
        2px 2px 2px black;
}

a:visited { color: white; }
a:hover { color: lightgreen; }
a:active { color: white; }
a { color: white; }

nav ul, div.footer ul {
    list-style: none;
    display: block;
}

nav ul li, div.footer ul li {
    display: inline;
    padding: 1em;
}

ul.music-list {
    list-style: none
}

span.caption {
    justify-content: center;
}

body {
    width: calc(100% - 2em);
    height: 100%;
    padding: 1em;
    margin: 0;
    position: absolute;
    text-align: center;
    color: white;
    font-family: 'Futura';
    font-size: 12pt;
}

div.background-color {
    background: linear-gradient(0deg, #101010FF 0%, #300000FF 100%);
    z-index: -101;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

div.background-image {
    background: url(../img/background-repeat.png);
    z-index: -100;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 15%;
}

@media screen and (orientation: portrait) {
    img.background {
        height: 100%;
        width: auto;
    }
}

body div img.header {
    width: 700px;
    image-rendering: pixelated;
}

div.center {
    text-align: center;
}

div.left {
    text-align: left; 
}

div.content {
    padding: .5em; 
    margin-left: auto; 
    margin-right: auto; 
    width: 1000px;
    color: white;
    font-family: 'Futura';
    font-size: 12pt;
    text-shadow: 2px 2px 2px black;
}

div.inset {
    text-align: left; 
    padding: 1em; 
    margin-left: auto; 
    margin-right: auto; 
    width: auto;
}

div.footer {
    text-align: center;
    padding: 1em;
    margin-bottom: 100px; 
    color: white;
    font-family: 'Futura';
    font-size: 12pt;
    text-shadow: 2px 2px 2px black;
}

iframe {
    border: 5px solid #500000;
}

select, button {
    margin: .5em;
    padding: .25em;
}

span.label {
    margin-right: 1em;
}

table {
    width: 100%
}

th {
    background-color: #FFFFFF33 
}

td {
    background-color: #FFFFFF22 
}

td.small {
    text-align: center;
}

th, td {
    padding: .5em
}