/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  #musicplayer {
    display: flex;
    flex-direction: row;
  }
  .album {
    display: block;
  }
  .device {
    display: flex;
    justify-content: center;
    flex-direction: row;
  }
  .information {
    align-content: center;
  }
  .buttons {
    flex-direction: column;
  }
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  #musicplayer {
    display: flex;
    flex-direction: row;
  }
  .album {
    display: block;
  }
  .device {
    display: flex;
    justify-content: center;
    flex-direction: row;
  }
  .information {
    align-content: center;
  }
  .buttons {
    flex-direction: column;
  }
}
/*var width = document.getElementById('foo').offsetWidth;*/
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  #musicplayer {
    display: flex;
    flex-direction: column;
  }
  .album {
    display: block;
  }
  .device {
    display: flex;
    justify-content: center;
    flex-direction: row;
  }
  .information {
    align-content: center;
  }
  .buttons {
    flex-direction: column;
  }
}

body {
  background-color: rgb(19, 19, 19);
}
#musicplayer{
  padding: 10px;
  min-width: 0em;
}

.songtitle, .track-info, .information{
  padding:5px;
  color: white;
  min-width: 1em;
}

.buttons{
  display: flex; 
  flex-wrap: wrap;
  gap: 0.1em;
  justify-content: center;
  font-size:17px; /* size of controls */
  min-width: 0em;
  
}
.buttons button {
  background-color: lightgrey;
  width: 30px;
  height: auto;
  color: #000;
  border: none;
  border-style: outset;
}
.buttons button:hover {
  background-color: #e1e1e1;
  /*  border-color: #bebebe;*/
  border-style: outset;
}
.buttons button:active {
  background-color: lightgrey;
  border-style: inset;
}
.buttons button.maxed :hover {
  background-color: #747474;
  /*border-color: #464646;*/
  border-style: outset;
}
.buttons button.maxed {
  background-color: #747474;
  /*border-color: #464646;*/
  border-style: outset;
}

.buttons div{
    width:33.3%;
}

.volume-icon{
    font-size:22px; /* size of volume icon */
}
.information {
  background-image: url(/images/musicPlayer/screenOverlay.png);
  background-repeat: repeat;
  background-size: 300px;
  border-radius: 0.4em;
  color: black;
  border-color: aliceblue;
  box-shadow:
    0.1em 0.1em 0.4em #7696A0,
    -0.1em -0.1em 0.4em #7696A0;
  margin: 0.5em;
  width: 100%;
  flex-wrap: wrap;
}

@keyframes glitch-1 {
  0%,
  12%,
  15%,
  52%,
  55%,
  82%,
  85%,
  100% {
    opacity: 1;
    transform: scaleX(1) scaleY(1);
    color: #000;
  }

  13% {
    opacity: .8;
    transform: scaleY(1.1);
    color: #1e1d1d;
  }

  53% {
    opacity: .8;
    transform: scaleX(0.9);
    color: #000;
  }

  83% {
    opacity: 1;
    color: #1e1d1d;
  }
}

@keyframes glitch-2 {
  13% {
    color: #1e1d1d;
  }

  53% {
    color: black;
  }

  83% {
    color: #1e1d1d;
  }
}

.album {
padding: none;
width: fit-content;
padding-right: 50px;
margin: 0em;
}
.track-info {
    background-color: none; /* background color of top two boxes */
    color: black;
    height: fit-content;
    padding: 0.1em;
    margin: 0.2em 0.1em;
}
.track-info p {
  animation: glitch-1 2s infinite linear;
    width: fit-content;
    height: fit-content;
    margin: 0em;
}
.device {
  padding: 0em;
  margin: 0em;
  gap: 0.2em;
  width: 100%;
  min-width: 0em;
}
.albumImg {
  position: relative;
  width: 100px;
  height: auto;
  background-color: black;
  color: black;
  z-index: 999;
}
.cdImg {
  position: absolute;
  width: 100px;
  height: auto;
  margin-left: -50px;
  z-index: 800;
}
.cdImg.spinning {
  -webkit-animation: spin 2s linear infinite;
  -webkit-animation: spin 4s linear infinite;
  -moz-animation: spin 4s linear infinite;
  animation: spin 4s linear infinite;
}
@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.cdImg:hover {
-webkit-animation: none;
-webkit-animation: none;
-moz-animation: none;
animation: none;
}

  .song-duration  {
    width: 100%;
    height: fit-content;
    padding: 0em;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
      flex-wrap: wrap;
  }
  .song-duration p {
    animation: glitch-1 2s infinite linear;
    margin: 0.1em;
  }
  .current-time {
    animation-delay: 0.5s;
  }
  .total-duration {
    animation-delay: 0.2s;
  }
  .now-playing {
    margin: 0.1em;
    width: 100%;
    text-align: center;
    animation: glitch-1 2s infinite linear;
    animation-delay: 0.4s;
  }