body{
  background: #bed6d2 url(/images/other/bg-stripe-r.png);
}

nav a:hover{
  color: #95afaa;
}

section img{
  user-select: none;
  border: 1px solid #c0bebe;
  box-shadow: 1px 1px 0 #7c7977;
}

h2, .sec-divider{
  background: #bed6d2 url(/images/other/bg-stripe-l.png);
  border: 1px solid #95afaa;
}

.tab:not(:target){display: none !important}
.tab{animation: fade-in 0.3s;}

#landing .fc:not(section.fc){
  gap: 0.25em;
}

.covers{
  display: flex;
  justify-content: space-between;

  img{
    width: 75px;
  }
}

.icons{
  color: #95afaa;
  font-size: 15px;
  justify-content: space-around;
  
  a{
    color: #95afaa;
  }

  a:hover{
    color: #c1d3d0;
  }
}

/* sections */

summary{
  background-color: #f3f1ef;
  padding: 0.35em 1em;
  border: 1px dotted #c0bebe;
  font-weight: bold;
  list-style-type: '⇢ ⠀';
  cursor: pointer;
  user-select: none;
}

summary:hover{
  color: #7c7a78;
}

details[open] > summary{
  list-style-type: '⇣ ⠀';
  margin-bottom: 1em;
}

li{
  padding-left: 0.5em;
}

/* sidebar */

#side1{margin-top: 130px; left: 10px;}
#side2{margin-top: 330px; right: 10px;}


#note1{transform: rotate(-5deg); background: #c0cfdb; border: 1px solid #718ea1;}
#note2{transform: rotate(5deg); background: #f3e8c8; border: 1px solid #c9b286; .fr{justify-content: space-between; i{color: #92b4ae;}}}

#note1:hover{transform: rotate(0deg) translateX(-8px);}
#note2:hover{transform: rotate(0deg) translateX(10px);}

#tape1{background: rgba(198, 211, 221, 0.4); border: 1px dashed #718ea1; transform: rotate(2deg);}
#tape2{background: rgba(240, 229, 198, 0.4); border: 1px dashed #c9b286; transform: rotate(4deg);}

#chart{
  z-index: 2;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  align-items: end;

  div{
    border: 1px dotted #f8f7f6;
    transition: all 0.1s;
  }
}

#chart div:hover{
  cursor: help;
  background-color: #4b4948 !important;
}

#stars{
  border-top: 1px dotted #c5c2c0;
  padding-top: 0.5em;
}

.tree ul{
  padding-left: 3.75em !important;
}

.tree li{
  margin-top: 2px;
  color: #a5a19f;

  i{
    color: #95afaa;
  }
}

/* misc */