Backrooms-Q

/*
    Backrooms CN Main Page CSS
    by hoah2333 & Eltrac
*/
#page-title {
  display: none;
}
 
#page-content .bannerContainer {
  display: grid;
  grid-template-areas: "welcome welcome welcome" "discord faq join";
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 3%;
}
#page-content .bannerContainer .welcome {
  grid-area: welcome;
  background-color: rgb(var(--gray-monochrome));
  color: rgb(var(--white-monochrome));
  font-style: italic;
  padding: 1rem;
}
#page-content .bannerContainer .navigator {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  background-color: rgb(var(--gray-monochrome));
  -webkit-border-radius: 0 0 1rem 1rem;
          border-radius: 0 0 1rem 1rem;
  height: -webkit-min-content;
  height: -moz-min-content;
  height: min-content;
  margin: 0 0 4rem 0;
  -webkit-transition: margin 150ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: margin 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
#page-content .bannerContainer .navigator:hover, #page-content .bannerContainer .navigator:active {
  margin: 0 0 1rem 0;
}
#page-content .bannerContainer .navigator a {
  padding: 0.5rem 0;
  width: 100%;
  text-align: center;
  color: rgb(var(--white-monochrome));
  font-size: 1.25rem;
  -webkit-transition: padding 150ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: padding 150ms cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: bold;
}
#page-content .bannerContainer .navigator a:hover, #page-content .bannerContainer .navigator a:active {
  text-decoration: none;
  -webkit-text-decoration-color: transparent;
          text-decoration-color: transparent;
  padding: 2rem 0;
}
@media (max-width: 767px) {
  #page-content .bannerContainer .navigator {
    margin: 0 0 2rem 0;
  }
  #page-content .bannerContainer .navigator:hover {
    margin: 0;
  }
  #page-content .bannerContainer .navigator a {
    font-size: 1.1rem;
  }
  #page-content .bannerContainer .navigator a:hover, #page-content .bannerContainer .navigator a:active {
    padding: 1.5rem 0;
  }
}
#page-content .bannerContainer .discord {
  grid-area: discord;
}
#page-content .bannerContainer .faq {
  grid-area: faq;
}
#page-content .bannerContainer .join {
  grid-area: join;
}
#page-content .announceContainer {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  border: 4px solid rgb(var(--gray-monochrome));
  -webkit-align-content: space-between;
          align-content: space-between;
}
#page-content .announceContainer .welcome {
  background-color: rgb(var(--gray-monochrome));
  color: rgb(var(--white-monochrome));
  font-weight: bold;
  width: 100%;
  text-align: center;
  font-size: 1.5rem;
  padding: 0 0.75rem;
}
@media (max-width: 767px) {
  #page-content .announceContainer .welcome {
    font-size: 1.2rem;
  }
}
#page-content .announceContainer .announcement,
#page-content .announceContainer .more {
  background-color: rgb(var(--pale-gray-monochrome));
  width: 100%;
  padding: 0.75rem;
  border-top: 4px solid rgb(var(--gray-monochrome));
}
#page-content .announceContainer .more {
  padding: 0;
}
#page-content .announceContainer .more .collapsible-block-folded,
#page-content .announceContainer .more .collapsible-block-unfolded .collapsible-block-unfolded-link {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
#page-content .announceContainer .more .collapsible-block-folded a.collapsible-block-link,
#page-content .announceContainer .more .collapsible-block-unfolded .collapsible-block-unfolded-link a.collapsible-block-link {
  width: 100%;
  padding: 1rem 0;
  text-align: center;
  background: rgba(var(--gray-monochrome), 0.2);
  -webkit-transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
