:root {
    --main-font: system-ui;
    --accent-color: palegoldenrod;
}


body {
    text-align: center;
    margin: auto;
    background: #d6d6d6;
    background-position: center;
    background-attachment: fixed;
}

#homepage {
    background: #d6d6d6;
    overflow: hidden;
}

#mainImg {
    height: 100vh;
    margin: auto;
    box-shadow: 5px 5px 55px white, -5px -5px 55px white;
}

#content-container {
    position: relative;
    margin: auto;
    width: fit-content;
    margin-top: 17vh;
    margin-bottom: 20vh;
}

#nav-options-container {
    position: absolute;
    right: 0px;
    top: 0px;
    text-align: right;
    padding-top: 5%;
    padding-right: 2%;
    max-width: 50%;
}

#menubar {
    margin: auto;
    background: linear-gradient(45deg, #2c2c2c, #808080);
    box-shadow: 0px 4px 10px black;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
}

#menu-table {
    width: 100%;
}


#nav-td {
    width: 65%;
    text-align: left;
}

#soc-td {
    width: 35%;
    text-align: right;
}

#navbar {
    text-align: left;
}

#navbar ul {
    margin: 0;
}

#navbar li {
 display: inline;   
 padding-left: 1vw;
 padding-right: 1vw;
 font-size: larger;
}

#navbar a {
    text-decoration: none;
    font-family: sans-serif;
    font-size: x-large;
    font-variant: all-small-caps;
}

#navbar a:hover {
    color: red;
}

.active {
    color: red;
}

.inactive {
    color: white;
}

#socials li {
    display: inline;
    padding-left: 1vw;
    padding-right: 1vw;
    font-size: larger;
}

#socials a:hover {
    color: rosybrown;
}

#socials img {
    height: .75em;
}

#minimized-menubar-div {
    display: none;
    background: linear-gradient(45deg, #2c2c2c, #808080);
    box-shadow: 0px 4px 10px black;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
}

@keyframes slideInFromLeft {
    from {left: -30vw;}
    to {left: 0;}
}

@keyframes slideToLeft {
    from {left: 0;}
    to {left: -30vw;}
}

#minimized-menu-div {
    display: none;
    position: fixed;
    top: 0;
    left: -30vw;
    width: 100%;
    background: linear-gradient(77deg, black, transparent);
    font-size: x-large;
    font-family: var(--main-font);
    height: 100vh;
    z-index: 15;
    text-align: left;
    font-variant: all-small-caps;

}



#minimized-menubtn {
    height: 1rem;
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 16;
}

#minimized-close-btn {
    position: fixed;
    top: 0.5rem;
    right: 0.5rem;
    height: 2rem;
    z-index: 20;
    display: none;
}

#minimized-navbar {
    position: absolute;
    top: 13vh;
    left: 3vw;
    width: 100%;
    font-size: x-large;
    font-family: var(--main-font);
}

#minimized-navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#minimized-navbar li {
    padding-top: .25vh;
    padding-bottom: .25vh;
}

#minimized-navbar li a {
    text-decoration: none;
    display: block;
    color: white;
}

#minimized-navbar li a:hover {
    color: red;
}

#minimized-site-title {
    color: white;
    margin-top: 1vh;
    margin-bottom: 1vh;
    font-family: var(--main-font);
    text-align: center;
}

#minimized-socials {
    position: absolute;
    bottom: 5vh;
    left: 3vw;
    z-index: 16;
}

#minimized-socials ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#minimized-socials li {
    display: inline;
    padding-right: .5vw;
}

#minimized-socials img {
    height: 1rem;
}

#homepage-socials {
    text-align: center;
    position: absolute;
    right: 20vw;
    bottom: 0;
    width: 22vw;
    background: rgba(0,0,0,.9);
    border-top-left-radius: 2vh;
    border-bottom: 1px solid black;
    box-sizing: border-box;
    border-left: 2px solid white;
}

#homepage-socials li {
    display: inline;
    padding-left: .5vw;
    padding-right: .5vw;
    font-size: larger;
}

#homepage-socials ul {
    padding-left: 0;
    display: inline-block;
    width: 100%;
}

#homepage-socials img {

}

#homepage-content-container {
    padding-top: 3vh;
    background: url('images/hippies_roof3.png');
    background-repeat: no-repeat;
    background-position-x: 3vw;
    background-size: contain;
    background-color: black;
}

#homepage-pic {
    width: 58vw;
    border-top: 3px solid black;
    aspect-ratio: 1.4615;
    vertical-align: middle;
    border-right: 2px solid white;
}

#img-link-container {
    position: absolute;
    top: 0;
    right: 0;

}

#img-link-container table {
    text-align: left;
    position: absolute;
    right: 20vw;
    padding-left: 2vw;
    width: 22vw;
    max-width: 25vw;  
    margin-top: 2vh;
}

#nav-options-container a {
    display: block;
    max-width: fit-content;
}

