@charset "UTF-8";
.journal main,
#journal-entries main {
  --public-switch-width: 210px;
  --public-switch-tab-offset: -154px;
  --public-switch-hover-offset: -30px;
  --public-switch-bg: #d7ceb6;
  --public-switch-ink: #2f2619;
  --public-switch-active: #aa7e39;
  --chanterelle-ink: #4a1942;
  width: 100%;
  max-width: 900px;
  margin: 0;
  padding: 20px 0;
  position: relative;
}
.journal main #parchment,
#journal-entries main #parchment {
  z-index: -1;
  min-width: 1000px;
  height: 100% !important;
  margin: 0 !important;
  padding: 2rem !important;
}
.journal main .title,
#journal-entries main .title {
  text-align: center;
  color: #333;
  font-size: 60px !important;
  margin-bottom: 20px;
  font-family: "mushroom2";
  line-height: unset;
  text-transform: unset;
}
.journal main .title:before,
#journal-entries main .title:before {
  top: 90px;
  transform: rotate(-255deg);
  z-index: 1;
}
.journal main .title:after,
#journal-entries main .title:after {
  content: url(../images/coffee-stain-alt.png);
  top: 200px;
  left: 110px;
  transform: rotate(150deg);
  z-index: -1;
}
.journal main .public-switcher,
#journal-entries main .public-switcher {
  position: absolute;
  left: -160px;
  top: 128px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: -2;
}
.journal main .public-switcher-tab,
#journal-entries main .public-switcher-tab {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: var(--public-switch-width);
  padding: 12px 18px;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--public-switch-bg), #f3ecd7);
  color: var(--public-switch-ink);
  text-decoration: none;
  box-shadow: -4px 8px 14px rgba(36, 26, 12, 0.24), inset 0 0 0 1px rgba(58, 38, 14, 0.14);
  transform: translateX(72px) rotate(-1deg);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.journal main .public-switcher-tab:hover, .journal main .public-switcher-tab:focus-visible, .journal main .public-switcher-tab.is-active,
