/* navigation */
.card__body#sidebar {
  display: flex;
  flex-flow: var(--column);
  flex: 0 1 100px;
  border-right: var(--dotted);

  .card__img:first-child {
    aspect-ratio: 1/1;
    object-fit: cover;
    height: auto;
  }

  .card__img:last-child {
    margin-top: var(--p-6);
    align-self: center;
    filter: opacity(0.8);
  }

  nav {
    display: flex;
    flex-flow: inherit;
    gap: var(--p-1);
  }
}

.card__body#sidebar > nav a {
  display: flex;
  align-items: baseline;
  border-bottom: var(--dotted);
  padding-bottom: var(--p-1);
  text-decoration: none;

  span {
    color: var(--green);
    margin-right: var(--p-1);
  }

  &:hover {
    color: var(--green);
  }

  &:hover::after {
    content: "";
    background: url(https://file.garden/ZdkezegxzVCR-6D7/neocities/deco/mouse.gif)
      no-repeat center / contain;
    display: block;
    width: 12px;
    aspect-ratio: 1/1;
    margin-left: auto;
    position: relative;
    top: 2px;
  }
}

.card__body#desc {
  flex: 0 1 220px;
  padding: var(--p-4);
  gap: var(--p-2);
  border: revert;

  .card__img {
    background: url(../assets/img/cat4.png) no-repeat center / contain;
  }

  p > .card__img {
    float: right;
    width: 40px;
    padding: var(--p-4) 0 0 var(--p-2);
    filter: sepia(60%) opacity(0.4);
  }

  .warning {
    margin-top: auto;
  }
}

.card__body#news {
  padding: 0 var(--p-2) var(--p-2) var(--p-2);
  background: var(--light);

  .list li > b::before {
    content: "■ ";
    font-size: 12pt;
  }

  h4 {
    position: sticky;
    top: 0;
    background: var(--light);
    padding-top: var(--p-2);
  }

  p:last-child {
    text-align: right;
    margin-top: auto;
  }
}