/* main site styling*/

.main-title-font{
    color: white;
    text-align: center;
    margin-top: 1vh;
    margin-left: 2vw;
    margin-bottom: 0;
}
.main-title-font:hover{
    color: pink;
    transition: color 0.3s ease-in-out;
}
.main-bg {
    background-image: linear-gradient(#3E3535, #595959);
    background-size: 100vw 100vh;
    background-repeat: no-repeat;
}
.big-list {
    list-style-type: none;
}
.big-list-item{
    margin: 10vh;
}

.big-list-item a{
    text-decoration: none;
    color: white;
    font-size: 5vh;
    background: none;
}

.big-list-item a:hover {
    color: orange;
    transition: color 0.3s ease-in-out;
}

/* fav album styling*/
h1 {
    font-family: 'Zilla Slab', serif;
    font-size: 10vh;
}

h2 {
    font-family: 'Zilla Slab', serif;
    font-size: 3vh;
}

p, a, ul {
    font-family: 'Zilla Slab', serif;
    font-weight: 300;
}


main{
    text-align: center;
    padding: 0;
    margin-top: 0;
    margin-left: 0;
    margin-right:0;
    margin-bottom: 0;
}



h1 a{
    color: inherit;
    text-decoration: none;
}
nav {
    width:100%;
    background-color: #0D0D0D;
    overflow: auto;
    display: flex;
    justify-content:space-evenly;
}

nav a {
    text-align: center;
    padding: 1rem;
    color: white;
    font-size: 17px;
    text-decoration: none;
}

nav a:hover{
    color: orange;
}



.top-left-site-link {
    position: absolute;
    top: 7vh;
    left: 1vw;
}

.intro-text {
    color: white;
    font-size: 1rem;
}

.top-left-site-link a {
    text-decoration: none;
    color: inherit;
}

.bg {
    margin: 0;
}

.bg-title {
    background-image: linear-gradient(#3E3535, #595959);
    background-repeat: no-repeat;
    background-size: cover;
}

.intro-div {
    float: left;
    
}

.album-div{
    margin-top: 1vh;
    margin-right: 1vw;
    float: right;
}

.title-font{
    color: white;
    text-align: left;
    margin-top: 1vh;
    margin-left: 2vw;
    margin-bottom: 0;
}

.intro-section{
    margin-top: 0;
    text-align: left;
    margin-left: 2vw;
}


.album-bar a{
    text-decoration: none;
    font-size: 0;
}

.album-bar{
    width: 40vw;
}


.image-text-container img {
    width: 20vw;
    object-fit: fill;
    height: 40vh;

}

.image-text-container {
    float: left;
    position: relative;
    object-fit: cover;
    overflow: hidden;
    height: 40vh;
    width: 20vw;

}

.image-text {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 2.3vh;
}

.image-text-container .image-text-overlay{
    position: absolute;
    bottom: 0px;
    background: rgba(0,0,0,.8);
    color: #fff;
    width: 100%;
    height: 100%;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
    opacity: 0;
}

.image-text-container:hover .image-text-overlay {
    bottom: 10px;
    opacity: 1;
}

.image-text-container:hover .image-text-overlay:hover {
    bottom: 0;
}

.album-and-tracklist {
    position: absolute;
    right: 1vh;
    top: 30vh;
    width: 50vh;
    height: 70vh;
}

.album-and-tracklist table{
    margin:0;
    padding:0;
    width: inherit;
}

.album-description {
    font-size: 4vh;
    text-align: left;
    margin-left: 10vw;
}

/*
the weyes blood portion of the site
*/
.nav-weyesblood {
    background-color:#825791;
}

.nav-weyesblood a {
    color: #590F1D;
}

.nav-weyesblood a:hover {
    color: #F2B694;
}

.title-card-weyesblood {
    text-align: right;
}

.text-weyesblood {
    color: #F2B694;
}


.subtitle-weyesblood {
    padding: 0;
    margin: 0;
    margin-right: 1vh;
}
.title-weyesblood {
    padding: 0;
    margin: 0;
    margin-top: 5vh;
    margin-right: 2vh;
}

.bg-weyesblood {
    background-color:  rgba(51, 101, 166, 1);
}

.img-weyesblood-album-cover {
    width: inherit;
    margin: 0;
    margin-bottom: -4px;
    padding: 0;
}

.table-weyesblood {
    background-color: #825791;
    border-collapse: collapse;

}
.table-weyesblood tr:hover{
    background-color: #9C71AB;
}

.table-weyesblood th, .table-weyesblood td{
    font-family: 'Zilla Slab', serif;
    color: #590F1D;
    text-align: left;
    padding: 2px;
}

/*
the death grips portion of the site
*/

.nav-deathgrips {
    background-color:#735340;
}

.nav-deathgrips a {
    color: #BFB895;
}

.nav-deathgrips a:hover {
    color: #0D0D0D;
}

.title-card-deathgrips {
    text-align: right;
}


.text-deathgrips {
    color: #0D0D0D;
}


.subtitle-deathgrips {
    padding: 0;
    margin: 0;
    margin-right: 1vh;
}
.title-deathgrips {
    padding: 0;
    margin: 0;
    margin-top: 5vh;
    margin-right: 2vh;
}

.bg-deathgrips {
    background-color:  #A6A15D;
}

.img-deathgrips-album-cover {
    width: inherit;
    margin: 0;
    margin-bottom: -4px;
    padding: 0;
}

.table-deathgrips {
    background-color: #735340;
    border-collapse: collapse;

}
.table-deathgrips tr:hover{
    background-color: #8D6D5A;
}

.table-deathgrips th, .table-deathgrips td{
    font-family: 'Zilla Slab', serif;
    color: #BFB895;
    text-align: left;
    padding: 2px;
}

/*
the kendrick lamar portion of the site
*/

.nav-kendricklamar {
    background-color:#262323;
}

.nav-kendricklamar a {
    color: #BFBFBF;
}

.nav-kendricklamar a:hover {
    color: #403C3B;
}

.title-card-kendricklamar {
    text-align: right;
}

.text-kendricklamar {
    color: #403C3B;
}


.subtitle-kendricklamar {
    padding: 0;
    margin: 0;
    margin-right: 1vh;
}
.title-kendricklamar {
    padding: 0;
    margin: 0;
    margin-top: 5vh;
    margin-right: 2vh;
}

.bg-kendricklamar {
    background-color:  #A6A6A6;
}

.img-kendricklamar-album-cover {
    width: inherit;
    margin: 0;
    margin-bottom: -4px;
    padding: 0;
}

.table-kendricklamar {
    background-color: #262323;
    border-collapse: collapse;

}
.table-kendricklamar tr:hover{
    background-color: #403D3D;
}

.table-kendricklamar th, .table-kendricklamar td{
    font-family: 'Zilla Slab', serif;
    color: #BFBFBF;
    text-align: left;
    padding: 2px;
}

/*
the frank ocean portion of the site
*/

.nav-frankocean {
    background-color:#FFFFFF;
}

.nav-frankocean a {
    color: #455936;
}

.nav-frankocean a:hover {
    color: #000000;
}


.title-card-frankocean {
    text-align: right;
}

.text-frankocean {
    color: #455936;
}


.subtitle-frankocean {
    padding: 0;
    margin: 0;
    margin-right: 1vh;
}
.title-frankocean {
    padding: 0;
    margin: 0;
    margin-top: 5vh;
    margin-right: 2vh;
}

.bg-frankocean {
    background-color:  #D9D9D9;
}

.img-frankocean-album-cover {
    width: inherit;
    margin: 0;
    margin-bottom: -4px;
    padding: 0;
}

.table-frankocean {
    background-color: #FFFFFF;
    border-collapse: collapse;

}
.table-frankocean tr:hover{
    background-color: #CCCCCC;
}

.table-frankocean th, .table-frankocean td{
    font-family: 'Zilla Slab', serif;
    color: #455936;
    text-align: left;
    padding: 2px;
}

/* 
the burial portion of the site
*/

.nav-burial {
    background-color:#595959;
}

.nav-burial a {
    color: #8C8C8C;
}

.nav-burial a:hover {
    color: #BFBFBF;
}

.title-card-burial {
    text-align: right;
}


.text-burial {
    color: #BFBFBF;
}


.subtitle-burial {
    padding: 0;
    margin: 0;
    margin-right: 1vh;
}
.title-burial {
    padding: 0;
    margin: 0;
    margin-top: 5vh;
    margin-right: 2vh;
}

.bg-burial {
    background-color:  #0D0D0D;
}

.img-burial-album-cover {
    width: inherit;
    margin: 0;
    margin-bottom: -4px;
    padding: 0;
}

.table-burial {
    background-color: #595959;
    border-collapse: collapse;

}
.table-burial tr:hover{
    background-color: #404040;
}

.table-burial th, .table-burial td{
    font-family: 'Zilla Slab', serif;
    color: #8C8C8C;
    text-align: left;
    padding: 2px;
}

/* 
the burial portion of the site
*/

.nav-charlixcx {
    background-color:#D94E8F;
}

.nav-charlixcx a {
    color: #590209;
}

.nav-charlixcx a:hover {
    color: #D99F7E;
}

.title-card-charlixcx {
    text-align: right;
}


.text-charlixcx {
    color: #D99F7E;
}


.subtitle-charlixcx {
    padding: 0;
    margin: 0;
    margin-right: 1vh;
}
.title-charlixcx {
    padding: 0;
    margin: 0;
    margin-top: 5vh;
    margin-right: 2vh;
}

.bg-charlixcx {
    background-color:  #655B59;
}

.img-charlixcx-album-cover {
    width: inherit;
    margin: 0;
    margin-bottom: -4px;
    padding: 0;
}

.table-charlixcx {
    background-color: #D94E8F;
    border-collapse: collapse;

}
.table-charlixcx tr:hover{
    background-color: #F368A9;
}

.table-charlixcx th, .table-charlixcx td{
    font-family: 'Zilla Slab', serif;
    color: #590209;
    text-align: left;
    padding: 2px;
}