.logo h1 {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 1.5em;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
  /* background-color: rgba(256, 256, 256, 0.15); */
}

.max-800px {
  max-width: 800px;
}

table.table.tracklist td {
  border-width: 0px;
  padding-right: 0px;
}

table.table.tracklist tr.album td.listing-title {
  font-weight: bold;
  text-transform: uppercase;
}

@media screen and (min-width: 900px) and (max-width: 1099px) {
  table.table.tracklist tr td.listing-title {
    width: 120px;
  }
}

@media screen and (min-width: 1100px) and (max-width: 1205px) {
  table.table.tracklist tr td.listing-title {
    width: 160px;
  }
}

@media screen and (min-width: 1206px) {
  table.table.tracklist tr td.listing-title {
    width: 230px;
  }
}

table.table.tracklist tr.album > td {
  padding-bottom: 30px;
}

footer.footer {
  background-color: transparent;
  /* background-color: rgba(256, 256, 256, 0.15); */
}

.navbar {
  background-color: inherit;
  /* background-color: rgba(256, 256, 256, 0.35); */
}

table.table {
  background-color: rgba(256, 256, 256, 0.87);
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.album-cover, .art {
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.art-content {
  text-align: center;
}

.art-content img {
  width: 800px;
}

.home-nav {
  font-family: 'Courier New', Courier, monospace;
  font-weight: 600;
  font-size: 24px;
  color: white;
}

.logo {
  background-color: rgba(256, 0, 0, 0.25);
  padding: 0px 5px;
  margin-bottom: 2px;
}

.home-nav a {
  background-color: rgba(256, 0, 0, 0.25);
  padding: 0px 5px;
  display: inline-block;
}

.home-nav a:nth-child(1), .home-nav a:nth-child(3) {
  transform: rotate(1deg);
}

.home-nav a:nth-child(2) {
  transform: rotate(-1deg);
}

.home-nav a:hover:nth-child(1), .home-nav a:hover:nth-child(3) {
  transform: rotate(-2deg);
}

.home-nav a:hover:nth-child(2) {
  transform: rotate(2deg);
}

main.about {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: rgba(255, 255, 255, 0.4);
  padding: 20px 40px 40px 40px;
  color: black;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

main.about p {
  margin-top: 20px;
}

a svg.icon, a .icon {
  height: 24px;
  width: 24px;
  fill: currentColor;
  vertical-align: text-bottom;
  font-size: 20px;
}

table.tracklist td .dropdown {
  margin-right: 10px;
}

.music-single .columns {
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
}

.music-single h1.title {
  font-family: 'Courier New', Courier, monospace;
  font-weight: 100;
  font-size: 40px;
  background-color: rgba(256, 0, 0, 0.25);
  padding: 0px 20px;
  display: inline-block;
  position: absolute;
  margin-left: 0px;
  /* transform: rotate(-11deg); */
  margin-top: -50px;
}

.music-single .columns .content.cover {
  max-width: 100%;
}

svg.icon.applemusic-icon, i.icon.applemusic-icon {
  fill: rgba(252, 60, 68, 1.0);
  color: rgba(252, 60, 68, 1.0);
}

svg.icon.itunes-icon, i.icon.itunes-icon {
  fill: rgb(251, 91, 197);
  color: rgb(251, 91, 197);
}

svg.icon.spotify-icon {
  fill: rgb(29, 185, 84);
}

svg.icon.youtube-icon, svg.icon.youtubemusic-icon {
  fill: rgb(255, 0, 0);
}

svg.icon.tidal-icon {
  fill: rgb(0,0,0);
}

svg.icon.deezer-icon {
  fill: rgb(254, 170, 45);
}

svg.icon.amazon-icon, i.icon.amazon-icon {
  fill: rgb(255, 153, 0);
  color: rgb(255, 153, 0);
}