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

main{
  width: 350px;
  text-align: justify;
}

article{
  position: relative;
  max-height: 320px;
  overflow-y: auto;
}

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

nav a:hover{
  color: #8fa1aa;
}

summary{
  color: #95a568;
  width: fit-content;
  list-style-type: '→ ⠀';
  cursor: pointer;

  u{
    text-decoration: underline dotted;
  }
}

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

summary:hover{
  color: #5e6b3b;
}

.archive{
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 0.5em;
  justify-content: space-between;
  font-weight: bold;
  font-size: 12px;
}

.sender{
  justify-content: space-between;
  
  p{
    font-size: 9px;
  }

  span{
    font-weight: bold;
    font-size: 11px;
  }
}

.date{
  color: #97a063;
  font-weight: bold;
  align-items: center;
  padding: 0.35em 0;
  gap: 0.5em;

  div{
    flex: 1;
    border-top: 1px dotted #c5c2c0;
  }
}

.float-l{float: left; margin-right: 1em;}
.float-r{float: right; margin-left: 1em;}

.multi{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 0.5em;
  row-gap: 0.5em;

  img{
    display: block;
    width: 100%;
    border: 1px solid #a19e9c;
    cursor: zoom-in;
  }
}

.bandcamp{
  position: absolute !important;
  z-index: 999;
  right: -178px;
  bottom: 157px;
  transform: rotate(-90deg) scale(0.85);
  filter: saturate(0.5) var(--outline-light) var(--outline-dark);
}

/* sidebar */

#side1{margin-top: 275px; left: 12px; gap: 3em;}

#note1{transform: rotate(2deg); background: #f3e8c8; border: 1px solid #c9b286;}
#note2{transform: rotate(-5deg); background: #f5dfdf; border: 1px solid #e0c5c5;}

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

#tape1{background: rgba(236, 229, 209, 0.4); border: 1px dashed #c9b286; transform: rotate(-8deg);}
#tape2{background: rgba(236, 209, 209, 0.4); border: 1px dashed #d39f9f; transform: rotate(4deg);}

/* decor */

#bc-card{
  z-index: -1;
  bottom: 0;
  left: -10px;
  transform: rotate(5deg);
}

#postcard1{
  z-index: -1;
  top: -40px;
  left: 130px;
  transform: rotate(70deg);
}

#postcard2{
  z-index: -1;
  top: 90px;
  right: -55px;
  transform: rotate(15deg);
}