/* anims */
@keyframes getout {
  from {
	  position: absolute; transform: translateX(-50%); left: 50%; top: 20px;
  }
  to {
	  position: absolute; transform: translateX(-50%); left: -150%; top: 20px;
  }
}
@keyframes getout_left {
  from {
	  position: absolute; transform: translateX(-50%); left: 50%; top: 20px;
  }
  to {
	  position: absolute; transform: translateX(-50%); left: 150%; top: 20px;
  }
}

@keyframes getin {
  from {
	  position: absolute; transform: translateX(-50%); left: 150%; top: 20px;
  }
  to {
	  position: absolute; transform: translateX(-50%); left: 50%; top: 20px;
  }
}
@keyframes getin_left {
  from {
	  position: absolute; transform: translateX(-50%); left: -150%; top: 20px;
  }
  to {
	  position: absolute; transform: translateX(-50%); left: 50%; top: 20px;
  }
}

@keyframes lighten {
  to { background-color: #aaaaaa; }
}

/* styles */
body {
	background-color: #1a1a1a; color: #000; user-select: none;
	font-family: Open Sans, sans-serif; animation: lighten 500ms forwards ease;
}

*:focus { outline: none; }

#contentFrame {
	width: 350px; height: 475px; background-color: #fff; box-shadow: 0 0 16px #fff;
	border-radius: 25px; position: fixed; transform: translate(-50%, -50%); top: 50%;
	left: 50%; overflow: hidden; display: flex; flex-direction: column; align-items: center;
	padding-top: 20px;
}

#contentFrame #cover { border-radius: 15px; margin: 0; margin-bottom: 10px; animation: getin forwards ease 200ms; }
#contentFrame #title {
	font-size: x-large; font-family: Trebuchet MS, auto; font-weight: bold;
	position: absolute; top: 330px; transform: translateX(-50%); left: 50%;
	width: 100%; text-align: center;
}
#contentFrame #artist {
	font-style: italic; position: absolute; top: 365px; transform: translateX(-50%);
	left: 50%;
}

#contentFrame #controls {
	position: fixed; transform: translate(-50%, -50%); bottom: 20px;
	left: 50%; display: flex; flex-direction: row; gap: 10px; height: fit-content;
	background-color: #e5e5e5; border-radius: 50px; padding: 2px;
	padding-left: 35px; padding-right: 35px;
}

#contentFrame #controls button {
	width: 40px; height: 40px; cursor: pointer;
	display: flex; align-items: center; background-color: transparent;
	justify-content: center; border-style: none;
}