@import url('https://fonts.googleapis.com/css?family=Sunflower:300&display=swap');
*{
   box-sizing: border-box;
}
html {
   display: flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
   width: 100vw;
   height: 100vh;
   margin:0;
   padding:0;
   left:0; 
   right:0;
   top:0; 
   bottom:0;
}

body {
   position: relative;
   width: 100vw;
   /* border: 20px solid black; */
   box-sizing: border-box;
   /* border-top: 0px;
   border-radius: 0 0 20px 20px; */
   padding-top: 14px;
   padding-bottom: 60px;
}

.eg-flick-viewport {
   perspective: 160px;
}
.eg-flick-viewport, .eg-flick-camera {
   transform-style: preserve-3d;
}

.panel-wrapper {
   /* border: 2px solid red; */
   /* border-bottom: 1px solid green; */
   position: relative;
   display: flex;
   width: 260px;
   height: 320px;
   /* align-items: center;
   justify-content: center; */
   /* transform-style: preserve-3d; */
}

.plane1 {
   background-color: rgb(219, 218, 218);
   /* background: #a0a0a0; */
   position: absolute;
   bottom: 20%;
   width: 100%;
   height: 30%;
   border: 5px solid black;
   /* box-sizing: border-box; */
   transform-style: preserve-3d;
   transform-origin: bottom;
   transform: rotateX(45deg);
}
/* .plane1:after {
   content: '';
   position: absolute;
   top: -5px;
   left: 10%;
   width: 10px;
   height: 5px;
   background: white;
} */

.product-wrapper {
   /* border: 2px solid black; */
   position: absolute;
   bottom: 20%;
   width: 100%;
   transform-origin: bottom;
   transform-style: preserve-3d;
   transform: rotateX(-45deg);
}

.product-title {
   display: block;
   text-align: center;
   /*      or    - to make it centre*/
   /* display: inline-block; */
   /* width: 100%; */
   /* color: rgba(30, 30, 30, 0); */
   font-family: 'Sunflower', sans-serif;
   /* transform-origin: bottom; */
   font-size: 32px;
   margin-bottom: 20px;
}

.product {
   width: 50%;
   display: block;
   margin-left: auto;
   margin-right: auto;
   transform-origin: bottom;
   transform: rotateX(44deg);
   /* user-drag: none;  */
   user-select: none;
   -moz-user-select: none;
   -webkit-user-drag: none;
   -webkit-user-select: none;
   -ms-user-select: none;
}

.product.selected {
   animation-name: bounce;
   animation-duration: 1s;
   animation-iteration-count: infinite;
   animation-fill-mode: forwards;
   animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); 
   /* easeOutBack */
   animation-direction: alternate;
}

.plane2 {
   position: absolute;
   width: 100%;
   height: 10%;
   bottom: 10%;
   border: 5px solid black;
   border-top: 0px;
   box-sizing: border-box;
   /* background: #a0a0a0; */
   background-color: rgb(219, 218, 218);

}
.plane2:after {
   content: '';
   position: absolute;
   top: -5px;
   right: 10%;
   width: 10px;
   height: 5px;
   background: linear-gradient(to bottom, white, white 50%, #a0a0a0 50%, #a0a0a0);
}

.player-mock {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
   text-align: center;
}

.player-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
   padding: 20px;
   text-align: left;
}

.player-border {
   display: flex;
   position: relative;
   align-items: center;
   justify-content: space-between;
   border: 3px solid black;   
   width: 320px;
   border-radius: 15px;
   padding: 10px;
   box-sizing: border-box;
}
.player-border:before {
   content: '';
   position: absolute;
   top: -5px;
   left: 10%;
   width: 5px;
   height: 5px;
   background: white;
}
.player-border:after {
   content: '';
   position: absolute;
   bottom: -5px;
   right: 10%;
   width: 5px;
   height: 5px;
   background: white;
}

.spin-img {
   width: 10%;
   animation-name: spin;
   animation-duration: 5000ms;
   animation-iteration-count: infinite;
   animation-timing-function: linear; 
}

.music-title {
   font-size: 20px;
   margin-left: 5%;
   font-family: 'Sunflower', sans-serif;
}

.buttons {
   display: inline-flex;
}

img.buttons {
   width: 8%;
   margin-left: 2%;
}

@keyframes spin {
   from {
      transform:rotate(0deg);
   }
   to {
      transform:rotate(360deg);
   }
}

@keyframes bounce {
   from {
      transform: none;
   }
   to {
      transform: translateZ(40px);
   }
}

.github-link {
  position: fixed;
  right: 10px;
  bottom: 10px;
}

.link {
  font-family: 'Bungee', cursive;
  color: black;
  text-decoration: none;
}
.link:hover {
  color: hotpink;
}

#menu li {
  display:inline;
  margin-right:18px;
}