#journal-entries main .public-switcher-tab:hover,
#journal-entries main .public-switcher-tab:focus-visible,
#journal-entries main .public-switcher-tab.is-active {
  transform: translateX(0) rotate(0deg);
  box-shadow: -9px 12px 22px rgba(36, 26, 12, 0.3), inset 0 0 0 1px rgba(58, 38, 14, 0.2);
}
.journal main .public-switcher-tab-kicker,
#journal-entries main .public-switcher-tab-kicker {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  opacity: 0.7;
}
.journal main .public-switcher-tab-label,
#journal-entries main .public-switcher-tab-label {
  font-family: "mushroom2";
  font-size: 1.8rem;
  line-height: 0.95;
}
.journal main .public-switcher-tab.is-active,
#journal-entries main .public-switcher-tab.is-active {
  background: linear-gradient(140deg, #f3e3bf, #f4eddc);
  color: var(--public-switch-active);
}
.journal main .public-switcher-tab--chanterelle,
#journal-entries main .public-switcher-tab--chanterelle {
  background: linear-gradient(150deg, #f7d4ee, #e9bddf);
  color: var(--chanterelle-ink);
  transform: translateX(72px) rotate(1deg);
}
.journal main .public-switcher-tab--chanterelle.is-active,
#journal-entries main .public-switcher-tab--chanterelle.is-active {
  background: linear-gradient(150deg, #f7d4ee, #e9bddf);
  color: var(--chanterelle-ink);
}
.journal main .tape,
#journal-entries main .tape {
  position: relative;
  left: 0;
  bottom: 0;
}
.journal main .tape:before,
#journal-entries main .tape:before {
  position: absolute;
  content: "";
  background-image: url(../images/ripped.png);
  background-size: 345px 100px;
  background-repeat: no-repeat;
  top: 0;
  left: 48%;
  width: 420px;
  height: 160px;
  transform: rotate(0deg) translate(-50%, -20%);
  filter: none;
  opacity: 53%;
  background-blend-mode: exclusion;
  z-index: -1;
}
.journal main .description,
#journal-entries main .description {
  font-family: "mushroom2";
  background-color: rgba(92, 92, 92, 0.1176470588);
  border-radius: 10px;
  padding: 20px;
}
.journal main .signature,
#journal-entries main .signature {
  font-family: "mushroom2";
  line-height: 1;
  font-size: 35px;
  left: 69%;
  top: -10px;
  display: inline-block;
  z-index: 1;
}
.journal main .signature:before,
#journal-entries main .signature:before {
  background-size: 365px 100px;
  width: 365px;
}
.journal main .signature:after,
#journal-entries main .signature:after {
  content: "";
}
.journal main .two-col,
#journal-entries main .two-col {
  display: flex;
  justify-content: space-between;
  width: 100%;
  flex-direction: row-reverse;
  align-items: center;
}
.journal main .two-col .pagination,
#journal-entries main .two-col .pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  z-index: 2;
  width: 300px;
  padding: 10px;
  border-radius: 10px;
  transform: rotate(-5deg);
}
.journal main .two-col .pagination:after,
#journal-entries main .two-col .pagination:after {
  position: absolute;
  content: url(../images/ripped-tape-alt.png);
  transform: inherit;
  filter: opacity(0.8);
  z-index: -1;
  left: 0;
}
.journal main .two-col .pagination a,
#journal-entries main .two-col .pagination a {
  padding: 5px 10px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  text-decoration: none;
  color: #333;
}
.journal main .two-col .pagination a:hover,
#journal-entries main .two-col .pagination a:hover {
  background-color: var(--highlight-accent);
}
.journal main .two-col .pagination span,
#journal-entries main .two-col .pagination span {
  margin: 0 10px;
  font-weight: bold;
  font-size: small;
}
.journal main .two-col .pagination .next,
.journal main .two-col .pagination .prev,
#journal-entries main .two-col .pagination .next,
#journal-entries main .two-col .pagination .prev {
  position: relative;
  background-color: transparent;
  border: none;
  padding: 5px 10px;
  outline: none;
  border-radius: 50%;
  background: rgba(233, 216, 14, 0.3490196078);
  width: 40px;
  margin-left: 5px;
  font-family: "mushroom2";
  font-size: 3rem;
  cursor: pointer;
  transition: all ease-in 0.3s;
}
.journal main .two-col .pagination .next:after,
#journal-entries main .two-col .pagination .next:after {
  position: relative;
  content: ">";
  display: flex;
  justify-content: center;
  align-items: center;
  top: 2px;
}
.journal main .two-col .pagination .prev:before,
#journal-entries main .two-col .pagination .prev:before {
  position: relative;
  content: "<";
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
}
.journal main .two-col .chanterelle-version,
#journal-entries main .two-col .chanterelle-version {
  position: relative;
  margin-left: 0 !important;
  width: fit-content;
}
.journal main .two-col .chanterelle-version h2,
#journal-entries main .two-col .chanterelle-version h2 {
  position: relative;
  font-family: "festivo";
  font-size: 30px;
  line-height: 1;
  text-transform: uppercase;
  margin: 20px 0;
  padding: 3px;
  border-radius: 5px;
}
.journal main .two-col .chanterelle-version .chanterelle-receiver-link,
#journal-entries main .two-col .chanterelle-version .chanterelle-receiver-link {
  margin: -12px 0 16px;
  font-size: 0.95rem;
}
.journal main .two-col .chanterelle-version .chanterelle-receiver-link a,
#journal-entries main .two-col .chanterelle-version .chanterelle-receiver-link a {
  color: inherit;
  text-decoration: underline dotted;
}
.journal main .two-col .chanterelle-version:before,
#journal-entries main .two-col .chanterelle-version:before {
  display: none;
  position: absolute;
  content: "Chanterelle";
  text-transform: uppercase;
  top: -2px;
  right: -110px;
  padding: 3px;
  border-radius: 5px;
  background-color: rgba(255, 105, 180, 0.2117647059) !important;
  color: #fff;
  text-decoration: yellow underline wavy;
}
.journal main .two-col .chanterelle-version li,
#journal-entries main .two-col .chanterelle-version li {
  list-style-type: disc;
  padding-left: 15px;
}
.journal main .two-col .chanterelle-version li::marker,
#journal-entries main .two-col .chanterelle-version li::marker {
  color: yellow;
}
.journal main .two-col .chanterelle-version li a,
#journal-entries main .two-col .chanterelle-version li a {
  filter: drop-shadow(2px 4px 6px yellow);
}
.journal main .two-col .chanterelle-version li a:hover,
#journal-entries main .two-col .chanterelle-version li a:hover {
  color: var(--dark-brown);
  background-color: transparent;
  text-decoration: yellow underline wavy;
  animation: blur 2.5s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
}
.journal main ul,
#journal-entries main ul {
  list-style-type: auto;
  padding: 0;
  z-index: 2;
  position: relative;
  margin-left: 20px;
}
.journal main ul li,
#journal-entries main ul li {
  margin: 15px 0;
  font-size: 40px;
  font-family: "mushroom2";
}
.journal main ul li::marker,
#journal-entries main ul li::marker {
  font-size: 34px;
  font-weight: bold;
  color: #407700;
}
.journal main ul a,
#journal-entries main ul a {
  position: relative;
  text-decoration: none;
  color: #407700;
  padding: 8px 8px 0 8px;
  transition: all 0.01s ease-in-out;
}
.journal main ul a:hover,
#journal-entries main ul a:hover {
  text-decoration: var(--light-green) underline wavy;
  color: #333;
  background-color: rgba(139, 195, 74, 0.1490196078);
  border-radius: 10px;
}
.journal main ul a:hover:before,
#journal-entries main ul a:hover:before {
  position: absolute;
  content: "🍄";
  right: -20px;
  bottom: -20px;
  transform: scale(0.5);
  filter: sepia(1);
}
.journal main ul a .read-status,
#journal-entries main ul a .read-status {
  position: relative;
  color: #50a58b;
  font-weight: bold;
  font-size: smaller;
}
.journal main ul a .read-status:after,
#journal-entries main ul a .read-status:after {
  position: relative;
}
.journal main ul a .read-status.unread,
#journal-entries main ul a .read-status.unread {
  color: red;
}
.journal .seal,
#journal-entries .seal {
  right: 120px;
  bottom: 100px;
}