#page-content .announceContainer .more .collapsible-block-folded a.collapsible-block-link:hover,
#page-content .announceContainer .more .collapsible-block-unfolded .collapsible-block-unfolded-link a.collapsible-block-link:hover {
  text-decoration: none;
  -webkit-text-decoration-color: transparent;
          text-decoration-color: transparent;
  background: rgba(var(--gray-monochrome), 0.4);
}
#page-content .announceContainer .more .collapsible-block-folded[style*=block],
#page-content .announceContainer .more .collapsible-block-unfolded[style*=block] .collapsible-block-unfolded-link {
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: flex !important;
}
#page-content .announceContainer .more .collapsible-block-unfolded .collapsible-block-unfolded-link a.collapsible-block-link {
  border-bottom: 4px solid rgb(var(--gray-monochrome));
}
#page-content .announceContainer .more .collapsible-block-unfolded .collapsible-block-content {
  background: rgb(var(--gray-monochrome));
  color: rgb(var(--white-monochrome));
  text-align: center;
}
#page-content .announceContainer .more .collapsible-block-unfolded .collapsible-block-content p {
  margin: 0;
}
#page-content .announceContainer .archive {
  background: rgb(var(--gray-monochrome));
  color: rgb(var(--white-monochrome));
  text-align: right;
  width: 100%;
}
#page-content .announceContainer .archive a {
  padding: 0 1rem;
  color: rgb(var(--white-monochrome));
}
#page-content .recentPages {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  row-gap: 1rem;
}
#page-content .recentPages .pageContainer {
  display: grid;
  grid-template-areas: "title" "page" "recently";
  grid-template-rows: 1.5rem minmax(auto, 11.81rem) 1.5rem;
  -webkit-flex-basis: 50%;
          flex-basis: 50%;
}
@media (max-width: 550px) {
  #page-content .recentPages .pageContainer {
    -webkit-flex-basis: 100%;
            flex-basis: 100%;
  }
}
#page-content .recentPages .pageContainer p {
  margin: 0;
}
#page-content .recentPages .pageContainer .title {
  grid-area: title;
  background: rgb(var(--gray-monochrome));
  color: rgb(var(--white-monochrome));
  font-weight: bold;
  padding: 0 1rem;
}
#page-content .recentPages .pageContainer .page {
  grid-area: page;
  border: solid rgb(var(--gray-monochrome));
  border-width: 0 3px 0 4px;
  padding: 0.5em -webkit-calc(1rem - 4px);
  padding: 0.5em calc(1rem - 4px);
  max-height: 12rem;
  background-color: rgb(var(--pale-gray-monochrome));
  overflow-y: hidden;
}
#page-content .recentPages .pageContainer .page .list-pages-box p {
  max-height: 12rem;
  overflow-y: hidden;
}
#page-content .recentPages .pageContainer .page .list-pages-box p br {
  display: none;
}
#page-content .recentPages .pageContainer .page .list-pages-box p a {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#page-content .recentPages .pageContainer .recently {
  grid-area: recently;
  background: rgb(var(--gray-monochrome));
  text-align: right;
  padding: 0 1rem;
}
#page-content .recentPages .pageContainer .recently a {
  color: rgb(var(--white-monochrome));
}
#page-content .recentPages .featurePrize {
  grid-template-rows: 1.5rem minmax(auto, 7.68rem) 1.5rem;
  -webkit-flex-basis: 100%;
          flex-basis: 100%;
}
@media (max-width: 550px) {
  #page-content .recentPages .featurePrize {
    grid-template-rows: 1.5rem minmax(auto, 11.81rem) 1.5rem;
  }
}
#page-content .recentPages .featureLevelO .page p,
#page-content .recentPages .featureTaleO .page p,
#page-content .recentPages .featureLevelT .page p,
#page-content .recentPages .featureTaleT .page p,
#page-content .recentPages .featurePrize .page p {
  font-size: 0.8rem;
}
#page-content .recentPages .featureLevelO .page p:nth-of-type(1),
#page-content .recentPages .featureTaleO .page p:nth-of-type(1),
#page-content .recentPages .featureLevelT .page p:nth-of-type(1),
#page-content .recentPages .featureTaleT .page p:nth-of-type(1),
#page-content .recentPages .featurePrize .page p:nth-of-type(1) {
  font-size: 1rem;
}
#page-content .recentPages .featureLevelO .page p:nth-of-type(2),
#page-content .recentPages .featureTaleO .page p:nth-of-type(2),
#page-content .recentPages .featureLevelT .page p:nth-of-type(2),
#page-content .recentPages .featureTaleT .page p:nth-of-type(2),
#page-content .recentPages .featurePrize .page p:nth-of-type(2) {
  font-size: 0.5rem;
}
#page-content .toolsContainer {
  display: grid;
  color: rgb(var(--white-monochrome));
  grid-gap: 0.5rem;
}
#page-content .toolsContainer .tools {
  display: grid;
  grid-template-areas: "image text" "link text";
  grid-template-columns: 5rem auto;
  justify-items: center;
  grid-gap: 0.5rem;
  background-color: rgb(var(--gray-monochrome));
  padding: 0.75rem;
}
#page-content .toolsContainer .tools:nth-of-type(even) {
  direction: rtl;
}
#page-content .toolsContainer .tools:nth-of-type(even) * {
  direction: ltr;
}
#page-content .toolsContainer .tools img {
  grid-area: image;
}
#page-content .toolsContainer .tools a {
  grid-area: link;
  color: rgb(var(--white-monochrome));
}
#page-content .toolsContainer .tools .description {
  grid-area: text;
  justify-self: left;
  pointer-events: none;
}
#page-content .toolsContainer .tools br {
  display: none;
}
#page-content .international .announcement {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  position: relative;
}
#page-content .international .announcement img {
  width: 50px;
  -webkit-filter: drop-shadow(0 0 1px rgba(var(--gray-monochrome), 0.8));
          filter: drop-shadow(0 0 1px rgba(var(--gray-monochrome), 0.8));
}
#page-content .international .announcement.es img, #page-content .international .announcement.jp img {
  -webkit-align-self: center;
          align-self: center;
}
#page-content .international .announcement h3 {
  margin: 0 0 0 1rem;
  line-height: 50px;
}
#page-content .international .announcement a {
  font-size: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  -webkit-transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
#page-content .international .announcement a:hover {
  background-color: rgba(var(--gray-monochrome), 0.2);
}/*# sourceMappingURL=https://hoah2333.github.io/Archived-works/Backrooms/start/main.css.map */