@import url('https://fonts.googleapis.com/css2?family=Squada+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

body{
  background-color: black;
 
}
.colorsAnimation{
   animation-name: colors;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
header{
  color: white;
  text-align: center;
  font-family: 'Squada One', cursive;
  text-shadow: 5px 5px darkblue;
}
@keyframes colors{
  from{
    background: linear-gradient(73deg, rgba(2,0,36,1) 0%, rgba(9,115,121,1) 49%, rgba(33,172,200,1) 100%);
  }
  to{
    background: linear-gradient(73deg, rgba(11,4,121,1) 0%, rgba(18,101,106,1) 49%, rgba(89,144,156,1) 100%);
  }
}
.controls{
  color: white;
  font-size: 30px;
  margin: auto;
   -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
.controls:hover{
  font-size: 28px;
}
.controls:active{
  color:aqua;
}
.playercontrols{
 text-align: center;
}
.playercontrols i{
  margin-left:10px;
  margin-right:10px;
}
.trackdetails{
  color:white;
  text-align: center;
  font-family: 'Raleway', sans-serif;
}
.trackdetails p{
  margin: 0;
}
.playerContainer{
  border:1px solid #ccc;
  padding: 5px;
  background-color: rgba(0,0,0,0.6);
  width:100%;
  height:100%;
}
.thumbnail{
  display: block;
  margin:auto;
   border-radius: 3px;
   width: 230px;
   height: 230px;
}
.songChangeAnimation{
  animation-name: fade;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  
}
#mainContainer{
  width: 100vw;
  height: 100vh;
}

@keyframes fade{
  0%{
    filter:opacity(0%);
  }
  100%{
    filter:opacity(100%);
  }

}


@media (min-width: 700px) { 

  .controls{
    font-size:50px;
  }
  .controls:hover{
  font-size: 40px;
}
  .thumbnail{
    width: 500px;
    height: 500px;
  }
 }