@media screen and (max-width: 1024px) {
  #journal-entries main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 200px;
  }
  #journal-entries main #parchment {
    min-width: 100%;
  }
  #journal-entries main .tape:before {
    left: 57%;
    width: 350px;
  }
  #journal-entries main .title {
    left: 0;
  }
  #journal-entries main .title:before {
    top: 0;
    right: 40px;
  }
  #journal-entries main .title:after {
    transform: scale(0.6);
    left: 0;
  }
  #journal-entries main .description {
    width: 90%;
  }
  #journal-entries main .signature {
    left: 0;
  }
  #journal-entries main .two-col {
    width: 90%;
  }
  #journal-entries main .seal {
    left: 10%;
    bottom: 100px;
  }
  #journal-entries main .public-switcher {
    position: static;
    width: min(90%, 460px);
    margin: 0 auto 15px;
    flex-direction: row;
    justify-content: center;
    gap: 12px;
  }
  #journal-entries main .public-switcher-tab,
  #journal-entries main .public-switcher-tab--chanterelle {
    width: 48%;
    transform: rotate(0deg);
    border-radius: 12px;
    padding: 12px;
  }
  #journal-entries main .public-switcher-tab:hover,
  #journal-entries main .public-switcher-tab:focus-visible,
  #journal-entries main .public-switcher-tab.is-active {
    transform: rotate(0deg);
  }
}
@media screen and (max-width: 640px) {
  #journal-entries main .two-col {
    display: inline;
  }
  body.public main .title:after {
    left: -120px !important;
  }
  body.public section ul {
    margin-left: 65px !important;
  }
  body.public section ul li a:before {
    display: none;
  }
}
body#journal-entries.public-entries-chanterelle main .title {
  font-family: mushroom2;
}
body#journal-entries.public-entries-chanterelle main section ul li,
body#journal-entries.public-entries-chanterelle main section ul li a {
  font-family: mushroom2;
  font-size: 45px;
  text-transform: lowercase;
  line-height: 1;
  color: #d02f87;
}
body#journal-entries.public-entries-chanterelle main section ul li span.li-number,
body#journal-entries.public-entries-chanterelle main section ul li a span.li-number {
  color: #d02f87;
}
body#journal-entries.public-entries-chanterelle main section ul li:hover,
body#journal-entries.public-entries-chanterelle main section ul li a:hover {
  text-decoration: #d02f87 underline wavy;
  background-color: rgba(208, 47, 135, 0.1490196078);
}
body#journal-entries.public-entries-chanterelle main section .description {
  font-family: mushroom2;
}