body {
  --background-color: #002B36;
  --light: #FDF6E3;
  --blue: #2AA198;
  --ourple: #6C71C4;
  --dark: #073642;
  --shadow: #586E75;
  --accent: #D33682;
  background: var(--background-color);
  color: var(--accent);
}

h1 {
  text-shadow:
    10px 10px 3px var(--dark);
  font-size: 400%;
  text-align: center;
}

h2 {
  text-align: center;
}

.music {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.songimg {
  width: 10cm;
  border-radius: 10px;
  margin: 40px;
  box-shadow: 20px 20px 5px var(--shadow);

  transition: border-radius, box-shadow;
  transition-timing-function: ease;
  transition-duration: 0.5s;
  display: inline-block;
  text-align: center;
  background-color: var(--dark);
}

.songimg>img {
  width: 10cm;
  height: 10cm;
  border-radius: 10px;
  box-shadow: 0 0 15px 5px var(--shadow);
  transition: border-radius, box-shadow;
  transition-timing-function: ease;
  transition-duration: 0.5s;
}

.songimg:hover {
  box-shadow: 0px 0px 0 20px var(--accent);
}

.songimg:hover>img {
  border-radius: 2px;
  box-shadow: none;
}

p {
  color: var(--light);
  text-align: center;
}

a:link {
  color: var(--blue);
}

a:visited {
  color: var(--ourple);
}

audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-panel {
  background-color: var(--blue) !important;
  color: var(--blue) !important;
}

#avatar {
  width: 8cm;
  display: flex;
  justify-self: center;
}

audio {
  padding-top: 10px;
}

.download {
  margin-top: 1px;
}