*  {
    box-sizing: border-box;
}

body {
    background-color: rgb(99, 0, 0);
    background-color: #222222;
    background-color: #000000;
    text-align: center;
    min-height: 100vh;
    max-width: 960px;
    margin:auto;
    display:grid;
    grid-template-rows: auto 1fr auto;
    height:100%;
}



#header {
    display:block;
    color: white;
    width:100%;
    text-align: center;
    overflow:hidden;
}

#header #div_header_image {
    width:100%;
    margin-bottom: -20%;
}

#header #div_header_image #header_image {
    width:100%;
}

#header_links {
    width:100%;
}

#header_links tr {
    display: inline-table;
    background-color: #000000b9;
    height:100%;
}

#header_links td {
    width:15%;
    height:100%;
}

#header_links td img {
    object-fit: contain;
    width: 60%;
}

#header_links a {
    justify-content: center;
    display:flex;
    width: 100%;
    height: 100%;
    font-size: min(50px, 5.5vw);
    vertical-align: middle;
    color: #979797;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-decoration: none;
    font-variant-caps: all-small-caps;
    padding-top:20%;
    padding-bottom:4%;
}

#header_links a:hover {
    background-color: #111111;
    color: rgb(99, 0, 0);
}

#header_links .selected {
    background-color: #111111;
    color: rgb(99, 0, 0);
}


#main_content {
    position:relative;
    display:flex;
    flex-direction: column;
    padding-left: 10%;
    background-color: #111111;
    color: #979797;
    text-align: left;
    padding-left:4%;
    padding-right:4%;
    padding-top:4%;
    padding-bottom:4%;
    width:100%;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#main_content #content_video {
    text-align: center;
    height: min(calc(100vw * 0.5), 50vh);
}

#main_content #release_list {
    width:100%;
}

.music_release {
    display:flex;
    margin-bottom: 5%;
}

.release_image {
    width:100%;
    flex: 50%;
    align-self: baseline;
}

.release_info {
    margin-left:2%;
    flex: 50%;
}


#main_content #music_table {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#release_title p {
    font-size: 1vw;
    margin-top: -10%;
}

#release_title h1 {
    font-size: 2vw;
}


.release_tracklist {
}

.release_tracklist a {
    color:white;
    text-decoration: underline;
}

.release_tracklist a:hover {
    color:rgb(99, 0, 0);
    cursor: pointer;
}

.release_track {
    margin:1%;
    margin-bottom: 3%;
}

#release_title {
    display:inline-block;
}

.release_links {
    display:inline-flex;
    padding-bottom: 4%;
}

.release_link {
    padding-right:5%;
    width:11%;
}

.release_link a{
    color: white;
}

.release_personnel {
    padding-top:4%;
}

.release_personnel .name {
    padding-left:2%;
}

.text {
    font-size: 3vw;
}


@media (max-width: 980px) {
    .release_info, .release_image {
      flex: 100%;
    }

    .music_release {
        flex-wrap:wrap;
    }

    #release_title p {
        font-size: 5vw;
        margin-top: -10%;
    }
    
    #release_title h1 {
        font-size: 9vw;
    }

    .release_tracklist {
        font-size: 5vw;
    }
    
    .release_personnel {
        font-size: 5vw;
    }

    .text {
        font-size: 5vw;
    }

    .release_link {
        margin-right:6%;
        width:15%;
    }

}







#footer {
    padding-top:6%;
    display:block;
    color: white;
    width:100%;
    text-align: center;
    overflow:hidden;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-decoration: none;
    font-variant-caps: all-small-caps;
    font-size: min(20px, 2vw);
    color: #979797;
    margin-bottom: 4%;
}


#footer_links td {
    width:15%;
    color: #979797;
}

#footer_links a {
    color: #979797;
}

#footer_links a:hover {
    color: white;
}

#footer_email {
    color: #979797;
}

#footer_email a {
    color: #979797;
}

#footer_email a:hover{
    color: white;
}

#footer_bottom {
    margin-top:3%;
    font-size: min(20px, 3.5vw);
}