@import url("https://fonts.googleapis.com/css?family=Inconsolata:400,700");
 @import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");
/* Debugging */
 .debug main * {
	 outline: solid 0.25rem rgba(255, 0, 0, 0.25);
}
 * {
	 box-sizing: border-box;
}
 .animated {
	 animation-duration: 0.5s;
}
 .audioPlayer {
	 position: relative;
	 background-color: #eceff1;
	 min-height: 25rem;
	 width: 20rem;
	 overflow: hidden;
	 padding: 1.5rem;
	 margin: 0 auto;
	 border-radius: 0.5rem;
	 box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
	 user-select: none;
}
 .audioPlayer .nav-icon {
	 width: 15px;
	 height: 12px;
	 position: absolute;
	 top: 1.125rem;
	 left: 1.5rem;
	 transform: rotate(0deg);
	 transition: 0.25s ease-in-out;
	 cursor: pointer;
}
 .audioPlayer .nav-icon span {
	 display: block;
	 position: absolute;
	 height: 2px;
	 width: 100%;
	 background: rgba(0, 0, 0, 0.75);
	 border-radius: 6px;
	 opacity: 1;
	 left: 0;
	 transform: rotate(0deg);
	 transition: 0.5s ease-in-out;
}
 .audioPlayer .nav-icon span:nth-child(1) {
	 top: 0px;
}
 .audioPlayer .nav-icon span:nth-child(2) {
	 top: 5px;
}
 .audioPlayer .nav-icon span:nth-child(3) {
	 top: 10px;
}
 .audioPlayer .nav-icon.isActive span:nth-child(1) {
	 top: 5px;
	 transform: rotate(135deg);
}
 .audioPlayer .nav-icon.isActive span:nth-child(2) {
	 opacity: 0;
	 left: -60px;
}
 .audioPlayer .nav-icon.isActive span:nth-child(3) {
	 top: 5px;
	 transform: rotate(-135deg);
}
 .audioPlayer .audioPlayerList {
	 color: rgba(0, 0, 0, 0.75);
	 width: 17rem;
	 transition: 0.5s;
	 transform: translateX(-200%);
	 position: absolute;
	 margin-top: 1.5rem;
	 overflow: auto;
	 z-index: 10;
	 will-change: transform;
}
 .audioPlayer .audioPlayerList.isActive {
	 transform: translateX(0);
}
 .audioPlayer .audioPlayerList .item {
	 margin-bottom: 1.5rem;
	 border-left: 0.1rem solid transparent;
	 transition: 0.2s;
}
 .audioPlayer .audioPlayerList .item:hover {
	 padding-left: 0.5rem;
	 cursor: pointer;
}
 .audioPlayer .audioPlayerList .item .title {
	 color: rgba(0, 0, 0, 1);
	 font-size: 1rem;
	 margin-bottom: 0.75rem;
}
 .audioPlayer .audioPlayerList .item .artist {
	 color: rgba(0, 0, 0, 0.5);
	 font-size: 0.8rem;
}
 .audioPlayer .audioPlayerList .item.isActive {
	 border-left-color: black;
	 padding-left: 1rem;
}
 .audioPlayer .audioPlayerList .debugToggle {
	 cursor: pointer;
	 color: red;
}
 .audioPlayer .audioPlayerUI {
	 margin-top: 1.5rem;
	 will-change: transform, filter;
	 transition: 0.5s;
}
 .audioPlayer .audioPlayerUI.isDisabled {
	 transform: scale(0.75) translateX(100%);
	 filter: blur(5px) grayscale(100%);
}
 .audioPlayer .audioPlayerUI .albumDetails {
	 text-align: center;
	 margin: 2rem 0;
}
 .audioPlayer .audioPlayerUI .albumDetails p {
	 margin: 0px;
}
 .audioPlayer .audioPlayerUI .albumDetails p.title {
	 font-size: 1rem;
	 color: rgba(51, 107, 191, 1);
}
 .audioPlayer .audioPlayerUI .albumDetails p.artist {
	 margin-top: 0.5rem;
	 font-size: 0.75rem;
	 font-weight: none;
	 color: rgba(51, 107, 191, 0.75);
	 transition-delay: 100ms;
}
 .audioPlayer .audioPlayerUI .albumImage {
	 width: 17rem;
	 height: 17rem;
	 overflow: hidden;
	 margin: 0 auto;
}
 .audioPlayer .audioPlayerUI .albumImage img {
	 width: 100%;
	 height: 100%;
	 z-index: 10;
	 object-fit: cover;
	 object-position: 50% 50%;
	 border-radius: 0.5rem;
}
 .audioPlayer .audioPlayerUI .playerButtons {
	 position: relative;
	 margin: 0 auto;
	 text-align: center;
}
 .audioPlayer .audioPlayerUI .playerButtons .button {
	 font-size: 2rem;
	 display: inline-block;
	 vertical-align: middle;
	 padding: 0.5rem;
	 margin: 0 0.25rem;
	 color: rgba(254, 203, 20, 0.75);
	 border-radius: 50%;
	 outline: 0;
	 text-decoration: none;
	 cursor: pointer;
	 transition: 0.5s;
}
 .audioPlayer .audioPlayerUI .playerButtons .button.play {
	 font-size: 4rem;
	 margin: 0 1.5rem;
}
 .audioPlayer .audioPlayerUI .playerButtons .button:active {
	 opacity: 0.75;
	 transform: scale(0.75);
}
 .audioPlayer .audioPlayerUI .playerButtons .button.isDisabled {
	 color: rgba(51, 107, 191, 0.4);
	 cursor: initial;
}
 .audioPlayer .audioPlayerUI .playerButtons .button.isDisabled:active {
	 transform: none;
}
 .audioPlayer .audioPlayerUI .currentTimeContainer {
	 width: 100%;
	 height: 1rem;
	 display: flex;
	 justify-content: space-between;
}
 .audioPlayer .audioPlayerUI .currentTimeContainer .currentTime, .audioPlayer .audioPlayerUI .currentTimeContainer .totalTime {
	 font-size: 0.5rem;
	 font-family: monospace;
	 color: rgba(0, 0, 0, 0.75);
}
 .audioPlayer .audioPlayerUI .currentProgressBar {
	 width: 100%;
	 background-color: rgba(0, 0, 0, 0.1);
	 margin: 0.75rem 0;
}
 .audioPlayer .audioPlayerUI .currentProgressBar .currentProgress {
	 background-color: rgba(0, 0, 0, 0.75);
	 width: 0px;
	 height: 1px;
	 transition: 100ms;
}

