body{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5em;
  height: 100vh;
}

main, #savoured{
  flex-shrink: 0;
  width: 375px;
  
  > div{
    padding: 0 2.5em;
    overflow-y: auto;
  }
}

main > div{
  height: 350px;
  direction: rtl;

  details, p{
    direction: ltr;
  }
}

#savoured > div{
  height: 300px;
}

aside a:not(dialog a){
  position: absolute;
  font-size: 10px;
  text-decoration: none;
}

button{
  z-index: 999;
  position: absolute;
  background: none;
  border: 0;
  padding: 0;
  font-size: 10px;
}

.tab-link{
  color: #798682;
}

.tab-link:hover{
  color: #94a19d;
  text-decoration: 1px underline dotted;
}

#spotify{bottom: 70px; right: 47px;}
#bookmarks{bottom: 55px; right: 40px;}
#lastfm{bottom: 40px; right: 55px;}

#tab-jan{top: 10px; left: 35px;}
#tab-feb{top: 25px; left: 20px;}
#tab-mar{top: 85px; left: -3px;}
#tab-apr{top: 65px; right: 30px;}
#tab-may{top: 80px; right: 15px;}
#tab-jun{top: 180px; left: 15px;}
#tab-jul{top: 195px; left: 30px;}
#tab-aug{bottom: 130px; right: 55px;}
#tab-oct{bottom: 85px; left: 35px;}
#tab-nov{bottom: 25px; left: 40px;}
#tab-dec{bottom: 10px; left: 50px;}

#tab-default
/* #tab-mixes,
#tab-archive */{
  font-style: italic;
  color: #636464;
}

#tab-default{
  font-size: 12px;
  bottom: 100px;
  left: 40px;
  text-decoration: 1px underline dotted;
}

/* #tab-mixes{
  font-size: 11px;
  bottom: 115px;
  right: 40px;
} */

/* #tab-archive{
  font-size: 11px;
  bottom: 75px;
  right: 42px;
} */

#tab-default:hover
/* #tab-mixes:hover
#tab-archive:hover, */{
  color: #878888;
  text-decoration: 1px underline dotted;
}

summary, section > p{
  display: flex;
  justify-content: space-between;
  list-style-type: '';
  margin: 0;

  span > span{
    color: #bcbcbd;
    margin: 0 0.25em;
  }

  > span{
    max-width: 90%;
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: ellipsis;
  } 
}

summary:hover{
  cursor: pointer;
  color: #b8bba3 !important;
}

details[open] > summary{
  color: #9ca082;
  list-style-type: '';
}

details[open]:first-of-type > summary{
  list-style-type: '♡⠀';
}

lastfm-tracks {
  height: 36px;
  opacity: 0;
  animation: fade-in 0.25s 0.25s steps(3) forwards;
}