Stoat Games Website CSS File

About this Page

This section will go over everything that you may need to know about this page.
This page exists for the sole purpose of Open-Sourcing our Websites Additional CSS. So that others can utilize the solutions in which we have.
The main thing we ask is Credit for when our Solutions have been used within your Website. With a link back here associated with the Credit.
We appreciate any and all feedback on how we can improve our site, if you have any in general or in relation to the CSS, feel free to reach out via our Contact Methods!
Without further ado, the Stoat Games Website CSS File:
Additional CSS
#faq-block {
 display: none !important;
}

a,
a:link,
a:visited,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, p a { 
		text-decoration: underline solid #9b9b9b 3px;
}

a:hover,
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, p a:hover {
		text-decoration: underline solid #9b9b9b 3px;
}

b::before, 
strong::before, .md-block-render th::before {
 content: "**";
	color: #cfcfcff0;
}

b::after, 
strong::after, .md-block-render th::after {
 content: "**";
	color: #cfcfcff0;
}

b, strong, .md-block-render th {
 font-weight: normal;
 font-style: normal;
}

ul a, ol a,
.wp-block-button__link, p a { 
 color: #13fdb6 !important;
		text-decoration: underline solid #9b9b9b 3px;
}

ul a:hover, ol a:hover,
.wp-block-button__link:hover, p a:hover {
 color: #1bd099 !important;
	 text-decoration: underline solid #9b9b9b 3px;
}

.mdcc_copy-label-above {
 color: #ffffff;
 font-family: 'Marksman', sans-serif;
 font-size: 32px;
}

.mdcc_copy-label-above::before {
 content: "Copyblock: ";
}

.md-block-render table {
 border: 2px solid #9b9b9b;
 border-radius: 10px;
 margin: auto;
 font-family: 'Marksman';
 display: flex;
 flex-direction: column;
	text-align: center;
	vertical-align: center;
}

.md-block-render thead,
.md-block-render tbody,
.md-block-render tr {
 display: flex;
 flex-direction: column;
 width: 100%;
}

.md-block-render tr {
 flex-direction: row;
}

.md-block-render th, 
.md-block-render td {
 display: flex;
 flex: 1;
 padding: 5px;
 border-color: #9b9b9b;
	justify-content: center;
 align-items: center;
 text-align: center;
}

.md-block-render th {
 background-color: rgba(255, 255, 255, 0.05);
}

code {
 font-family: 'Marksman', sans-serif;
 color: #ffffff;
 background: #0000001f;
 border: 3px solid #ffffff1f;
		border-radius: 10px;
		margin: auto;
		padding: 5px;
		display: inline-block; 
 vertical-align: middle; 
}

@media screen and (min-width: 1025px) {
	#Documentation {
		margin-left: auto;
 	margin-right: auto;
		padding-left: 50px;
		padding-right: 50px;
	}
	
	#Documentation ul:not(#toc-sidebar *), 
	#Documentation ol:not(#toc-sidebar *), 
	#Documentation li:not(#toc-sidebar *) {
 margin-left: auto;
 margin-right: auto;
	}
	
	#Documentation ul:not(#toc-sidebar *) li {
 list-style-type: none;
	}

	#Documentation ul:not(#toc-sidebar *) li::before {
 content: "(*) ";
 font-weight: bolder;
	}
	
	#toc-sidebar .uagb-toc__list-wrap li {
 list-style-type: none !important;
	}

	#toc-sidebar .uagb-toc__list-wrap li:not(.uagb-toc__list--expandable)::before {
 content: "(*) ";
 font-weight: bolder;
 color: #13fdb6;
	}

	#toc-sidebar .uagb-toc__list-wrap ul li {
 background: none !important; 
	}
	
	#toc-sidebar {
 	max-height: calc(100vh - 48px);
 	overflow-y: auto;
		text-align: center;
	} 
}

