.relChar{
  display: flex;
  border-radius: 5px;
  background: linear-gradient(var(--highlightteal), transparent 150%);
  overflow: hidden;
  filter:var(--dropshadow);
  margin:5px 0;
  border: 1px solid;
}
.relChar h3{
  margin:12.5px auto;
}
.relChar span{
  margin:auto;
  color:var(--blue);
  width: calc(100% - 90px);
  padding: 5px 0;
}
.relChar h3{
  margin:5px auto;
}
.relChar div{
  background: linear-gradient(var(--teal), var(--blue));
  padding:5px;
}
a.icon {
  background: var(--yellow);
  display: block;
  border-radius: 5px;
  transition:filter 0.5s;
}

a.icon:hover {
    filter: brightness(1.1) saturate(1.2);
}

a.icon img{
  image-rendering: pixelated;
  height:64px;
  width:64px;
  transition: scale 0.5s;
}
a.icon:hover img{
    scale:1.2;
}
h3 a{
  color:var(--blue);
}
.relChar button{
  width:100%;
  background: var(--yellow);
  border:1px solid var(--blue);
  color:var(--blue);
  border-radius: 5px;
  cursor:pointer;
}
.relChar button:hover{
  background: var(--teal);
  color:var(--dblue);
}
.impression{
  max-height: 0;
  min-height:0;
  overflow: hidden;
  transition: min-height 0.5s,max-height 0.5s;
}
.impression p{
  border: 1.75px dashed var(--lteal);
  border-top: none;
  margin: 0;
  padding: 5px;
  border-radius: 0 0 5px 5px;
}
.impression.impressactive{
  max-height:500px;
}

#playlist.box{
  border-radius: 0;
  background:linear-gradient(var(--yellow),#a8b8c3 150%);
  box-shadow: 4px 4px 4px 2px var(--shadow);
  border-radius: 2.5px;
}

#playlist .tit{
  border-bottom: 1px solid var(--lteal);
  background: linear-gradient(var(--yellow),#a8b8c3 150%);
}

#playlist .tit h2{
  text-shadow: 1px 1px var(--lteal);
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
#playlist .tit h2:before{
  content:"♫ ";
}
#playlist .tit h2:after{
  content:" ♬";
}
#playlist .song{
  margin: 10px 20px;
  border: 1px solid;
  border-radius: 5px;
  background: black;
  --teal: white;
    color: white;
}
#playlist li {
  filter: drop-shadow(3px 3px 5px var(--highlightteal)) drop-shadow(-3px -3px 5px var(--highlightteal));
  border-bottom: 1px solid white;
  padding:5px 0;
}
#playlist li:first-child:after{
  content: "♪";
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-name: note;
    display: inline-block;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    scale:1.1;
}
#playlist a:hover {
  color: var(--lteal);
}
#playbuttons{
  display:flex;
  margin:10px 20px;
}
#playbuttons button {
  max-width: 33.333%;
  flex: 0 0 33.333%;
  border:1.5px solid;
  border-radius: 2.5px;
  background: linear-gradient(var(--yellow),#a8b8c3 150%);
  cursor:pointer;
  filter: var(--dropshadow);
  padding:2.5px 0;
}
#playbuttons button:hover {
  filter: brightness(0.9) saturate(1.2) var(--dropshadowdown);
  translate: 1px 1px;
}
@keyframes note{
  0%{
    translate: 0 2px;
  }
  100%{
    translate:0 -2px;
  }
}
.relChar.pop{
  display:none;
}
.Rel:hover{
  cursor:pointer;
}