/*-font-*/

@font-face {
  font-family: 'LacyTheThree';

  src: url('https://file.garden/arkcYFq0FjI2TvF7/lacythethree.ttf')
    format('truetype');
}


/*-body-*/

body {
  margin: 0;

  min-height: 100vh;

  display: flex;

  justify-content: center;
  align-items: center;

  font-family: 'LacyTheThree', sans-serif;

  background-image:
    url("https://file.garden/arkcYFq0FjI2TvF7/k02-bg-cloth.gif");

  background-color: #cccccc;
}


/*-main page-*/

.fun-page {
  box-sizing: border-box;

  width: 740px;

  max-width: calc(100% - 24px);

  margin: 0 auto;

  padding: 16px 0;

  color: #52493c;

  /* centered with the body */
  transform: none;
}


/*-header-*/

.gif {
  display: flex;

  justify-content: center;
  align-items: center;

  margin-bottom: 11px;
}


.gif img {
  display: block;

  max-width: 100%;

  height: auto;
}


/*-navigation-*/

.navbar {
  display: flex;

  justify-content: center;
  align-items: flex-start;

  flex-wrap: wrap;

  gap: 3px;

  max-width: 100%;

  text-align: center;
}


.navbar a {
  color: #52493c;

  font-family: 'LacyTheThree', sans-serif;

  font-size: 14px;

  text-decoration: none;

  padding: 2px 3px;

  cursor: pointer;
}


.navbar a:hover {
  color: #94a9ba;
}


/*-dropdown-*/

.dropdown {
  position: relative;

  display: inline-block;
}


.dropdown summary {
  color: #52493c;

  font-family: 'LacyTheThree', sans-serif;

  font-size: 14px;

  padding: 2px 3px;

  cursor: pointer;

  list-style: none;
}


.dropdown summary::-webkit-details-marker {
  display: none;
}


.dropdown summary::marker {
  display: none;
}


.dropdown summary:hover {
  color: #94a9ba;
}


.dropdown-menu {
  position: absolute;

  top: 100%;

  left: 50%;

  transform: translateX(-50%);

  min-width: 110px;

  padding: 4px 0;

  background-color: #fffaf4;

  border: 1px solid #E9E2D8;

  border-radius: 4px;

  z-index: 100;
}


.dropdown-menu a {
  display: block;

  padding: 3px 8px;

  color: #52493c;

  font-family: 'LacyTheThree', sans-serif;

  font-size: 13px;

  text-decoration: none;

  white-space: nowrap;
}


.dropdown-menu a:hover {
  color: #94a9ba;

  background-color: #f5efe8;
}


/*-selection-*/

::selection {
  background: #94a9ba;

  color: #FFFFFF;
}


/*-scrollbar-*/

::-webkit-scrollbar {
  width: 8px;
}


::-webkit-scrollbar-track {
  background: #fffaf4;
}


::-webkit-scrollbar-thumb {
  background: #E9E2D8;
}


/*-main two-column layout-*/

.fun-content {
  display: grid;

  grid-template-columns: minmax(0, 1fr) 200px;

  gap: 8px;

  width: 100%;

  margin-top: 8px;

  align-items: start;
}


/*-left collections-*/

.collections {
  min-width: 0;

  display: flex;

  flex-direction: column;

  
  gap: 5px;
}


/*-individual scrollboxes-*/

.scrollbox {
  box-sizing: border-box;

  width: 100%;

  background-color: #fffaf4;

  border: 1px solid #E9E2D8;

  border-radius: 6px;

  padding: 8px;
}


/*-scrollbox headings-*/

.collection-box h2,
.wide-scrollbox h2 {
  margin: 0 0 6px 0;

  padding-bottom: 4px;

  color: #94a9ba;

  font-size: 16px;

  font-weight: normal;

  text-align: center;

  border-bottom: 1px dotted #E9E2D8;
}


/*-collection scrolling areas-*/

.collection-content {
  height: 130px;

  overflow-y: auto;

  padding-right: 4px;
}


.collection-content::-webkit-scrollbar,
.wide-collection-content::-webkit-scrollbar {
  width: 5px;
}


.collection-content::-webkit-scrollbar-track,
.wide-collection-content::-webkit-scrollbar-track {
  background: #f5efe8;
}


.collection-content::-webkit-scrollbar-thumb,
.wide-collection-content::-webkit-scrollbar-thumb {
  background: #E9E2D8;
}


/*-webrings-*/

.webring {
  padding: 6px 3px;

  border-bottom: 1px dotted #E9E2D8;
}


.webring:first-child {
  padding-top: 0;
}


.webring:last-child {
  border-bottom: 0;
}


.webring-title {
  color: #94a9ba;

  font-size: 13px;

  margin-bottom: 2px;
}


.webring-description {
  font-size: 11px;

  line-height: 1.3;

  margin-bottom: 4px;
}


.webring-links {
  display: flex;

  justify-content: center;

  align-items: center;

  flex-wrap: wrap;

  gap: 4px;

  font-size: 10px;
}