@media screen and (min-width: 720px) and (max-width: 1024px) {
 #Documentation {
 margin-left: auto;
 margin-right: auto;
 padding-left: 25px;
 padding-right: 25px;
 }
	
	#Documentation ul:not(#toc-sidebar *), 
	#Documentation ol:not(#toc-sidebar *), 
	#Documentation li:not(#toc-sidebar *) {
 margin-left: auto;
 margin-right: auto;
	}
	
	#Documentation ul:not(#toc-sidebar *) li {
 list-style-type: none;
	}

	#Documentation ul:not(#toc-sidebar *) li::before {
 content: "(*) ";
 font-weight: bolder;
	}
	
	#toc-sidebar .uagb-toc__list-wrap li {
 list-style-type: none !important;
	}

	#toc-sidebar .uagb-toc__list-wrap li:not(.uagb-toc__list--expandable)::before {
 content: "(*) ";
 font-weight: bolder;
 color: #13fdb6;
	}

	#toc-sidebar .uagb-toc__list-wrap ul li {
 background: none !important; 
	}
	
	#toc-sidebar {
		text-align: center;
	} 
}

@media screen and (max-width: 719px) {
	#Documentation {
		margin-left: auto;
 	margin-right: auto;
		padding-left: 10px;
		padding-right: 10px;
	}
	
	#Documentation ul:not(#toc-sidebar *), 
	#Documentation ol:not(#toc-sidebar *), 
	#Documentation li:not(#toc-sidebar *) {
 margin-left: auto;
 margin-right: auto;
	}
	
	#Documentation ul:not(#toc-sidebar *) li {
 list-style-type: none;
	}

	#Documentation ul:not(#toc-sidebar *) li::before {
 content: "(*) ";
 font-weight: bolder;
	}
	
	#toc-sidebar .uagb-toc__list-wrap li {
 list-style-type: none !important;
	}

	#toc-sidebar .uagb-toc__list-wrap li:not(.uagb-toc__list--expandable)::before {
 content: "(*) ";
 font-weight: bolder;
 color: #13fdb6;
	}

	#toc-sidebar .uagb-toc__list-wrap ul li {
 background: none !important; 
	}
	
	h1, h2, h3, h4, h5, h6, .uagb-heading-text, 
	.wp-block-uagb-advanced-heading h1, 
	.wp-block-uagb-advanced-heading h2, 
	.wp-block-uagb-advanced-heading h3, 
	.wp-block-uagb-advanced-heading h4, 
	.wp-block-uagb-advanced-heading h5 {
 font-size: 48px;
	}
	
	.wp-block-uagb-advanced-heading h6 {
		font-size: 28px;
	}
	
	p, li, ul, ol {
 font-size: 28px;
	}
	
	#toc-sidebar {
		text-align: center;
	} 
	
	#toc-sidebar li, #toc-sidebar ul, #toc-sidebar ol
	{
		font-size: 28px;
	}
}

@media screen and (min-width: 1025px) {
	body .ast-container, 
	body .site, 
	body .container 
	{
 	max-width: 77.5%;
 	margin-left: auto;
 	margin-right: auto;
 	padding-left: 10px;
 	padding-right: 10px;
 	box-sizing: border-box;
	}
}

@media screen and (min-width: 1025px) {
 #toc-sidebar.uagb-position__sticky--stuck 		{
 left: 50% !important; 
 right: auto !important;
 position: fixed !important;
 margin-left: 10px !important;
 max-height: calc(100vh - 48px);
 overflow-y: auto;
 text-align: center;
 }
}

#toc-sidebar ul li {
 padding-left: 0;
 margin-left: 0;
}

#toc-sidebar li {
 padding-top: 0rem;
		padding-bottom: 0rem;
}

#toc-sidebar .wp-block-uagb-table-of-contents .uagb-toc__title {
 text-align: center !important;
 width: 100%;
 display: block;
		padding-top: 0px !important;
 padding-bottom: 25px !important;
 line-height: 1.2 !important;
		color: #13fdb6;
}

