/*
Change these options to customize the color scheme and a few layout options of your website.
Most layout options are provided by the comic_git_engine by files in the `css/` directory.
I do not recommend messing with those settings unless you know what you're doing, or you're
willing to spend a lot of time on trial and error.

For any colors, you can represent them in hexadecimal like this (#FF0000 = red)
or use this list of available color names: https://www.w3schools.com/cssref/css_colors.asp
 */

/* Global values */
body {
    font-family: "Balsamiq Sans", sans-serif;  /* The font of all the text on all pages */
    color: black;  /* The color of the font of all of the text on your whole website, except links.
                      If you want to change the color of text in certain parts of the page, and not the whole site,
                      you can define `color` in other blocks and it will only apply to that element and all
                      of the elements it contains. */
    background-color: #47604B;  /* The color of the background behind everything */
    background-image: url("../../../images/bgartfixed.png");
	background-attachment: fixed;
	background-size: 1097px auto;
	background-repeat: repeat;
	padding-top: env(safe-area-inset-top);
	padding-bottom: env(safe-area-inset-bottom);
	margin-top: 0px;
}

h1, h2, h3 {
    font-family: 'Balsamiq Sans', cursive;
}

a {
    color: #B08669;  /* The color of the hyperlinks */
}

#banner {
	background-color: #47604B;
	padding-bottom: 15px;
	margin-bottom: 0px;
}

#post-date {
	margin-top: 0px
	font-weight: 400;
	color: #704f38;
	font-size: smaller;
}

#socials {
	padding-top: 10px;
	padding-left: 5px;
	display: flex;
	padding-bottom: 5px;
	padding-right: 20px;
}

#allLinks {
	display: flex;
	justify-content: space-between;
	background-color: #47604B;
}


#socials a {
	color: #bbcc97;
	padding-top: 4px;
	transition: transform 0.25s ease, color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

#socials a:hover {
	transform: scale(1.1125);
	color: #F9F4EE !important;
}

.bottomTags {
	display: flex;
	font-size: smaller;
	color: #B08669;
}

#post-date::before {
	content: '\f133';
	font-family: 'Font Awesome 6 Free';
	font-weight: 400;
	color: #704f38;
	padding: 0 .3rem 0 0;
}

#storyline::before {
	content: '\f1c5';
	font-family: 'Font Awesome 6 Free';
	font-weight: 400;
	color: #B08669;
	padding: 0 .3rem 0 0;
}

#characters:before {
	content: '\e533';
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	color: #B08669;
}

#characters, #tags {
	padding: 0 0 0 1rem;
}

#tags:before {
	font-weight: 900;
	color: #B08669;
	content: '\f02c';
	font-family: 'Font Awesome 6 Free';
}

#container {
	max-width: 1000px;
	padding-top: 0px;
	margin: 0px;
	padding: 0px;
	background-color: #FFFFED;
}

#banner-img {
	max-width: 1000px;
	transition: opacity 0.2s ease;
	width: 100%;
}

.comic-image {
	max-width: 1000px;
	border-radius: 25px;
	border: 10px solid #FFFFED;
}

.archive-thumbnail-page img {
  width: 100px;
}

#comic-page {
	display: flex;
	justify-content: center;
}

img {
	max-width: 1000px;
}

/* Top navigation links bar */

.mobileMenu {
	display: none;
}

#links-bar {
	padding-left: 20px;
	padding-bottom: 0px;
}

.navigation-button-disabled img, .navigation-button img {
	width: 85px;
}

.characterBox p {
	color: #2C0B00;
}

a.link-bar-link {
  padding: 8px 20px;
  border-radius: 50px;
  text-decoration: none;
  color: #6F855E;
  background-color: #bbcc97;
  transition: background-color 0.2s, color 0.2s;
  line-height: 2.4;
  font-weight: bold;
}

a.link-bar-link:hover,
a.link-bar-link.active {
  background-color: #F9F4EE;
}

.link-bar-separator {
  margin: 0px 1px;
  visibility: hidden;
}

/* Comic navigation buttons */
a.navigation-button {
    color: #2E9BC7;  /* Color of the navigation bar hyperlinks */
    font-size: 2em;  /* Size of the navigation bar hyperlinks */
    text-decoration: none;  /* Delete this if you want your navigation links to be underlined */
}

