html,
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #219ebc;
  font-family: Arial, Helvetica, sans-serif;
}

canvas {
  display: block;
}

#cover {
  width: 640px;
  height: 640px;
}

#loginHolder {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#spotifyLogin {
  width: 25vw;
  height: 15vw;
  background-color: white;
  border-radius: 2vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#spotifyLoginBTN {
  width: 15vw;
  padding: 1vw 0;
  border-radius: 15vw;
  font-size: 1.5vw;
  font-weight: 600;
  color: white;
  background-color: green;
  border: none;
  cursor: pointer;
}

#spotifyLogin p {
  max-width: 15vw;
  text-align: center;
  font-size: 0.75vw;
  color: gray;
}

#defaultCanvas0 {
  margin-top: 9vh;
}

#canvasHolder {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-around;
  align-items: center;
}

#trackData {
  position: relative;
  margin-top: -30vh;
  margin-bottom: 30vh;
}

/* Media Controls */

#trackControls {
  margin-top: -28vh;
  margin-bottom: 28vh;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

#previousCTRL,
#playPauseCTRL,
#nextCTRL {
  position: relative;
  width: 1.5vw;
  height: 1.5vw;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
}

#previousCTRL {
  background-image: url('../images/next.svg');
  transform: rotate(180deg);
}

#playPauseCTRL {
  background-image: url('../images/play.svg');
  margin: 0 3vw;
}

#nextCTRL {
  background-image: url('../images/next.svg');
}

#cover {
  position: absolute;
  top: 200vh;
}

@media only screen and (max-width: 700px) {
  #spotifyLogin {
    width: 75vw;
    height: 20vh;
  }

  #spotifyLoginBTN {
    width: 50vw;
    height: 10vw;
    font-size: 4vw;
  }

  #spotifyLogin p {
    max-width: 40vw;
    font-size: 2vw;
  }

  #defaultCanvas0 {
    max-width: 125vw;
    aspect-ratio: 1;
    max-height: 125vw;
  }

  #trackData {
    margin-top: -40vw;
    margin-bottom: 40vw;
    font-size: 2vw;
  }

  #trackData p {
    max-width: 80vw;
  }

  #trackControls {
    margin-top: -35vw;
    margin-bottom: 35vw;
  }

  #previousCTRL,
  #playPauseCTRL,
  #nextCTRL {
    width: 4vw;
    height: 4vw;
  }

  #playPauseCTRL {
    margin: 0 8vw;
  }
}