@keyframes intermittent-glitch {
 0%, 39%, 46%, 89%, 100% { transform: translate(0,0); opacity: 1; }
 40% { transform: translate(3px, 1px); opacity: 0.8; }
 41% { transform: translate(-3px, -1px); opacity: 0.9; }
 42% { transform: translate(2px, 3px); opacity: 0.8; }
 43% { transform: translate(-2px, -3px); opacity: 0.7; }
 44% { transform: translate(-3px, 0); opacity: 0.6; }
 45% { transform: translate(4px, 1px); opacity: 0.9; }
 
 90% { transform: translate(1px, 2px); opacity: 0.8; }
 91% { transform: translate(-4px, 0); opacity: 0.6; }
 92% { transform: translate(-2px, -4px); opacity: 0.5; }
 93% { transform: translate(4px, -2px); opacity: 0.8; }
 94% { transform: translate(-2px, 3px); opacity: 0.6; }
 95% { transform: translate(3px, 1px); opacity: 0.7; }
}

@keyframes intermittent-glitch-2 {
 0%, 19%, 26%, 49%, 56%, 84%, 100% { transform: translate(0,0) skew(0deg); opacity: 1; }
 21% { transform: translate(15px, -10px) skew(7deg); opacity: 0.5; }
 22% { transform: translate(-15px, 10px) skew(-7deg); opacity: 0.4; }
 23% { transform: translate(-12px, 15px) skew(3deg); opacity: 0.3; }
 24% { transform: translate(12px, -15px) skew(-3deg); opacity: 0.2; }
 25% { transform: translate(5px, 5px); opacity: 0.8; }
 
 51% { transform: translate(-20px, -20px) rotate(3deg); opacity: 0.4; }
 52% { transform: translate(20px, 20px) rotate(-3deg); opacity: 0.6; }
 53% { transform: translate(18px, 8px) skew(4deg); opacity: 0.4; }
 54% { transform: translate(-18px, -8px) skew(-4deg); opacity: 0.3; }
 55% { transform: translate(0, 12px); opacity: 0.7; }

 85% { transform: translate(-15px, -18px) scaleX(1.3); opacity: 0.6; }
 86% { transform: translate(10px, -10px) scaleX(0.7); opacity: 0.3; }
 87% { transform: translate(18px, 18px) rotate(2deg); opacity: 0.5; }
 88% { transform: translate(-8px, 0); opacity: 0.8; }
}

@keyframes intermittent-glitch-3 {
 0%, 29%, 36%, 69%, 76%, 100% { 
 transform: scale(1) translate(0,0) skewY(0deg); 
 opacity: 1; 
 }
 31% { transform: scale(0.5) translate(25px, -15px) skewY(8deg); opacity: 0.5; }
 32% { transform: scale(1.6) translate(-25px, 15px) skewY(-8deg); opacity: 0.4; }
 33% { transform: scale(0.7) translate(20px, 20px); opacity: 0.6; }
 34% { transform: scale(1.4) translate(-20px, -20px); opacity: 0.3; }
 35% { transform: scale(0.85) translate(8px, 0); opacity: 0.8; }
 
 71% { transform: scale(1.7) translate(-30px, -30px) rotate(4deg); opacity: 0.3; }
 72% { transform: scale(0.3) translate(30px, 30px) rotate(-4deg); opacity: 0.5; }
 73% { transform: scale(1.5) translate(-20px, 20px) skew(6deg); opacity: 0.4; }
 74% { transform: scale(0.4) translate(20px, -20px) skew(-6deg); opacity: 0.3; }
 75% { transform: scale(1.3) translate(0,0); opacity: 0.9; }
}

@keyframes flicker {
 0% { opacity: 0.95; }
 5% { opacity: 0.4; }
 10% { opacity: 0.9; }
 15% { opacity: 1; }
 50% { opacity: 0.9; }
 55% { opacity: 0.3; }
 60% { opacity: 0.95; }
 100% { opacity: 1; }
}