a.navigation-button-disabled {
    color: gray;  /* Color of the disabled navigation bar hyperlinks */
    font-size: 2em;  /* Size of the disabled navigation bar hyperlinks */
    text-decoration: none;  /* Delete this if you want your disabled navigation links to be underlined */
}

/* Buttons: turn any link into a button by adding class="button" within the <a> tag */
.button {
    background-color: #2E9BC7;  /* Color of button hyperlinks */
    color: white;  /* Color of the words in button hyperlinks */
}

.button:hover {
    background-color: #62C5E8;  /* Color of button hyperlinks when the mouse hovers over it */
    color: white;    /* Color of the words in button hyperlinks when the mouse hovers over it */
}

#comic-page {
    margin-bottom: 20px;
}

#click-for-overlay, #open-image, #open-image-window {
    cursor: zoom-in;
}

#comic-page-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    cursor: zoom-out;
}

#comic-overlay-image {
    margin: 1rem;
    max-width: calc(100% - 2rem);
    height: calc(100% - 2rem);
    object-fit: contain;
}

.navigation-bar {
    display: flex;
    margin: 0 auto 20px auto;
    font-weight: bold;
    justify-content: center;
}

.navigation-button, .navigation-button-disabled {
    padding: 0 20px;
    white-space: nowrap;
}

#post-title {
    margin-top: 5px;
    margin-bottom: 10px;
}

#post-date {
    margin-top: 1em;
    margin-bottom: 0.25em;
}

#post-body-break {
    margin: 1em 0;
}

/* Transcripts */

#transcripts-container {
    width: 100%
}

#transcript-panel {
    padding: 0 10px 10px 10px;
}

.transcript {
    display: none;
}

#language-list {
    vertical-align: top;
    padding: 10px;
}

#language-select {
    width: 100%;
}

/* The blue background with the dotted borders that shows up on most pages. */
#blurb {
	background-color: #E0E7CD;  /* The color of the "blurb" box that contains post title, post date, tags, etc. */
	width: 75%;  /* The maximum width of the blurb box. */
	border-radius: 25px;
	border: 10px solid #E0E7CD;
	padding: 15px 15px 15px 15px;
}

#blurbQuest {
	display: inline-block;
	text-align: left;
	max-width: 100%;
	margin-bottom: 20px;
	padding: 15px 15px 10px 15px;
	background-color: #E0E7CD;
	border-radius: 25px;
	border: 10px solid #E0E7CD;
	margin-top: 10px;
}

.profilePic {
	width: 138px;
}

/* This is just some code to make monospaced text a little more readable */
code {
    font-size: 120%;  /* Make the text a little bigger */
    background-color: #F0F0F0;  /* Give it a very light gray background */
    border: 1px solid gray;  /* Give it a gray border... */
    border-radius: 5px;  /* ... with rounded corners. */
    padding-left: 5px;  /* A little padding between the text and the border on the left... */
    padding-right: 5px;  /* ... and the right. */
    white-space: pre; /* Prevents code blocks from being word-wrapped */
}

#post-title {
	font-size: 1.3em;
	font-family: "Coustard", sans-serif;
	color: #704f38;
	margin-top: 0px;
	margin-bottom: -9px;
}

#post-date {
    font-weight: bold;  /* Delete this to unbold the post date */
}

#storyline, #characters, #tags {
}

.polaroid {
	transition: filter 0.3s ease;
}
  
.polaroid:hover {
  filter: brightness(1.2);
}

.characterDetails {
  text-align: left;
  color: #555001;
  font-family: "Coustard", sans-serif;
  margin-bottom: -6px;
}

.profilePic {
	width: 138px;
	height: 138px;
}

.portraitMaple {
	width: 303px;
	margin-left: 10px;
	margin-right: -10px;
}

.portraitSyrup {
	margin-bottom: -241px;
	margin-left: -100px;
	position: relative;
	top: -110px;
	right: -80px;
	width: 500px;
}

.syrupText {
	width: 203px;
	margin-left: -18px;
}

.portraitBrie {
	width: 173px;
	margin-left: 20px;
	margin-right: 0px;
}

.portraitBarry {
	width: 343px;
	margin-left: -10px;
	margin-right: 10px;
}

#overlay {
	visibility: hidden;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(24,28,23,0.8);
	z-index: 1001;
	backdrop-filter: blur(4px);
}

#overlay:hover {
  cursor: pointer;
}

