body {
  display: flex;
  flex-direction: column-reverse;
  min-height: 100vh;
  margin: 0;
  & > svg {
    display: none;
  }
}

main {
  width: 100%;
  margin: auto;
  padding: 18px;
  font-family: "Trebuchet MS", sans-serif;
  line-height: 1.33em;
  box-sizing: border-box;

  a {
    text-decoration: none;
  }

  & * {
    margin: 0;
    color: #ffffffe0;
  }

  &.shrink {
    animation-name: shrink;
    animation-fill-mode: forwards;
    animation-duration: 2s;
  }
  &.expand {
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-name: expand;
  }

  &.delay {
    animation-delay: 1.3s;
  }

  p.info {
    u {
      text-decoration-thickness: 2px;
      text-decoration-color: #2ca0ff;
      display: inline-block;
    }

    u::first-letter {
      font-size: 180%;
      text-decoration: underline !important;
      display: inline-block;
    }
  }
}

aside {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  height: 66px;
  padding-top: 3vh;
  position: relative;

  button {
    background-color: white;
    border: 3px dotted #d1d4d9;
    line-height: 20px;
    height: min-content;
    height: 35px;
    padding-inline: 10px;
    box-sizing: content-box;
    cursor: pointer;
    color: #077d8a;
    font-size: 15px;
    letter-spacing: -0.025em;
    span {
      font-size: 115%;
    }
    &::first-letter {
      color: rgb(152, 15, 113);
      font-weight: 600;
    }

    &:hover {
      border: 6px dashed #d4ddd1;
      margin: -3px;
      transition: 0.3s all;
    }

    &.dark {
      filter: invert(1);
      color: black;
      border: 3px dotted #29222d;
      &:hover {
        border: 6px dashed #29222d;
      }
    }

    &.efx {
      transform: skewX(-8deg);
    }
    &.efx.zoomFx {
      transform: scaleY(1.13);
    }
  }
}

@media (max-width: 808px) {
  aside {
    height: 122px;
  }
}

.go_gridItem:hover p u {
  text-decoration-color: #ffb42c !important;
}

.gridOverflow.go-masonry {
  .go_gridItem .go_caption {
    display: none;
  }
  .go_gridItem:nth-child(4) .go_caption {
    display: block;
    &:first-line {
      float: left;
      color: transparent;
      line-height: 2px;
    }
  }
}

@keyframes shrink {
  from {
    max-width: 880px;
  }
  to {
    max-width: 500px;
  }
}

@keyframes expand {
  from {
    max-width: 500px;
  }
  to {
    max-width: 880px;
  }
}


.go_gridItem {
  padding-bottom: calc(100%* var(--itemAspectRatio));
  height: 0;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  display: block;
  border-radius: 0px !important;
}


.gridOverflow {
  --gridGap: 1px;
  --itemMinWidth: 190px;
  --itemAspectRatio: 1;
  --itemRounding: 6px;
  --linkActionIcon: "♡";
}

@container fenceBox (max-width: 500px) {
  .gridOverflow {
    --itemAspectRatio: 0.73;
    --gridGap: 3px;
  }
}

.gridOverflow.go-masonry {
  --gridGap: 8px;
  --itemMinWidth: 30%;
  --itemRounding: 25% 88% 10% 88% / 18% 9px 15% 9px;
  --linkActionIcon: "»";
  --masonryItemHeight: 193px;
}

@media (max-width: 600px) {
  .gridOverflow.go-masonry {
    --itemMinWidth: 40%;
    --masonryItemHeight: 166px;
  }
}

@container fenceBox (max-width: 600px) {
  .gridOverflow.go-masonry {
    --itemMinWidth: 40%;
    --masonryItemHeight: 166px;
  }
}