@keyframes scanline-roll {
 from { transform: translateY(0); }
 to { transform: translateY(-50%); } 
}

#header-banner {
	max-width: 88%;
 animation: intermittent-glitch 4s infinite;
 line-height: 0;
	 position: relative;
 display: inline-block;
 overflow: hidden;
 border-radius: 25px;
}

#header-banner img {
		min-width: 100%;
 height: auto;
 display: block;
	 object-fit: cover;
}

#stats {
	max-width: 100%;
	width: 100%;
	overflow: hidden;
	display: block;
}

#stats img {
	display: block;
	width: 100%;
	max-width: 85%;
	height: auto;
	object-fit: cover;
	overflow: hidden;
}

#header-banner:hover {
	animation: intermittent-glitch-3 0.75s steps(1) infinite;
}

#header-banner:hover img {
 animation: intermittent-glitch-2 0.75s steps(1) infinite;

 filter: drop-shadow(-10px 5px 0px rgba(255,0,0,0.4)) 
 drop-shadow(10px 0px 5px rgba(0,255,255,0.4));
}

#header-banner::after {
	min-width: 100%;
 content: "";
 position: absolute;
 top: 0; 
 left: 0;
 height: 7000% !important;
 background: repeating-linear-gradient(
 0deg,
 rgba(0, 0, 0, 0.3) 0px,
 rgba(0, 0, 0, 0.3) 1px,
 transparent 2px
 );
 pointer-events: none;
 opacity: 0.5; 
	
	animation: scanline-roll 60s linear infinite;
 transition: opacity 0.3s ease; 
 border-radius: 20px;
}

#header-banner:hover::after {
 opacity: 1;
 animation: scanline-roll 10s linear infinite, flicker 0.05s infinite;
}

*, ::before, ::after {
 max-width: 100%;
 box-sizing: border-box;
 overflow-wrap: break-word;
 word-break: break-word;
 height: auto;
}

:where(pre, code, canvas, iframe, video) {
 overflow: auto;
}

ul, ol {
 max-width: 100%;
 margin-left: 0;
 box-sizing: border-box;
 overflow-x: hidden; 
}

li {
 max-width: 100%;
 overflow-wrap: anywhere; 
 word-break: normal; 
 white-space: normal; 
 box-sizing: border-box;
}

ul ul, ol ol, ul ol, ol ul {
 margin-left: 0.5rem; 
 padding-left: 1rem;
}

li {
 list-style-position: inside;
}

.yoast-breadcrumbs {
 display: flex;
 justify-content: center;
		text-align: center;
 width: 100%;
}

#contents-container::before {
 content: "";
 display: block;
 position: absolute;
 left: 0px !important;
 top: -1px !important;
 width: 100% !important;
 height: 250px !important;
 z-index: 0;
 background-repeat: no-repeat;
 background-size: 100% 100%;
 background-image: url("data:image/svg+xml,svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 937.5 120' preserveAspectRatio='none'path fill='403838' d='M937.5,120V0H0v120C0,62.6,209.6,8.2,468.75,8.2S937.5,62.6,937.5,120z'//svg");
 pointer-events: none;
}

:has(#header-container-subsite) #contents-container::before {
 background-image: url("data:image/svg+xml,svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 937.5 120' preserveAspectRatio='none'path fill='3e3333' d='M937.5,120V0H0v120C0,62.6,209.6,8.2,468.75,8.2S937.5,62.6,937.5,120z'//svg");
}

:has(#header-container-subsite-project) :has(#header-container-subsite) #contents-container::before {
 background-image: url("data:image/svg+xml,svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 937.5 120' preserveAspectRatio='none'path fill='3a3030' d='M937.5,120V0H0v120C0,62.6,209.6,8.2,468.75,8.2S937.5,62.6,937.5,120z'//svg");
}