.bulletinBoard {
	border-radius: 51px;
	border: 8px solid #734E37;
	margin: 0 auto;
	width: 960px;
	height: 1100px;
	background-image: url("/your_content/images/castpage/boardbg.png");
}

.polaroidMaple {
	width: 403px;
	position: relative;
	z-index: 998;
	top: 50px;
	left: -10px;
	transition: transform 0.3s ease;
	transform-origin: 57% 17%;
}

.polaroidSyrup {
	width: 393px;
	position: relative;
	z-index: 997;
	top: 140px;
	left: -140px;
	transition: transform 0.3s ease;
	transform-origin: 47% 15%;
}

.polaroidBarry {
	width: 463px;
	position: relative;
	z-index: 998;
	top: -335px;
	left: 28px;
	transition: transform 0.3s ease;
	transform-origin: 53% 10%;
	display: block;
}

.polaroidBrie {
	width: 453px;
	position: relative;
	z-index: 999;
	top: 226px;
	left: 242px;
	transition: transform 0.3s ease;
	transform-origin: 50% 7%;
}

.polaroidMaple:hover {
  transform: rotate(10deg);
}

.polaroidBarry:hover {
  transform: rotate(10deg);
}

.polaroidSyrup:hover {
  transform: rotate(-10deg);
}

.polaroidBrie:hover {
  transform: rotate(-10deg);
}

.pinOne {
	position: relative;
	top: -277px;
	width: 70px;
	right: -230px;
	z-index: 999;
}

.pinTwo {
	position: relative;
	top: -178px;
	width: 70px;
	right: -109px;
	z-index: 999;
}

.pinThree {
	position: relative;
	top: -250px;
	width: 70px;
	right: -60px;
	z-index: 999;
}

.pinFour {
	position: relative;
	top: -150px;
	width: 70px;
	right: 21px;
	z-index: 999;
}

#secretSyrup {
	display: none;
	scale: 0.95;
}

#secretMaple {
	cursor: pointer;
	width: 404px;
	position: relative;
	left: -107px;
	top: -99px;
	margin-right: -114px;
	margin-bottom: -316px;
}

.mapleText {
	width: 203px;
	margin-left: -18px;
}

.barryText {
	width: 343px;
	margin-left: -95px;
}

.brieText {
	width: 343px;
	margin-left: -110px;
}

#regularMaple {
	cursor: pointer;
	display: block;
	width: 400px;
	top: -90px;
	margin-bottom: -206px;
	left: -100px;
	position: relative;
	margin-right: -110px;
}

#secretBrie {
	margin-bottom: -306px;
	position: relative;
	margin-right: -29px;
	display: block;
	cursor: pointer;
	right: 10px;
	left: -27px;
	width: 247px;
	top: -82px;
}

#regularBrie {
	cursor: pointer;
	display: block;
	width: 258px;
	top: -102px;
	margin-bottom: -326px;
	left: -40px;
	position: relative;
	margin-right: -50px;
}

@keyframes bounce {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-10px); }
  60%  { transform: translateY(3px); }
  80%  { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

.bouncing {
  animation: bounce 0.4s ease;
}

#descriptionMaple {
	background-image: url("/your_content/images/castpage/bgweb.png");
	border-radius: 25px;
	border: 10px solid #F9F4EE;
	margin-left: -10px;
	position: fixed;
	z-index: 1001;
	width: 870px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	visibility: hidden;
	background-position-x: -190px;
	background-size: 1230px;
	background-position-y: -120px;
}

#descriptionSyrup {
	background-image: url("/your_content/images/castpage/bgweb.png");
	border-radius: 25px;
	border: 10px solid #F9F4EE;
	margin-left: -10px;
	position: fixed;
	z-index: 1001;
	width: 870px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	visibility: hidden;
	background-position-x: -190px;
	background-size: 1230px;
	background-position-y: -120px;
}

#descriptionBarry{
	background-image: url("/your_content/images/castpage/bgweb.png");
	border-radius: 25px;
	border: 10px solid #F9F4EE;
	margin-left: -10px;
	position: fixed;
	z-index: 1001;
	width: 870px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	visibility: hidden;
	background-position-x: -190px;
	background-size: 1230px;
	background-position-y: -120px;
}

#descriptionBrie {
	background-image: url("/your_content/images/castpage/bgweb.png");
	border-radius: 25px;
	border: 10px solid #F9F4EE;
	margin-left: -10px;
	position: fixed;
	z-index: 1001;
	width: 870px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	visibility: hidden;
	background-position-x: -190px;
	background-size: 1230px;
	background-position-y: -120px;
}

