@media (min-aspect-ratio: 1/1) {
  .song-layout {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    display: grid;
    grid-template: "title  logo   name"   15vh
                   / 1fr   12vh   1fr;
    width: 100vw;
    height: 15vh;
  }
  .lyrics {
    position: absolute;
    left: 0;
    top: 15vh;
  }
  .background {
    z-index: -1;
    position: fixed;
    width: 100vw;
    height: calc(85vh - 2em);
    left: 0;
    top: 15vh;
    preserveAspectRatio: "xMidYMid meet";
  }
  #title h1, #name h2 {
    font-size: 2vw;
  }
}
@media (max-aspect-ratio: 1/1) {
  .song-layout {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    display: grid;
    grid-template: "logo   title" 7.5vh
                   "logo   name"  7.5vh
                   / 15vh  calc(100vw - 15vh);
    width: 100vw;
    height: 20vh;
  }
  .lyrics {
    position: absolute;
    left: 0;
    top: 20vh;
    font-size: 1.4em;
  }
  .background {
    z-index: -1;
    position: fixed;
    width: 100vw;
    height: calc(80vh - 2em);
    left: 0;
    top: 20vh;
    preserveAspectRatio: "xMidYMid meet";
  }
  #lyrics {
    flex-wrap: wrap;
  }
  .lyrics-left, .lyrics-right {
    width: 100%;
  }
  #title h1, #name h2{
    font-size: 4vw;
  }
}
.text-align {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
#logo {
  grid-area: logo;
  background-color: #101010;
}
#logo img {
  width: 100%;
  height: 100%;
  preserveAspectRatio: "xMidYMid meet";
}
#title {
  grid-area: title;
  text-transform: uppercase;
  background-color: #101010;
  font-family: serif;
}
#name {
  grid-area: name;
  text-decoration: none;
  text-transform: uppercase;
  background-color: #101010;
  color: #808080;
  font-family: serif;
}
#name:hover {
  text-decoration: underline;
}
#name:hover h2 {
  background-color: #202020;
}
.lyrics {
  display: flex;
  justify-content: space-between;
  width: 100vw;
}
.lyrics-left {
  padding: 10pt;
  text-align: left;
}
.lyrics-right {
  padding: 10pt;
  text-align: right;
}
.lyrics-block {
  padding: 10pt;
  text-align: right;
}
p {
  margin: 2pt;
}
span {
  background: #101010;
  box-shadow: 0 0 2pt 2pt #101010;
}
.dropcap {
  width: 1.2em;
  height: 1.2em;
  position: relative;
  top: 0.1em;
}
.controls {
  z-index: 2;
  position: fixed;
  bottom: 7vh;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0;
  right: 0;
}