*{
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    
}

html { 
    background-image: url(images/Topo2.svg); 
    background-size: cover;
    background-size: cover;
    background-size: cover;
    background-size: cover;
}

/* styles the link buttons in the API content */
a{
    border-radius: 24px !important;
    margin-left: 0;
    padding-left: 32px !important;
    padding-right: 32px !important;
    font-weight: 700;
    letter-spacing: 3px !important;
}

header{
    text-align: center;
    width: 100%;
    padding: 80px 0;
    background-image: radial-gradient(at top center, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0.03) 100%), linear-gradient(to top, rgba(255,255,255,0.1) 0%, rgba(143,152,157,0.60) 100%);
 	background-blend-mode: normal, multiply;
    background-blend-mode: screen;
    /* animation magic */
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    z-index: 9999;
    top: 0;
    position: fixed;
    color: white;
    letter-spacing: 8px;

}


header h1{
    font-size: 24px;
    text-indent: 40px;
    font-weight:  bold;
    margin: 0;
    /* background-image: #E4E4E1; */
}

h2{
    font-weight: 700;
    color: #212121;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
}

h6{
    color: #212121;
    font-weight: 300;
    font-size: 24pt;
}

label{
    margin-left: 0;
}

button{
    border-radius: 24px !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    font-weight: 700;
    letter-spacing: 3px !important;
    margin-bottom: 32px !important;
}

h6{
    width: 100%;
}

p{
    font-weight: 300;
}

span{
    font-weight: 700;
    color: #212121;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
}

.backgroud{
   height: 100%;
}

.flex{
    display: flex;
    
}



.title{
    height: 100px;
    margin-top: 0;
    text-align: left;
    padding-top: 32px;
    padding-left: 64px;
    font-size: 24px;
    color:black;
    /* opacity: 0.4; */
    background-color:rgba(255, 255, 255, 0.39);
}
.title{
    height: 100px;
    margin-top: 0;
    text-align: left;
    padding-top: 32px;
    padding-left: 64px;
    font-size: 32px;
    color:white;
    width: 100%;
} 

.container{
    padding-top:20px;
}




.shrink{
    padding: 20px 0;
}

.carousel{
    height: 700px !important;
}

#spacer{
    padding-top: 48px;
}

#playlist-image{
    width: 400px !important;
    /* height: 300px !important; */
    padding-left: 48px;
    padding-right: 64px;
}

#playlist-name-title{
    text-align: left;
    padding-left: 48px;
    padding-top: 32px;
}

#car-container{
    display:flex;
   
}

#playlist-info{
    text-align: left;
    margin-top: 0;
    padding-bottom: 24px;
}

#tracks{
    text-align: left;
    padding-bottom: 24px;
}

#car-height{
    height: 575px;
    width: 100%;
    margin: 0;
    overflow: visible;
    padding-left: 64px;
    padding-right: 100px;
}

.indicators{
   padding: 0;
   position:absolute;
   top:70%;
}

ul.dropdown-content.select-dropdown li span {
    color: black; /* no need for !important :) */
}

.select-dropdown li span {
    color: rgb(6, 26, 34); /* no need for !important :) */
}

.select-dropdown{
    color: black;
}

.collapsible-body {
    background-color: #fafafa !important;
    margin:0 !important;
}

.collapsible-header{
    background-color: #fafafa !important;
}


/* keeps the text fields below the title */
.everything-body{
    padding-top: 250px;
}