#title-bar {
    background: white;
    text-align: left;
    position: relative;
    box-sizing: border-box;
    border-top: 1px solid #130f10;
}

#lower-portion-div {
    text-align: left;
    position: relative;
    background: rgba(255,255,255,.2); 
    width: 100vw;
    border-bottom: 2px solid black;
}

#text-div {
    text-align: right;
    position: relative;
    background: rgba(255,255,255,.4);
}

#ronbrunk {
    height: 20vh;
    margin-left: 1vw;
    margin-top: 1vh;
}

.icon {
    height: 20px;
}

.nav-link {
    position: relative;
}

.nav-link img {
    max-height: 8vh;
}

.nav-link-sizeup img {
    max-height: 9.5vh;
}

.hover-hide {
    opacity: 1;
    position: relative;
}

td:hover .hover-hide {
    opacity: 0;
}

.hover-show {
    opacity: 0;
    position: absolute;
    left: 0;
}

td:hover .hover-show {
    opacity: 1;
}

#bonus-title-div { 
    position: absolute;
    right: 0;
    top: 0;
    background: #141414;
    width: 20vw;
    text-align: center;
    border-left: 2px solid white;
    z-index: 8;
    box-sizing: border-box;
}

#bonus-title {
    color: white;
    font-size: xxx-large;
    margin-top: 0;
    margin-bottom: 0;
}

#new-releases {
    width: 50%;
    margin-top: 4vh;
}

#bonus-content {
    width: 20vw;
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(0,0,0,.6);
    font-size: x-large;
    border-left: 2px solid white;
    box-sizing: border-box;
    text-align: center;
}

#bonus-header {
    color: var(--accent-font);
    font-family: system-ui;
}

#bonus-table-container {
    overflow-y: auto;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

#bonus-table-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

#bonus-content-table {
    width: 75%;
    border-spacing: 0px;
    margin: auto;
}

#bonus-content-table td {
    width: 80%;
    padding-top: 2vh;
}

#bonus-content-table img {
    width: 90%;
    aspect-ratio: 1 / 1;
    padding: 1vh;
    background: white;
}

#bonus-content-table img:hover {
    background: rgba(255,255,255,.7);
}

#view-bops-btn {
    text-decoration: none;
    color: black;
    vertical-align: middle;
}

#view-bops-btn-div {
    background: rgba(255,255,255,1);
    padding-top: 0.5vh;
    padding-bottom: 0.5vh;
    width: 40%;
    margin: auto;
    font-family: var(--main-font);
    padding-left: 1vw;
    padding-right: 1vw;
    margin-top: 2vh;
    margin-bottom: 3vh;
    font-size: smaller;
}

#view-bops-btn-div:hover {
    background: rgba(255,255,255,.7);
}

#bops-table {
    border-spacing: 0 5vh;
    margin-top: -4vh;
}

#bops-table td {
    width: 25%;
    padding-left: 1vw;
    padding-right: 1vw;
    vertical-align: top;
}

#bops-table tr {
    margin-top: 1.5vh;
    margin-bottom: 1.5vh;
}

#bops-table img {
    height: 300px;
    width: 300px;
    box-shadow: 2px 2px 5px black;
}

#bops-table a {
    text-decoration: none;
    font-family: var(--main-font);
}


.album-title {
    font-family: system-ui;
    margin-top: 0;
    padding-left: 2vh;
    padding-right: 2vh;
    font-size: large;
    margin-bottom: 1.5vh;
    color: grey;
    height: 3rem;
    margin-top: 0.5vh;
}

.listen-btn {
    background: rgba(0,0,0,.2);
    padding-top: 1.5vh;
    padding-bottom: 1.5vh;
    color: black;
    width: 40%;
    margin: auto;
    font-family: var(--main-font);
    margin-bottom: 5.5vh;
    border: 1px solid dimgrey;
    box-shadow: 2px 2px 5px dimgrey;
}

.listen-btn:hover {
    background: rgba(0,0,0,.5);
    color: white;
    border: 1px solid white;
}

#blurbs-container {
    text-align: center;
    background: white;
    border-radius: 1vh;
    margin: auto;
    width: 80%;
    box-shadow: 5px 5px 15px black;
    margin-bottom: 5vw;
    margin-top: 10vh;
}

.blurb {
    display: inline-grid;
    color: black;
    padding: 5vh;
    box-sizing: border-box;
    width: 100%;
}

.blurb-pic {
    box-shadow: 2px 2px 5px black;
    margin: 2vh;
    max-height: 45vh;
    max-width: 50vw;
}

.shade-bg {
    /*background: rgba(188,143,143,.4);*/
    background: rgba(231, 174, 179, .7);
}

.quote {
    text-align: center;
    font-family: sans-serif;
    color: black;
    font-size: large;
    display: block;
}

.source {
    text-align: center;
    color: brown;
    font-family: sans-serif;
    font-size: 2em;
    padding: 1vh;
    display: block;
}

.creds {
    color: brown;
    font-family: sans-serif;
    display: block;
    margin: auto;
}

