style.styl

.Audio
	background-color #282c34
	min-height 100vh
	display flex
	flex-direction column
	font-size calc(10px + 2vmin)
	color white

.Audio-link
	color #61dafb

.Player
	display flex
	flex-direction column
	justify-content center
	margin auto
	position relative
	height 360px
	width 360px

	.song-info
		color rgba(97, 218, 251, 0.8)
		position absolute
		z-index 2
		top 2rem
		width 100%

		.song-artist
			display flex
			justify-content center
			font-size 22px
			margin-bottom 0.5rem

		.song-name
			display flex
			justify-content center
			font-size 18px

	.controls
		display grid
		grid-template "prev play next"
		justify-content center
		position relative
		z-index 2

		.pause-play-song
			display flex
			flex-direction column
			justify-content center
			align-items center
			border rgba(97, 218, 251, 0.8) 3px solid
			border-radius 50%
			padding 0.5rem
			width 104px
			height 104px

		.prev-song
			display flex
			flex-direction column
			justify-content center

		.next-song
			display flex
			flex-direction column
			justify-content center

	.song-footer
		color rgba(97, 218, 251, 0.8)
		position absolute
		z-index 2
		bottom 2rem
		width 100%

		.song-gain
			display flex
			justify-content center
			font-size 22px
			margin-bottom 0.5rem

		.song-duration
			display flex
			justify-content center
			font-size 18px

#Player-canvas
	position absolute
	width 600px
	height 600px
	display flex
	align-self center

.loader
	display inline-block
	position relative
	width 64px
	height 64px

	div
		position absolute
		border 4px solid rgba(97, 218, 251, 0.8)
		opacity 1
		border-radius 50%
		animation loader 1s cubic-bezier(0, 0.2, 0.8, 1) infinite
		&:nth-child(2)
			animation-delay -0.5s

@keyframes loader {
  0% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
  }
}