#contents-container::after {
 content: "";
 display: block;
 position: absolute;
 left: 0px !important;
 bottom: -1px !important;
 width: 100% !important;
 height: 250px !important;
 z-index: 0;
 background-repeat: no-repeat;
 background-size: 100% 100%;
	background-image: url("data:image/svg+xml,svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 937.5 120' preserveAspectRatio='none'g transform='scale(1-1) translate(0-120)'path fill='403838' d='M937.5120V0H0v120C062.6209.68.2468.758.2S937.562.6937.5120z'gsvg");
 pointer-events: none;
}

:has(#footer-container-subsite) #contents-container::after {
	background-image: url("data:image/svg+xml,svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 937.5 120' preserveAspectRatio='none'g transform='scale(1-1) translate(0-120)'path fill='3e3333' d='M937.5120V0H0v120C062.6209.68.2468.758.2S937.562.6937.5120z'gsvg");
}

:has(#footer-container-subsite-project) :has(#footer-container-subsite) #contents-container::after {
	background-image: url("data:image/svg+xml,svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 937.5 120' preserveAspectRatio='none'g transform='scale(1-1) translate(0-120)'path fill='3a3030' d='M937.5120V0H0v120C062.6209.68.2468.758.2S937.562.6937.5120z'gsvg");
}

#header-container::before {
 content: "";
 display: block;
 position: absolute;
 left: 0px !important;
 top: -1px !important;
 width: 100% !important;
 height: 250px !important;
 z-index: 0;
 background-repeat: no-repeat;
 background-size: 100% 100%;
 background-image: url("data:image/svg+xml,svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 937.5 120' preserveAspectRatio='none'path fill='353030' d='M937.5,120V0H0v120C0,62.6,209.6,8.2,468.75,8.2S937.5,62.6,937.5,120z'//svg");
 pointer-events: none;
}

#header-container-subsite::before {
 content: "";
 display: block;
 position: absolute;
 left: 0px !important;
 top: -1px !important;
 width: 100% !important;
 height: 250px !important;
 z-index: 0;
 background-repeat: no-repeat;
 background-size: 100% 100%;
 background-image: url("data:image/svg+xml,svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 937.5 120' preserveAspectRatio='none'path fill='403838' d='M937.5,120V0H0v120C0,62.6,209.6,8.2,468.75,8.2S937.5,62.6,937.5,120z'//svg");
 pointer-events: none;
}

#header-container-subsite-project::before {
 content: "";
 display: block;
 position: absolute;
 left: 0px !important;
 top: -1px !important;
 width: 100% !important;
 height: 250px !important;
 z-index: 0;
 background-repeat: no-repeat;
 background-size: 100% 100%;
 background-image: url("data:image/svg+xml,svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 937.5 120' preserveAspectRatio='none'path fill='3e3333' d='M937.5,120V0H0v120C0,62.6,209.6,8.2,468.75,8.2S937.5,62.6,937.5,120z'//svg");
 pointer-events: none;
}

#footer-container-subsite-project::before {
 content: "";
 display: block;
 position: absolute;
 left: 0px !important;
 bottom: -1px !important;
 width: 100% !important;
 height: 250px !important;
 z-index: 0;
 background-repeat: no-repeat;
 background-size: 100% 100%;
	background-image: url("data:image/svg+xml,svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 937.5 120' preserveAspectRatio='none'g transform='scale(1-1) translate(0-120)'path fill='3e3333' d='M937.5120V0H0v120C062.6209.68.2468.758.2S937.562.6937.5120z'gsvg");
 pointer-events: none;
}

#footer-container-subsite::before {
 content: "";
 display: block;
 position: absolute;
 left: 0px !important;
 bottom: -1px !important;
 width: 100% !important;
 height: 250px !important;
 z-index: 0;
 background-repeat: no-repeat;
 background-size: 100% 100%;
	background-image: url("data:image/svg+xml,svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 937.5 120' preserveAspectRatio='none'g transform='scale(1-1) translate(0-120)'path fill='403838' d='M937.5120V0H0v120C062.6209.68.2468.758.2S937.562.6937.5120z'gsvg");
 pointer-events: none;
}