.characterBox {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-top: 10px;
	margin-left: 5px;
	margin-bottom: 10px;
}

.comics {
	width: 167px;
	transition: opacity 0.2s ease;
}

.comics:hover {
	opacity: 0.8;
	cursor: pointer;
}

.comicsListTitle {
	font-family: "Coustard", sans-serif;
	color: #47604b;
}	

#descriptionMaple, #descriptionSyrup, #descriptionBrie, #descriptionBarry {
	display: block;
	overflow: visible;
}

#descriptionMapleMobile, #descriptionSyrupMobile, #descriptionBrieMobile, #descriptionBarryMobile {
	display: none;
}

.badge {
	display: block;
}

#menu-dropdown {
	display: none;
}

#mobile-header {
	display: none;
	align-items: center;
	justify-content: space-between;
	background-color: #47604B;
	padding: 0 20px;
	height: 60px;
}

.header-socials {
	display: flex;
	align-items: center;
	gap: 14px;
}

.header-socials a {
	display: flex;
	align-items: center;
	color: #bbcc97;
	transition: color 0.2s, filter 0.2s;
}

.header-socials a:hover,
.header-socials a:active {
	color: #fff;
	filter: drop-shadow(0 0 5px #F35E36);
}

.hamburger {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 32px;
	height: 22px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

.hamburger span {
	display: block;
	width: 100%;
	height: 3px;
	background-color: #fff;
	border-radius: 3px;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger.is-open span:nth-child(1) {
	transform: translateY(9.5px) rotate(45deg);
}

.hamburger.is-open span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.hamburger.is-open span:nth-child(3) {
	transform: translateY(-9.5px) rotate(-45deg);
}

#menu-dropdown {
	display: none;
	flex-direction: column;
	width: 100%;
}


#links-bar-mobile {
	display: flex;
	flex-direction: column;
	width: 100%;
}


#links-bar-mobile a {
  color: white;
  text-decoration: none;
  font-family: "Fredoka", sans-serif;
  font-size: 2em;
  text-align: center;
  padding: 15px 0;
  background-color: #47604B;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  border-radius: 0;
  line-height: initial;
  opacity: 0;
  transform: translateY(-8px);
  transition: background-color 0.2s, color 0.2s, opacity 0.3s ease, transform 0.3s ease;
}

#menu-dropdown.open #links-bar-mobile a {
  opacity: 1;
  transform: translateY(0);
}

#links-bar-mobile a:nth-child(1) { transition-delay: 0.05s; }
#links-bar-mobile a:nth-child(2) { transition-delay: 0.1s; }
#links-bar-mobile a:nth-child(3) { transition-delay: 0.15s; }
#links-bar-mobile a:nth-child(4) { transition-delay: 0.2s; }
#links-bar-mobile a:nth-child(5) { transition-delay: 0.25s; }

#links-bar-mobile a:hover {
	background-color: #6F855E;
}

#links-bar-mobile a:active {
	background-color: #bbcc97;
	color: #3a4a30;
}

.badgeMobile {
	display: none;
}

.welcomeOne {
  background-color: #E0E7CD;
  width: 46%;
  border-radius: 45px;
  border: 10px solid #E0E7CD;
  text-align: left;
  max-width: 100%;
  padding: 8px 15px 80px 15px;
  justify-content: center;
  display: flex;
  margin: 0 auto;
    margin-top: 0px;
  margin-top: 40px;
  align-items: center;
  flex-direction: column;
  position: relative;
}

.welcomeBanner {
  width: 80%;
}

.welcomeText {
  text-align: center;
  color: #704f38;
  font-weight: bold;
  margin-top: 8px;
  margin-bottom: 8px;
}

.comicsLink {
  position: absolute;
  width: 390px;
  top: 117px;
  right: calc(50% + 0%);
}

.latestLink {
  position: absolute;
  width: 390px;
  top: 117px;
	left: calc(50% + 0%);
}

.ageRange {
  position: absolute;
  width: 110px;
  top: 187px;
}

