@keyframes fade-in{
  0% {opacity: 0;}
  100% {opacity: 1;}
}

*{
  box-sizing: border-box;
  image-rendering: pixelated;
  scrollbar-width: thin;
  scrollbar-color: #cccccc transparent;
}

::selection{
  background: #4e4a47;
  color: #fffefd;
}

h1::selection, h1 *::selection{
  background: none;
  color: #4e4a47;
  text-shadow: 1px 1px 0 #fffefd, -1px -1px 0 #fffefd, -1px 1px 0 #fffefd, 1px -1px 0 #fffefd;
}

#s-m-t-tooltip{
  width: fit-content;
  z-index: 9999;
  background-color: #fffefd;
  border: 1px dotted #4e4a47;
  font-size: 10px;
  text-align: center;
  max-width: 275px;
  padding: 0.5em 0.75em;
  margin: 22px 5px 7px 15px;
}

body{
  background: #fffefd;
  color: #4e4a47;
  font-family: Arial, sans-serif;
  font-size: 12px;
  text-align: justify;
  margin: 0;
  animation: fade-in 0.25s steps(3);
}

aside{
  position: relative;
  
  img{
    user-select: none;
  }
}

#return, #mode{
  z-index: 9999;
  position: fixed;
  top: 2.5em;
  font-size: 16px;
  text-decoration: none !important;
}

#return{left: 2.5em;}
#mode{right: 2.5em;}

.fc{
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.tab-content{
  animation: fade-in 0.25s steps(3);
}

p:first-of-type{margin-top: 0;}
p:last-of-type{margin-bottom: 0;}
blockquote{margin: 2.5em;}

h1{
  pointer-events: none;
  font-size: 38px;
  text-align: center;
  color: #fffefd;
  letter-spacing: -4px;
  transform: scaleX(0.9);
  margin: 0;
  text-shadow: 1px 1px 0 #636464, -1px -1px 0 #636464, -1px 1px 0 #636464, 1px -1px 0 #636464;

  span{
    display: inline-block;
    font-family: 'Times New Roman';
    letter-spacing: -10px;
  }
}

ul{
  list-style-type: circle;
  padding-left: 2.5em;

  ul{
    list-style-type: disc;
  }
}

hr{
  border: none;
  border-top: 1px dotted #cccccc;
  margin: 1em 2.5em;
}

dialog{
  width: 500px;
  max-height: 800px;
  overflow-y: auto;

  &::backdrop {
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(1px);
    animation: fade-in 0.15s steps(3);
  }
}

[popover]{
  font: inherit;
  padding: 2.5em;
  background: #fffefd;
  border: 1px solid #d2d2d3;
  animation: fade-in 0.25s steps(3);
}

a{
  color: #798682;
  text-decoration: 1px underline dotted #a8b1ae;
}

button{
  background: none;
  border: 0;
  padding: 0;
  color: #798682;
}

a:hover, button:hover{
  cursor: pointer;
  color: #9aa7a3;
  text-decoration: 1px underline wavy #b6bebc !important;
}

/* seperate */

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-sep{bottom: 100px; left: 40px;}
#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: 80px; left: 35px;
  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;
}