* {
  box-sizing: border-box;
  font-family: 'Manrope', sans-serif;
  letter-spacing: 1.5px;
}

html, body {
  margin: 0;
}

a {
  color: #0A8A15;
  text-decoration: none;
}

#holder {
  width: 360px;
  margin: 0 auto;
}

#form label, input {
  display: block;
}
menu {
  margin: 0; 
  padding: 0;
}
#playlist_data {
  margin-top: 1rem;
}
#playlist_data p {
  margin-top: 4rem;
  margin-bottom: 2rem;
}
.song {
  display: flex;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.interaction {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 8rem;

}
.interaction a {
  background: linear-gradient(260deg, rgba(39,255,73,1) 0%, rgba(110,163,210,1) 100%);
  padding: 0.2rem 1rem;
  border-radius: 5px;
  color: #fff;
  text-decoration: none;
  font-size: 0.8rem;
  display: flex;
}
.interaction a svg path {
  stroke: #fff;
}
.interaction a svg {
  display: none;
}
.interaction svg {
  margin-right: 4px;
  max-width: 20px;
}
#spotify_instructions {
  background-color: #eee; 
  border-radius: 5px;
  max-width: 20rem;
  padding: 1rem;
  margin-top: 1rem;
  display: none;
}
#spotify_instructions ol {
  margin: 0;
  margin-left: 2rem;
  padding: 0;
}
#help {
  font-size: 0.8rem;
}

#spotify_instructions.active {
  display: block;
}
.interaction span {
  align-self: center;
}
.song > * {
  flex: 0 0 auto;
}
.song .name {
  width: 10rem; 
}
.name h3 {
  margin: 0;
  font-size: 1rem;
}
.name .artist {
  font-size: 0.8rem;
  color: #888;
}
.song .time {
  width: 4rem;
  font-size: 0.6rem;
}
.song .location {
  width: 6rem;
  font-size: 0.8rem;
}
.song_title {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  display: block;
}
h4 {
  margin: 0;
}
.song .number {
  width: 2rem;
}
.interaction {
  width: 8rem;

}
input {
  padding: 1rem;
  border-radius: 4px;
  border: 1px solid #aaa;
  width: 22rem;
}
label {
  margin-top: 1rem;
}
#buttons {
  margin-top: 1rem;
  display: flex;
  gap: 1rem;
}
input:read-only {
  background-color: #aaa;
}

button {
  border: 0;
  padding: 1rem;
  border-radius: 4px;
  background: rgb(39,255,73);
  background: linear-gradient(260deg, rgba(39,255,73,1) 0%, rgba(110,163,210,1) 100%);
  color: #fff;
  font-weight: bold;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  cursor: pointer;
}

button.active {
  background-size: 1000px;
  animation-duration: 1.8s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
}

@keyframes placeHolderShimmer{
  0%{
    background-position: -468px 0
  }
  100%{
    background-position: 468px 0
  }
}

img {
  max-width: 100%;
}

menu img {
  max-width: 10rem;
  float: right;
}

@media screen and (min-width: 1024px){

  #holder {
    width: 1024px;
  }
  #overview {
    width: 72%;
  }
  .song .name {
    width: 24rem;
  }
  .song .location {
    width: 12rem;
  }

  menu img {
    float: none;
  }

}