.aboutOne {
  background-color: #E0E7CD;
  width: 33%;
  border-radius: 45px;
  border: 10px solid #E0E7CD;
  text-align: left;
  max-width: 100%;
  padding: 20px 15px 10px 15px;
  justify-content: center;
  display: flex;
  margin-top: 250px;
  align-items: center;
  flex-direction: column;
  position: relative;
  margin-left: auto;
  margin-right: 160px;
  margin-bottom: 22px;
}

.aboutArtist {
  width: 80%;
  margin-bottom: 20px;
}

.aboutText {
  text-align: center;
  color: #704f38;
  font-weight: bold;
  margin-top: 8px;
  margin-bottom: 8px;
}

.patreonButton, .patreonButtonHover {
  width: 80%;
  margin-top: 10px;
}

.yeen {
  position: absolute;
  width: 390px;
  top: 7px;
  left: -354px;
  display: block;
}

.yeenMobile {
	display: none;
}

.latestLink:hover {}

@media only screen and (max-width: 900px) {

body {
	padding: 0;
	margin: 0;
}

#container {
	width: 100%;
	padding: 0px;
	margin: 0px;
	background-color: #FFFFED;
}

#banner {
	width: 100%;
	margin-bottom: -5px;
	background-color: #47604B;
}

.navigation-button-disabled img, .navigation-button img {
	width: 70%;
}

.comic-image {
	width: 100%;
	border: none;
	margin: 0;
	border-radius: 0;
}

.bulletinBoard {
	width: 90vw;
    box-sizing: border-box;
    height: 222vw;
    position: relative;
}

.charas {
	margin-top: 16px;
}

.pinOne {
	position: absolute;
    width: 9%;
    height: auto;
    top: 2%;
    left: 29%;
}

.pinTwo {
	position: absolute;
    width: 9%;
    height: auto;
    top: 20%;
    left: 65%;
}

.pinThree {
	position: absolute;
    width: 9%;
    height: auto;
    top: 45%;
    left: 30%;
}

.pinFour {
	position: absolute;
    width: 9%;
    height: auto;
    top: 74%;
    left: 61%;
}

.polaroidMaple {
	position: absolute;
    width: 62%;
    height: auto;
    top: 0%;
    left: 2%;
}

.polaroidSyrup {
	position: absolute;
    width: 60%;
    height: auto;
    top: 19%;
    left: 38%;
}

.polaroidBarry {
	position: absolute;
    width: 70%;
    height: auto;
    top: 43%;
    left: -2%;
}

.polaroidBrie {
	position: absolute;
    width: 70%;
    height: auto;
    top: 72%;
    left: 30%;
}

#secretMapleMobile {
	cursor: pointer;
	width: 80%;
	margin-right: 0px;
	padding-bottom: 0px;
	margin-left: 0px;
	max-width: 550px;
}

#regularMapleMobile {
	cursor: pointer;
    width: 80%;
    margin-right: 0px;
    padding-bottom: 0px;
    margin-left: 0px;
    display: initial;
	max-width: 550px;
}

#secretBarryMobile {
	cursor: pointer;
	width: 80%;
	margin-right: 0px;
	padding-bottom: 0px;
	margin-left: 20dvw;
	max-width: 550px;
}

#regularBarryMobile {
	cursor: pointer;
    width: 80%;
    margin-right: 0px;
    padding-bottom: 0px;
    margin-left: 20dvw;
    display: initial;
	max-width: 550px;
}

#secretSyrupMobile {
	cursor: pointer;
    width: 90%;
    margin-right: 0px;
    padding-bottom: 0px;
    margin-left: 21dvw;
    max-width: 550px;
}

#regularSyrupMobile{
	cursor: pointer;
    width: 90%;
    margin-right: 0px;
    padding-bottom: 0px;
    margin-left: 21dvw;
    max-width: 550px;
	display: initial;
}

#regularBrieMobile {
	cursor: pointer;
    width: 50%;
    margin-right: 0px;
    padding-bottom: 0px;
    margin-left: 0px;
    display: initial;
	max-width: 225px;
}

#secretBrieMobile {
	cursor: pointer;
    width: 50%;
    margin-right: 0px;
    padding-bottom: 0px;
    margin-left: 0px;
	max-width: 225px;
}

#descriptionMaple, #descriptionSyrup, #descriptionBrie, #descriptionBarry {
	display: none;
}

#descriptionMapleMobile {
	background-color: #E3D8C0;
	position: fixed;
	z-index: 1001;
	width: 100vw;
	top: 0px;
	visibility: hidden;
}