.webring-links a {
  color: #94a9ba;

  text-decoration: none;
}


.webring-links a:hover {
  color: #52493c;
}


/*-fanlistings-*/

/* compact fanlisting box */

.fanlisting-box .collection-content {
  height: 72px;

  padding-right: 4px;
}


.fanlisting {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: flex-start;

  gap: 5px;

  padding: 2px 3px;
}


.fanlisting a {
  display: block;

  line-height: 0;
}


.fanlisting img {
  display: block;

  width: auto;

  height: auto;

  max-width: 100%;

  object-fit: contain;
}


/*-optional fanlisting text styles-*/

.fanlisting-title {
  color: #94a9ba;

  font-size: 13px;
}


.fanlisting-info {
  font-size: 10px;
}


.fanlisting-status {
  color: #94a9ba;

  font-size: 9px;

  text-align: right;
}


/*-right side-*/

.empty-side {
  min-width: 0;

  width: 200px;

  display: flex;

  justify-content: center;

  align-items: flex-start;
}


/*-hedgehog protection box-*/

.results {
  width: 200px;

  box-sizing: border-box;

  background-color: #fff;

  color: #000;

  display: block;

  padding: 10px;

  border: 1px solid #000;

  margin: 0 auto;

  font-family: 'Times New Roman', Times, serif;

  font-size: 15pt;

  text-align: left;
}


.results p {
  margin: 0;
}


.results .title {
  margin: 0;

  color: #000;

  font-family: 'Times New Roman', Times, serif;

  font-size: 18pt;

  font-weight: bold;

  border: 0;

  padding: 0;
}


.results .image {
  display: block;

  max-width: 160px;

  width: auto;

  height: auto;

  border: 1px solid #000;

  margin: 6px auto;
}


.results .description {
  margin: 0 0 6px 0;

  font-family: 'Times New Roman', Times, serif;

  font-size: 11pt;
}


.results small {
  font-family: 'Times New Roman', Times, serif;

  font-size: 8pt;
}


.results a {
  color: #0000ee;

  text-decoration: underline;
}


/*-divider-*/

.collection-divider {
  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  margin: 13px 0 9px 0;

  overflow: hidden;
}


.collection-divider img {
  display: block;

  width: 220px;

  max-width: 100%;

  height: auto;

  image-rendering: pixelated;
}


/*-wide scrollboxes-*/

/*
  Stamps and buttons are wider than
  the fanlisting/webring column.
*/

.wide-scrollbox {
  width: 100%;

  box-sizing: border-box;

  margin-bottom: 9px;

  padding: 8px;

  background-color: #fffaf4;

  border: 1px solid #E9E2D8;

  border-radius: 6px;
}


/*-wide scrolling contents-*/

.wide-collection-content {
  box-sizing: border-box;

  width: 100%;

  height: 115px;

  padding: 5px;

  display: flex;

  flex-wrap: wrap;

  align-content: flex-start;

  align-items: center;

  justify-content: flex-start;

  gap: 7px;

  overflow-y: auto;

  overflow-x: hidden;
}


.wide-collection-content::-webkit-scrollbar {
  width: 5px;
}


.wide-collection-content::-webkit-scrollbar-track {
  background: #f5efe8;
}


.wide-collection-content::-webkit-scrollbar-thumb {
  background: #E9E2D8;
}


/*-stamp and button images-*/

.wide-collection-content img {
  display: block;

  width: auto;

  height: auto;

  max-width: 135px;

  max-height: 72px;

  object-fit: contain;

  flex-shrink: 0;

  image-rendering: pixelated;
}


/*-buttons-*/

.buttons-content {
  justify-content: flex-start;
}


/*-empty message-*/

.empty-message {
  width: 100%;

  margin: 0;

  color: #94a9ba;

  font-size: 12px;

  text-align: center;
}


/*-footer-*/

.footer-decoration {
  text-align: center;

  margin: 20px 0 12px 0;

  color: #94a9ba;

  font-size: 12px;
}


/*-tablet/mobile-*/

@media (max-width: 650px) {

  .fun-page {
    width: 100%;

    max-width: none;

    padding: 13px;

    transform: none;
  }


  .fun-content {
    grid-template-columns: 1fr;

    gap: 5px;
  }


  .empty-side {
    width: 100%;

    justify-content: center;
  }


  .collection-content {
    height: 140px;
  }


  .fanlisting-box .collection-content {
    height: 72px;
  }


  .wide-collection-content {
    height: 105px;
  }

}


/*-small mobile-*/

@media (max-width: 450px) {

  .fun-page {
    padding: 9px;
  }


  .navbar {
    gap: 2px;
  }


  .navbar a,
  .dropdown summary {
    font-size: 13px;

    padding: 2px;
  }


  .collection-content {
    height: 130px;
  }


  .fanlisting-box .collection-content {
    height: 72px;
  }


  .wide-collection-content {
    height: 100px;
  }


  .results {
    width: 200px;

    max-width: 100%;
  }

}