#footer-container::after {
 content: "";
 display: block;
 position: absolute;
 left: 0px !important;
 bottom: -1px !important;
 width: 100% !important;
 height: 250px !important;
 z-index: 0;
 background-repeat: no-repeat;
 background-size: 100% 100%;
		background-image: url("data:image/svg+xml,svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 937.5 120' preserveAspectRatio='none'g transform='scale(1-1) translate(0-120)'path fill='353030' d='M937.5120V0H0v120C062.6209.68.2468.758.2S937.562.6937.5120z'gsvg");
 pointer-events: none;
}

#header-container,
#header-container-subsite,
#header-container-subsite-project,
#contents-container,
#footer-container,
#footer-container-subsite,
#footer-container-subsite-project {
 position: relative !important;
 overflow: visible !important;
}

#CC-Bar-SUB,
#CC-Bar {
 align-items: center;
}

#CC-Bar-SUB .wp-block-uagb-advanced-heading,
#CC-Bar .wp-block-uagb-advanced-heading {
 align-self: center;
}

#CC-Bar-SUB .wp-block-uagb-image,
#CC-Bar .wp-block-uagb-image {
 align-self: center;
}

#CC-Bar-SUB .wp-block-uagb-image__figure,
#CC-Bar .wp-block-uagb-image__figure {
 align-items: center;
}

.pp-multiple-authors-boxes-wrapper .widget-title.box-header-title {
	visibility: hidden;
	display: none;
}

.pp-multiple-authors-boxes-wrapper
.ppma-author-category-wrap .pp-multiple-authors-boxes-ul.author-ul-0 {
 display: flex;
 justify-content: center;
}

.pp-multiple-authors-boxes-wrapper 
.ppma-author-category-wrap .pp-multiple-authors-boxes-ul.author-ul-0 .pp-multiple-authors-boxes-li {
 border: 5px solid #9b9b9b !important;
 border-radius: 25px;
 max-width: 88%;
 width: 88%;
}

.pp-multiple-authors-boxes-wrapper
.ppma-author-category-wrap .pp-multiple-authors-boxes-ul.author-ul-0 .pp-multiple-authors-boxes-li .pp-author-boxes-description.multiple-authors-description.author-description-0 p {
 color: #ffffff !important;
}

:root {
 --author-box-bg: #403838;
}

:has(#footer-container-subsite) {
 --author-box-bg: #3e3333;
}

:has(#footer-container-subsite-project) :has(#footer-container-subsite) {
 --author-box-bg: #3a3030;
}

.ppma_boxes_3353,
.ppma_boxes_3353 .ppma-author-category-wrap,
.ppma_boxes_3353 .ppma-category-group {
 width: calc(100% - 0.2rem) !important; 
 max-width: calc(100% - 0.2rem) !important;
		margin-left: auto !important;
 margin-right: auto !important;
 box-sizing: border-box !important;
}

.ppma_boxes_3353 .ppma-category-group .pp-multiple-authors-boxes-ul {
 background-color: var(--author-box-bg) !important;
 margin-bottom: 0px;
 text-align: left;
}

.ppma_boxes_3353 .ppma-category-group::before {
 content: "Content Authors: ";
 display: block;
}

.ppma_boxes_3353 .ppma-category-group {
 background-color: var(--author-box-bg) !important;
 display: block;
 text-align: center;
 margin-bottom: 0px;
}
Author

Chaosyr

This is the author page for the author Chaosyr, founder of Stoat Games, A2;RE, and Cecil Libraries Organization, as well as Fanscryption Community Manager and more.
Welcome to Stoat Games

Subsidiaries

Cecil Libraries Organization

Act 2; The Reimagining

Stoat Games

Stoat Games Website CSS File

About this Page

Author

Quick Navigations

Policies and Attributions

Crawler Tools

Contact Methods

© Copyright Stoat Games 2026

`Login to the Stoat Games Dashboard!`