.fiftyWidth {
    width: 50%;
}

#table1 {
    padding: 1vh;
}

#table2 {
    padding-left: 1vw;
    padding-right: 1vw;
}

#table2 td {
    width: 33%;
}

#table3 {
}

#table3td1 {
    width: 40%;
}

#table3td2 {
    width: 60%;
    padding-right: 5vw;
}

#table4 {
}

#table4 td {
    width: 33%;
}

#table5-div {
    margin-top: 6vh;
}

#table5 td {
    width: 50%;
}

#table6 {
    padding-left: 2vw;
    padding-right: 2vw;
}

#table6 td {
    width: 33%;
}

#table7 td {
    width: 50%;
    padding-left: 2vw;
    padding-right: 2vw;
}

#table8 td {
    width: 50%;
}

#table9 td {
    
}

#table9td1 {
    width: 60%;
}

#table9td2 {
    width: 30%;
}

#table10 td {
    width: 33%;
}

.table-margins {
    margin-top: 3vh;
    margin-bottom: 3vh;
}

.table-padding {
    padding-left: 3vw;
    padding-right: 3vw;
}

#item1 {
    width: 90%;
    margin: auto;
}


.oneOf1 {
    width: 75%;
    margin: auto;
    padding-top: 2vh;
    padding-bottom: 3vh;
}

#item2 {
}

.rowOf3 {
    position: relative;
    background: white;
}

.oneOf3 {
    display: inline-block;
    width: 27%;
    margin: 2vh;
}

.rosyBg {
    background: rgba(188,143,143,.4);
}

.rowOf2 {
    margin-bottom: 3vh;
    margin-top: 3vh;
    position: relative;
}

.oneOf2 {
    width: 47%;
    margin-left: 55vh;
    display: inline-block;
}

#mercylounge {
    margin: 2vh;
}

#jazzfest {
    margin: 2vh;
}

#redrooster {
    max-height: 45vh;
    margin: 2vh;
}

#zerohour {
    height: 55vh;
    margin: 2vh;
}

.video-div {
    margin-top: 10vh;
    margin-bottom: 2vh;
    box-shadow: 5px 5px 15px black;
    text-align: center;
    vertical-align: middle;
}

.youtube-vid {
    width: 50vw;
    height: 28vw;
    display: block;
}

#books-div {
    margin-top: 10vh;
}

.book {
    margin:auto;
    background: rgba(255,255,255,.2);
    padding: 2vh;
    font-family: sans-serif;
}

.book-table {
    background: white;
    width: 80%;
    margin: auto;
    margin-top: 2vh;
    margin-bottom: 2vh;
    padding: 2vh;
}

.book-img img {
    height: 40vh;
    margin-left: 1vw;
    margin-right: 1vw;
}

.book-title {
    font-size: xx-large;
    text-align: left;
}

.book-summary {
    text-align: justify;
    margin-top: 6vh;
    width: 90%;
}

#bio-container {
    background: white;
    margin: auto;
    width: 80%;
    padding: 2vh;
    margin-top: 10vh;
    margin-bottom: 5vw;
    overflow: auto;
    font-family: sans-serif;
}

#bold {
    font-weight: 900;
    font-size: larger;
    color: #e4000;
}

.bio-p {
    padding: 2vh;
    font-size: larger;
    margin: auto;
    text-align: justify;
}

.bio-pic {
    max-width: 40vw;
    margin: 3vh;
    box-shadow: 2px 2px 5px black;
}

.pic-right {
    float: right;
}

.pic-left {
    float: left;
}

.pad-right {
    margin-right: 2vw;
}

#streaming {
    background: rgba(0,0,0,.6);
    background-position: bottom;
    border-radius: 1vh;
    margin: auto;
    width: 80%;
    padding: 2vh;
    margin-top: 3vh;
    margin-bottom: 6vw;
    font-family: sans-serif;
    font-size: x-large;
    color: white;
    box-shadow: 2px 2px 5px black;
}

#streaming img {

}

#streaming-table {
    width: 100%;
}

#streaming-table td {
    padding-top: 5vh;
    font-size: large;
}

#streaming-row2 td {
    padding-top: 2vh;
    font-size: 1em;
    color: white;
}

#news-articles {
    width: 80%;
    margin: auto;
}

#news-articles a {
    text-decoration: none;
    text-align: left;
}

.article-summary-td {
    width: 75%;
    vertical-align: top;
}

.article-img-td {
    width: 25%;
}

.article-table {
    width: 100%;
    margin: auto;
    font-size: x-large;
    color: black;
    box-shadow: 2px 2px 5px grey;
    margin-top: 3vh;
    margin-bottom: 3vh;
    padding: 1.5vh;
    background: white;
}

.article-title {
     font-family: var(--main-font);
     font-size: large;
}

.article-source {
    border-bottom: 1px solid black;
    padding-bottom: .25em;
    margin-bottom: .25em;
}

.article-img {
    width: 100%;
    margin-top: 1vh;
    margin-right: 3vh;
}