#descriptionSyrupMobile {
	background-color: #E3D8C0;
	position: fixed;
	z-index: 1001;
	width: 100vw;
	top: 0px;
	visibility: hidden;
}

#descriptionBarryMobile {
	background-color: #E3D8C0;
	position: fixed;
	z-index: 1001;
	width: 100vw;
	top: 0px;
	visibility: hidden;
}

#descriptionBrieMobile {
	background-color: #E3D8C0;
	position: fixed;
	z-index: 1001;
	width: 100vw;
	top: 0px;
	visibility: hidden;
}

#descriptionMapleMobile, #descriptionSyrupMobile, #descriptionBrieMobile, #descriptionBarryMobile {
	display: flex;
}

.castMobile {
	display: flex;
	align-items: center;
	flex-direction: column;
	height: 100vh;
}

#overlay {
	display: none;
}

.popupMobile {
	width: 100%;
	margin-left: 0px;
	max-height: 100dvh;
	overflow-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-top: 20px;
	overflow-x: hidden;
}

.popupMobile::-webkit-scrollbar {
	display: none;
}

.close-btn {
	position: fixed;
	bottom: 0;
	height: 10dvh;
	width: 100%;
	border: none;
	background: #47604B !important;
	color: #fff;
	font-size: 25px;
    font-weight: 500;
    letter-spacing: 0.05em;
    cursor: pointer;
    font-family: "Fredoka", sans-serif;
	display: block;
}

.infinite-page-image {
	width: 100vw;
}

.mobileMenu {
	text-decoration: none;
	font-size: 3em;
    height: 60px;
	display: flex;
	font-family: "Fredoka", sans-serif;
	justify-content: center;
	color: white;
	background-color: #47604B;
}

.mobileMenu::before {
	content: "Menu";
}

#allLinks {
	display: none;
}
 
#mobile-header {
	display: flex;
}

#menu-dropdown {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

#menu-dropdown.open {
  grid-template-rows: 1fr;
}

#menu-dropdown-inner {
  overflow: hidden;
}

#links-bar-mobile {
	flex-direction: column;
	width: 100%;
	display: flex;
}

.link-bar-link {
	font-family: "Fredoka", sans-serif;
	font-size: 2em;
	text-align: center;
	padding: 15px 0;
	background-color: #47604B;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	transition: background-color 0.2s, color 0.2s;
}

.menuToggled {
	background-color: white;
	color: #F9F4EE;
}

.menuToggled::before {
	content: "Hide Menu"
}

#links-bar {
	display: none;
}

#post-title {
	font-size: 1.2em;
}

.profilePic {
	width: 90px;
	height: 90px;
}

.badge {
	display: none;
}

body:has(#descriptionMapleMobile:not([style*="visibility: hidden"])),
  body:has(#descriptionSyrupMobile:not([style*="visibility: hidden"])),
  body:has(#descriptionBrieMobile:not([style*="visibility: hidden"])),
  body:has(#descriptionBarryMobile:not([style*="visibility: hidden"])) {
    overflow: hidden;
  }
  
.mapleText {
	margin-left: 0px;
	width: 70%;
	max-width: 350px;
}

.syrupText {
	margin-left: 0px;
	width: 70%;
	max-width: 350px;
}

.brieText {
	margin-left: 0px;
	width: 70%;
	max-width: 350px;
}

.barryText {
	margin-left: 0px;
	width: 70%;
	max-width: 350px;
}

.badgeMobile {
	display: block;
}

.post-body {
	padding-bottom: 10dvh;
}

.navigation-button, .navigation-button-disabled {
  padding: 0 0px;
}

.welcomeOne {
	width: 90%;
    padding: 8px 15px 26px 15px;
    box-sizing: border-box;
}

.welcomeBanner {
  width: 100%;
  margin-top: 10px;
}

.comicsLink {
	width: 60%;
    top: 83%;
}

.latestLink {
	width: 60%;
    top: 83%;
}

.ageRange {
	width: 23%;
    top: 92%;
}

.aboutOne {
	width: 90%;
    padding: 20px 15px 10px 15px;
    margin-bottom: 22px;
    box-sizing: border-box;
    margin-right: auto;
    margin-top: 47%;
}

.aboutArtist {
	width: 80%;
	margin-bottom: 20px;
}

.yeenMobile {
	position: relative;
	width: 30%;
	display: block;
}

.yeen {
	display: none;
}

}