/* data change transitions */
 .slide-fade-enter-active {
	 transition: all 0.3s ease;
}
 .slide-fade-leave-active {
	 transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}
 .slide-fade-enter, .slide-fade-leave-to {
	 transform: translateY(10px);
	 opacity: 0;
}
 .fade-enter-active, .fade-leave-active {
	 transition: opacity 0.5s;
}
 .fade-enter, .fade-leave-to {
	 opacity: 0;
}
/* pen specific formatting */
 body {
	 background: #ffffff;
	 color: rgba(255, 255, 255, 0.7);
	 font-family: Raleway, sans-serif;
	 padding: 0;
}
 .heading {
	 text-align: center;
	 margin: 10px 0;
	 font-family: Inconsolata, monospace;
}
 .heading h1 {
	 color: #eceff1;
	 margin: 0;
	 margin-bottom: 1rem;
	 font-size: 1.75rem;
}
 .heading p {
	 margin: 0;
	 font-size: 0.85rem;
}
 .heading a {
	 color: rgba(255, 255, 255, 0.8);
	 transition: 0.3s;
	 text-decoration-style: dotted;
}
 .heading a:hover {
	 color: rgba(255, 255, 255, 1) !important;
}
 .heading a:visited {
	 color: rgba(255, 255, 255, 0.5);
}