/* if editing this code in any way, you might find it usefull to comment out the styling on 'body', since the font fucks up your cursor placement. trust me. */

:root {
	--background: #a43f34;
  --backgrounddarker: #6d332e;
  --albumcover: url('https://file.garden/ZYYq69YewxMFnAFy/pastrydiy/skittish-perfect-shade-green-albumcover.webp');
  --textcolor: #272425;
  --iconfilter: invert(10%) sepia(8%) saturate(407%) hue-rotate(289deg) brightness(96%) contrast(89%) /*filter generated here -> https://codepen.io/sosuke/pen/Pjoqqp*/;
  --backgroundcolor: #272425; 
  --backgroundimage: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23a43f34' fill-opacity='0.37'%3E%3Cpath fill-rule='evenodd' d='M0 0h40v40H0V0zm40 40h40v40H40V40zm0-40h2l-2 2V0zm0 4l4-4h2l-6 6V4zm0 4l8-8h2L40 10V8zm0 4L52 0h2L40 14v-2zm0 4L56 0h2L40 18v-2zm0 4L60 0h2L40 22v-2zm0 4L64 0h2L40 26v-2zm0 4L68 0h2L40 30v-2zm0 4L72 0h2L40 34v-2zm0 4L76 0h2L40 38v-2zm0 4L80 0v2L42 40h-2zm4 0L80 4v2L46 40h-2zm4 0L80 8v2L50 40h-2zm4 0l28-28v2L54 40h-2zm4 0l24-24v2L58 40h-2zm4 0l20-20v2L62 40h-2zm4 0l16-16v2L66 40h-2zm4 0l12-12v2L70 40h-2zm4 0l8-8v2l-6 6h-2zm4 0l4-4v2l-2 2h-2z'/%3E%3C/g%3E%3C/svg%3E") /*backgrounds found here -> https://heropatterns.com/*/;
  --playfilter: invert(33%) sepia(7%) saturate(5564%) hue-rotate(319deg) brightness(93%) contrast(94%);
}

@font-face {
	font-family: "Proxima Nova";
  src: url('https://file.garden/ZYYq69YewxMFnAFy/fonts/ProximaNova-Regular.otf');
}

@font-face {
	font-family: "Proxima Nova";
  src: url('https://file.garden/ZYYq69YewxMFnAFy/fonts/Proxima%20Nova%20Bold.otf');
  font-weight: bold;
}

@font-face {
	font-family: "Proxima Nova";
  src: url('https://file.garden/ZYYq69YewxMFnAFy/fonts/Proxima%20Nova%20Thin.otf');
  font-weight: 200;
}


body {
	font-family: "Proxima Nova";
	background-color: var(--backgroundcolor);
	background-image: var(--backgroundimage);
}

@keyframes slideIn {
  0% { transform: translateX(2%); }
  6% { transform: translateX(2%); }
  44% { transform: translateX(-25%); }
  56% { transform: translateX(-25%); }
 	94% { transform: translateX(2%); }
  100% { transform: translateX(2%); }
}

.container-base {
	background: transparent;
  overflow: hidden;
}


/* hey. I see you. heavy inspo / copying needs credit btw */
.SPECTRE {
  width: 400px;
  height: 200px;
  background: linear-gradient(to bottom, var(--background), var(--backgrounddarker));
  border-radius: 20px;
  padding: 23px;
  display: flex;
  justify-content: space-between;
  margin: auto;
}

.image { 
	background-color: black;
  height: 150px;
  width: 150px;
  border-radius: 20px;
  float: left;
  background-image: var(--albumcover);
  background-size: 150px;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 1);
	-moz-box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 1);
	box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 1);
}


/* animated text container only */
.text {
	width: 181px;
  height: 40px;
  overflow: hidden;
  white-space: nowrap;
  margin-top: 30px;
  -webkit-mask: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

.text .title {
  color: var(--textcolor);
  display: inline-block;
	font-size: 20px;
  animation: slideIn 10s linear infinite;
}


/* pauses the animation on hover rather than resetting it */
.text .title:hover {
	animation-play-state: paused;
}

/* artist name */
.artist {
	color: var(--textcolor);
  margin-top: -30px;
}

/* I do not know what this does but I think it's the container for the audio player and the paste breaks slightly without it */
.killme {
	width: 15px;
  height: 15px;
}

/* styling for the audio controls. if your audio controller breaks, change the opacity to 0.5 and start messing with the margins to line up with the icon on the paste. the scale is there to make sure that the link on the arrow worked on my original paste, but you're welcome to remove that if it makes your paste buggy */
#audio {
  position: absolute;
  z-index: 2;
  opacity: 0.0;
  margin-top: -15px;
  margin-left: -28px;
  width: 100px;
  scale: 60%
}

/* lines all the buttons up side by side */
.player {
	display: flex;
  width: 181px;
  justify-content: space-around;
}

/* self explanatory */
.icon {
	filter: var(--iconfilter);
}

/* this one puts the circle around the play button. if you want the play button to look the same as the others, add class="icon" to the img tags and remove the background colour here */
.play {
	width: 30px;
  height: 30px;
  background-color: var(--textcolor);
  border-radius: 15px;
  margin-left: -6px;
  margin-top: -2px;
}

/* not in the original code - this one is written like this to make it easier to change with variables */
.play img {
	filter: var(--playfilter);
}


/* paste cleaning stuff */
.paste-container {
  width: 420px;
}

.site-header, .site-footer, .edit-timestamp, .publish-timestamp {
	display: none;
}