/* color palet */
:root {
	--primary: palegoldenrod;
	--secondary: gold;
	--white: #DBDEE0;

	/* 50 shades bro */
	--gray: 0;
	--color-hover: #555;
	--color-selected: #232323;
	--color-background-dark: #1e1e1e;
	--color-background-light-2: #2e2e2e;
	--color-background-light: #252525;
	
	/* fancy animation */
	--fireColor1: #ff5000;
	--fireColor2: rgba(255, 80, 0, 0);
	--fireDuration: 1s;
	--blur: 0.4px;
	--fireSize: 90px;
	--smogColor1: rgb(49, 48, 48);
	--smogColor2: rgba(255, 80, 0, 0);
	--smogDuration: 2s;
	--smogSize: 120px;
}

/* TODO: fix this stupid CDN bug */
html {
	height: 100%;
	width: 100%;
	margin: 0;
	font-family: Consolas;
}

/* =========================== */
/*         FONT STACK          */
/* =========================== */

/* latin */
@font-face {
	font-family: 'Orbitron';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/orbitron/v31/yMJMMIlzdpvBhQQL_SC3X9yhF25-T1nyGy6BoWgz.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
	font-family: 'VT323';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/vt323/v17/pxiKyp0ihIEF2isQFJXGdg.woff2) format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
	font-family: 'VT323';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/vt323/v17/pxiKyp0ihIEF2isRFJXGdg.woff2) format('woff2');
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'VT323';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/vt323/v17/pxiKyp0ihIEF2isfFJU.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* C64 TrueType */
@font-face {
	font-family: 'C64ProMono';
	font-style: normal;
	font-weight: 400;
	src: url(/fonts/C64_Pro_Mono-STYLE.ttf)
}
/* C64 TrueType */
@font-face {
	font-family: 'C64Pro';
	font-style: normal;
	font-weight: 400;
	src: url(/fonts/C64_Pro-STYLE.ttf)
}
/* comic-sans */
@font-face {
	font-family: "comic-sans";
	font-style: normal;
	font-weight: 700;
	src: url(/fonts/Ldfcomicsansbold-zgma.ttf)
}
/* gotham */
@font-face {
	font-family: "gotham";
	font-style: normal;
	font-weight: 400;
	src: url(/fonts/GothamMedium.ttf);
}

.home-info h1,
.home-info h2,
.big-pink-btn,
.big-pink-btn-light {
	font-family: 'Orbitron', sans-serif;
}

.box-md p {
	/* font-family: gotham; */
	line-height: 1.3rem;
	letter-spacing: .03rem;
	margin-bottom: 28px;
}
.box-md h2,
.box-md h3,
.box-md h4,
.box-md h5,
.box-md h6 {
	margin-bottom: 28px;
}

body {
	margin: 0;
	padding: 0;
	color: var(--white);
	height: 100%;
	width: 100%;
}

img {
	max-width: 100%;
}

div {
	display: block;
	margin: auto;
}

a {
	color: var(--secondary); /* rgb(46, 162, 235); */
	text-decoration: underline;
}

h1 {
	font-size: 28px;
}

/* main div components */
.main-container {
	width: 100vw;
	height: 100vh;
	background-color: var(--color-background-light);
	/* font-family: consolas; */
}

.notepad-header {
	min-height: 30px;
	height: 5%;
	width: 100%;
	margin: auto;
	position: relative;
	background-color: rgb(243, 139, 118);
}

.notepad-body {
	display: flex;
	width: 100%;
	height: 100%;
	margin: auto;
	position: relative;
	flex-wrap: nowrap;
	flex-direction: row;
}

.notepad-footer {
	width: 100%;
	height: 20%;
	margin: auto;
	position: relative;
	background-color: #3E3E42;
}

.notepad-console {
	width: 100%;
	height: 100%;
	margin: auto;
	background-color: var(--color-background-light);
}

.notepad-lines {
	/* height: 100%; */
	display: inline-block;
	/* min-width: 31px; */
	background-color: var(--color-background-dark);
	color: #80c0ff;
	/* margin-right: 12px;
	border-right: 1px solid; */
	cursor: default; /* pointer for when Line numbers work?; */
	margin-top: 0;
}

.lasm-line {
	width: 100%;
	height: 18;
	margin: 0;
	padding: 2px 0 2px 0;
}

.lasm-opcode {
	color: #a0a0e0;
}

.lasm-operands {
	color: #a0a0e0;
}

.lasm-note {
	/* color: #a0a0e0; */
	color: #8686b5;
}

.lasm-func {
	text-decoration: underline !important;
	color: #80c0ff;
}

.lasm-script {
	font-size: 16px;
	line-height: 18px;
	margin: 0;
	height: 100%;
	width: 100%;
	flex-direction: column;
	/* overflow: hidden; */
	/* background-color: #bec100; */
}

.lang-lua {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	outline: none;
	/*overflow-x: auto;*/
	/*line-height: 24px;*/
	/*transition-duration: 0.5s;*/
	/*white-space: pre-wrap;  test!! */
	cursor: text;
}

/* ==== Toolbox Buttons ====*/
.toolbox-button {
	display: block;
	border-radius: 4px;
	color: #181818;
	transition-duration: 0.2s;
	cursor: pointer;
	padding: 0 4px;
	font-weight: bold;
	margin: 4px;
}
.toolbox-button-2 {
	display: block;
	/* border-radius: 4px; */
	color: #181818;
	transition-duration: .2s;
	cursor: pointer;
	padding: 0 4px;
	font-weight: 700;
	margin: 4px;
	border: 1px solid var(--color-background-light-2);
	background-color: var(--color-background-light) !important;
	color: gold;
}

.toolbox-button:hover {
	transition-duration: 0.2s;
	background-color: #ffffff10;
	filter: invert(1)
}
.toolbox-button-2:hover {
	transition-duration: 0.2s;
	background-color: #ffffff10;
	filter: invert(1)
}

.notepad-script {
	height: 100%;
	display: flex;
	width: 100%;
	min-width: 21px;
	background-color: var(--color-background-dark);
	color: var(--white);
	overflow: auto;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: stretch;
	box-shadow: inset -2px -2px 6px 0px black;
	/* Carbon CSS background */
	/*background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px, linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px, linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px, linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px, linear-gradient(90deg, #1b1b1b 10px, transparent 10px), linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
	background-color: #131313;
	background-size: 20px 20px;*/
	background-image: url('/img/noise.png');
}

.notepad-lasm {
	height: 100%;
	width: 45%;
	display: inline-block;
	min-width: 21px;
	background-color: var(--color-background-light);
	overflow: auto;
}
/* Small elements */
.notepad-lines > ul {
	text-align: right;
	font-size: 16px;
	line-height: 18px;
	list-style: none;
	padding: 0 5px 0 7px;
	margin: 0;
	color: dimgray;
	border: 1px solid black;
	border-radius: 1px 0 0 0 0;
	border-width: 0 1px 0 0;
	margin-right: 8px;
	height: 100%;
}

.console-output {
	height: 100%;
	width: 100%;
	background-color: aliceblue;
	position: relative;
}

.console-input {
	width: 100%;
	display: block;
	outline: none;
	border: none;
	padding: 0;
	height: 22px;
	bottom: 0;
	margin: auto;
	background-color: #3E3E42;
	color: var(--white);
	position: relative;
}

.console-footer {
	width: 100%;
	display: block;
	outline: none;
	border: none;
	padding: 0;
	height: 20px;
	bottom: 0;
	margin: auto;
	background-color: #3E3E42;
	color: var(--white);
	position: relative;
}

.tooltip-date {
    cursor: pointer;
}
.tooltip-date-text {
	visibility: hidden;
	transition: opacity 0.3s;
	position: relative;
	margin-left: 16px;
}
.tooltip-date-text::after {
	content: "";
	position: absolute;
	left: 0%;
	margin-left: -20px;
	border-width: 10px;
	border-style: solid;
	border-color: var(--color-background-dark) transparent transparent transparent;
	transform: rotate(90deg);
}
.tooltip-date:hover + .tooltip-date-text {
	visibility: visible;
	opacity: 1;
}

#code-tooltip {
	position: fixed;
	background-color: blueviolet; /* #111111; */
	border-radius: 4px;
	width: 120px;
	height: 30px;
	z-index: 1;
	text-align: center;
	transition-duration: 0.2s;
	opacity: 20%;
}

#code-tooltip:hover {
	transition-duration: 0.2s;
	opacity: 100%;
}

#code-tooltip::after {
	content: " ";
	position: absolute;
	bottom: -3px;
	transform: rotate(45deg);
	left: 50%;
	margin-left: -3px;
	border: solid blueviolet 3px;
}
/* inspector */
.inspector {
	padding: 0;
	margin: 0;
	list-style: none;
	padding-left: 2px;
}

	.inspector > li > span > ul {
		padding-left: 9px;
		list-style: none;
	}

	.inspector > li {
		border-top: 1px black solid;
	}

	.inspector > .ins-item:hover {
		background-color: #ffffff10;
	}
/*
        .inspector > .ins-list:hover{
            background-color: #303840;
        }*/
.inspector-main {
	border-bottom: 1px solid black;
}

.ins-list > a, .ins-item > span > a {
	color: #ff9e59;
	text-decoration: none;
	display: block;
	position: relative;
	/* width: 100%; */
}

	.ins-list > a:hover {
		color: #cc7832;
		background-color: #ffffff10;
	}

.ins-item > span {
	width: 50%;
	text-align: left;
	padding-right: 10px;
	float: right;
}

.hide {
	display: none;
}

li.block-if {
	background-color: #FFCC002F;
}

li.block-else {
	background-color: #0094FF2F;
}

li.block-endif {
	background-color: #8002842F;
}

li.block-end {
	background-color: #8416052F;
}
/* highlight text */
li.block-if:hover ~ .sblock-if {
	background-color: #bec1001f;
	outline: 1px solid #9e9e9e;
}

.sblock-if:hover {
	background-color: #bec1001f;
	outline: 1px solid #9e9e9e;
}

.sblock-else:hover {
	background-color: #0094FF1f;
	outline: 1px solid #9e9e9e;
}

.sblock-endif:hover {
	background-color: #8002841F;
	outline: 1px solid #9e9e9e;
}

.sblock-end:hover {
	background-color: #8416051F;
	outline: 1px solid #9e9e9e;
}

.glow {
	background-color: #ffffff10;
	outline: 1px solid #9e9e9e;
}

.sline-default {
	white-space: pre-wrap;
}

pre > span {
	white-space: pre-wrap;
}

.splashscreen {
	display: block;
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	background-color: rebeccapurple
}

.splash-menu {
	text-align: center;
	height: 320px
}

.splash-dragdrop {
	width: 320px;
	height: 200px;
	border: 1px #ffffff3f dashed;
	border-radius: 17px;
	margin-top: 310px;
}

.code_box {
	background: #272822;
	overflow-x: scroll;
	overflow-y: hidden;
	color: #f8f8f2;
	padding: 6px;
}

[class^="c_ref-"]:hover {
	background-color: #ae81ff30!important;
}

[class^="c_ref-"] {
	/*color: #0ced9a!important;
	filter: saturate(1);*/
}


.c_green {
	color: #008000;
}

.c_pink {
	color: #f92672;
}

.c_yellow {
	color: #e6db74;
}

.c_blue {
	color: #66d9ef;
}

.c_white {
	color: #f8f8f2;
}

.c_purple {
	color: #ae81ff;
}

.c_brown {
	color: #a31515;
}

.test_container {
	background-color: transparent;
	background-image: linear-gradient(0, var(--color-background-dark) 33%, transparent 0%, transparent 66%, var(--color-background-dark) 50%, var(--color-background-dark)), linear-gradient(0, var(--color-background-dark) 0%, transparent 33%, transparent 100%, var(--color-background-dark) 100%, var(--color-background-dark));
	background-size: 1px 800px;
	background-position: 0 0,0 0;
}

.test-inlined-ad {
	display: inlined-block;
	width: 468px;
	float: left;
	background-color: aliceblue;
}

/* Slider */
::-webkit-scrollbar {
	width: 12px;
	cursor: pointer;
}

/* Track */
::-webkit-scrollbar-track {
	background: #171717; /*var(--color-background-dark);*/
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: #282828; /* var(--color-background-light-2);*/
	border: 2px #171717 solid;
	border-radius: 6px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: var(--color-hover);
}

/* decoration */

.top-tab {
	/* TODO: add mouse hover effect, + radiant?*/
	display: inline-block;
	height: 100%;
	line-height: 32px;
	padding-right: 8px;
	padding-left: 10px;
	border-right: 1px solid #101010;
	background-color: var(--color-background-light-2);
	color: var(--primary);
	overflow: hidden;
}

.top-tab > a {
	width: 100%;
	display: block;
	cursor: pointer!important;
}
.top-crumb {
	display: inline-block;
	height: 100%;
	line-height: 38px;
	margin-left: 5px;
	padding-right: 8px;
	padding-left: 10px;
	border: 1px solid #101010;
	background-color: var(--color-background-light-2);
	color: var(--primary);
	border-radius: 10px 5px 10px 5px;
}
.top-crumb:hover {
	background: var(--color-hover);
}
.top-crumb li {
	cursor: default;
}
.top-crumb a {
	width: 100%;
	height: 100%;
	display: inline-block;
}
.top-tab-close {
	float: right;
	color: indianred;
	cursor: pointer;
}

.toolbox-collapsible {
	background-color: var(--color-background-light-2);
	color: var(--primary);
	cursor: pointer;
	padding-top: 8px;
	padding-bottom: 5px;
	width: 100%;
	border: none;
	text-align: center;
	outline: none;
	font-size: 18px;
	margin: 0;
}

.toolbox-collapsible:hover {
	background-color: var(--color-hover);
}

.toolbox-collapsible::after {
	content: '\002B';
	color: var(--primary);
	float: right;
	margin-left: 2px;
	margin-right: 7px;
}

.toolbox-hit {
	background-color: var(--color-selected);
}
.toolbox-hit:after {
	content: "\2212";
}
.toolbox-header {
}

/* Forum-like design css */
.content-box-middle {
	padding-right: 5px;
	flex-grow: 1 !important;
	border-right: 2px dashed var(--color-background-dark);
	margin: 0;
	max-height: 250px;
	overflow: hidden;
}

.content-box-middle-big {
	color: var(--white);
	min-height: 400px;
	width: 100%;
	padding: 5px;
	box-sizing: border-box;
}

.content-box, .content-box-mini {
	width: auto;
	height: auto;
	min-height: 200px;
	margin-bottom: 10px;
	background-color: #181818 /*indianred*/;
	border-radius: 3px;
	display: flex;
	position: relative;
	padding: 5px;
	font-size: 14px;
}

.content-box-header h3 {
	font-size: 24px;
	font-weight: 200;
	margin: 0;
	height: auto;
	line-height: 32px;
	margin: 4px 18px !important;
	color: var(--primary);
	display: inline-block;
	position: relative;
	display: block;
}
.content-box-header {
	width: auto;
	background-color: #181818;
	border-radius: 3px;
	padding: 5px;
	font-size: 14px;
	margin-top: 24px;
	margin-bottom: 0px;
	font-family: gotham !important;
	border-bottom: 2px solid #1e1e1e;
	height: auto !important;
	min-height: 0px;
	display: block;
	box-sizing: content-box;
	position: relative;
}

.content-box-page {
	border: 1px solid black;
}
.content-box pre {
	overflow: scroll;
}

.notepad-test-2 {
	display: flex;
	height: 100%;
	width: 100%;
	min-width: 0;
	flex-wrap: nowrap;
	flex-direction: column;
}

/*
.box-skid p {
	font-family: "comic-sans", cursive;
	font-weight: 700;
	background-size: 40px;
	letter-spacing: .15rem;
	line-height: 1.3rem;
}
*/
.box-skid .post-title {
	color: var(--secondary) !important;
	background: linear-gradient(90deg, rgb(255, 0, 0), /* Red */ rgb(255, 165, 0), /* Orange */ rgb(255, 255, 0), /* Yellow */ rgb(0, 128, 0), /* Green */ rgb(0, 0, 255), /* Blue */ rgb(75, 0, 130), /* Indigo */ rgb(238, 130, 238) /* Violet */ );
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
	background-size: 175px;
}

.content-box-interactable {
	transition-duration: 0.3s;
}

.content-box-interactable:hover {
	box-shadow: #eee8aa30 0 0 10px 0px;
}

.content-box-interactable2:hover .content-box-interactable2 h2{
	color: yellowgreen;
}

.content-box-md {
	padding: 15px 0 15px 0;
	width: 100%;
	overflow: hidden;
}
.content-box-md a {
	color: var(--primary)!important;
}
.content-box-md pre {
	max-height: 360px;
	background: var(--color-background-dark);
	margin-bottom: 0;
	border: 2px solid var(--primary);
	padding: 8px;
	overflow: auto !important;
}

.content-box-md p {
	margin-top: 6px;
	margin-bottom: 6px;
}

.content-box-admin h2 {
	color: indianred!important;
}

.content-box-left, .content-box-left-2 {
	display: block;
	margin-right: 10px;
	margin-top: 10px;
}

.content-box-right {
	min-width: 90px;
	display: flex;
	flex-direction: column;
	align-self: center;
	padding: 5px 0 5px 20px;
	z-index: 1;
}

.content-box-2 {
	width: 100%;
}

/* pagination nav */
.pagenav-bar {
	width: 100%;
}
.pagenav {
	display: inline-block;
}
.pagenav ul {
	display: inline-table;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pagenav li {
	padding-right: 4px;
	width: 0;
	display: table-cell;
}
.pagenav a {
	color: var(--secondary);
	text-decoration: none;
	font-size: 13px;
	background: gray;
	display: inline-block;
	border-radius: 9px;
	padding: 7px 13px;
	background: var(--color-background-light-2);
}
.pagenav a:hover {
	background: var(--color-background-light-2);
	background: var(--color-hover);
}

/* progress bar homepage */
#fake-progress-bar {
	display: none;
	width: 80%;
	z-index: 2;
	position: relative;
	height: -120px;
	top: 105px;
	height: 0;
}
.progress-bar-back {
	display: flex;
	position: relative;
	background-color: var(--color-hover);
	width: 70%;
	height: 12px;
	margin: auto;
	width: 100%;
	position: relative;
	border-radius: 4px;
	box-shadow: 3px 3px 3px 0px black;
	float: left
}
.progress-bar-back-inner {
	width: 50%;
	animation-name: fake-loading;
	animation-iteration-count: infinite;
	animation-duration: 27s;
	border-radius: 4px;
	flex-direction: column;
	background-color: var(--secondary);
	position: absolute;
	height: 100%;
}
.b-inline {
	display:inline-block;
}

.box-avatar {
	width: 50px;
	height: 50px;
	margin-top: 10px;
	position: relative;
	display: inline-block;
	background-color: var(--color-background-dark);
	border: 1px solid black;
}

.box-avatar-name {
	height: 100%;
	display: block;
	width: 100%;
	font-size: 32px;
	line-height: 50px;
	font-weight: bold;
	color: var(--white);
	font-family: arial;
	text-align: center;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

@keyframes redglow {
	0% {
		color: #ffe800;
	}
	33% {
		color: #aa0000;
	}
	66% {
		color: #009dff;
	}
	100% {
		color: #ffe800;
	}
}

.note-homepage {
	animation: redglow;
	animation-duration: 1.4s;
	animation-direction: normal;
	animation-iteration-count: infinite;
	margin-top: 12px;
	color: black;
	font-weight: 700;
	text-shadow: 1px 1px 0px #000000, -1px -1px 0 #000000, 1px -1px 0px #000000, -1px 1px 0px #000000;
}

.box-text {
	/*
	color: ghostwhite;
	text-decoration: none;
	
		is bad?
	*/
	
}
[id^=reply-] {
	width: 100%;
}

[id^=reply-] > p {
	/* force user to break all */
	word-break: break-all;
}

.topic-box {
	min-height: 200px;
	margin: 0;
	padding: 12px;
	display: flex;
	flex-direction: column;
}

.post-title {
	overflow: hidden;
	margin: 15px 0 12px 0;
	color: var(--primary);
	font-weight: 400;
	line-height: 1.2;
	font-family: C64Pro;
	font-size: 24px;
}

a .post-title {
	color: var(--secondary) !important;
}

.post-title-interactable {
	
}

.post-title-interactable:hover {
	text-decoration: underline;
}

.label {
	display: inline;
	padding: 0.2em 0.6em 0.3em;
	color: dimgray;
	font-weight: bold;
	background-color: var(--color-background-dark);
	border-radius: 0.25em;
	text-align: center;
	text-decoration: none;
	margin-right: 12px;
}

a > .label {
	text-decoration: none;
	word-break: keep-all;
	padding: 0;
}

.title-small {
	font-size: 18px;
	color: var(--primary);
	margin-top: 8px;
	margin-bottom: 8px;
	font-weight: 200;
	font-family: 'VT323';
}

.title-small-2 {
	font-family: 'gotham'!important;
	line-height: 18px!important;
	font-size: 14px!important;
}

.title-medium {
	color: lightgreen;
	overflow: hidden;
	font-size: 18px;
	margin: 15px 0 12px 0;
}

.small-box, .small-box-2 {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	width: 100%;
	flex-wrap: nowrap;
}

.reply-note {
	margin-left: 6px;
	line-height: 24px;
}
.author {
	line-height: 24px;
}

.reply-box {
	/* background-color: var(--color-background-light); */
	margin-top: 5px;
	border-top: 1px solid black;
}

.reply-contnet-box {
	width: auto;
	margin-left: 80px;
	min-height: 80px;
	padding: 0 15px 0 5px;
	background-color: #181818;
	height: 200px;
	margin-bottom: 20px;
}
.reply-note {
	color: dimgray;
}

.micro-forum {
	padding-left: 30px;
	margin-top: 10px;
	padding-right: 20px;
	width: 100%;
	height: auto;
	/* force text to wrap around */
	word-break: break-word;
	max-width: 920px;
}


textarea {
	background-color: var(--color-background-light);
	color: var(--white);
}

.notepad-toolbox {
	display: block;
	height: 100%;
	min-width: 230px;
	background-color: #181818;
	overflow-y: hidden;
	/* quick fix ads */
	margin: 0;
	padding: 0;
	overflow: hidden;
	/* fixed padding */
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}
.notepad-toolbox-spacer {
	display: none;
	height: auto;
	width: 100%;
	margin: 0;
}

body {
	overflow-x: hidden; /* quick fix ads */
}

.toolbox-stats {
	color: lightgreen!important;
	margin-top: 75px;

}
.notepad-test {
	display: flex;
	height: 100%;
	width: 100%;
	min-width: 0;
	flex-wrap: nowrap;
	flex-direction: column;
	/* adfix */
	margin: 0;
}

.notepad-top {
	display: flex;
	height: 32px;
	width: 100%;
	background-color: var(--color-background-dark)
}

#lua-sessions {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow-y: hidden;
	overflow-x: auto;
}

.big-pink-btn {
	color: var(--color-background-dark);
	width: auto;
	padding-left: 20px;
	padding-right: 20px;
	height: 40px;
	background-color: var(--primary);
	border: 3px solid var(--primary);
	position: relative;
	text-align: center;
	font-size: 24px;
	line-height: 40px;
	border-radius: 4px;
	margin-top: 10px;
	box-shadow: 2px 2px 2px 2px black;
	cursor: pointer;
	transition-duration: 0.1s;
	display: inline-block;
}

.big-pink-btn-light {
	color: white; /* contrast 2.64 ! */
	width: auto;
	padding-left: 20px;
	padding-right: 20px;
	height: 40px;
	border: 3px solid var(--primary);
	color: var(--white);
	position: relative;
	display: block;
	text-align: center;
	font-size: 24px;
	line-height: 40px;
	border-radius: 4px;
	margin-top: 10px;
	box-shadow: 2px 2px 2px 2px black;
	cursor: pointer;
	transition-duration: 0.1s;
	display: inline-block;
}

.pink-btn-light {
	height: 100%;
	height: 20px;
	background: transparent;
	border: 1px solid var(--primary);
	border-radius: 3px;
	color: var(--white);
	margin-top: 4px;
	margin-bottom: 4px;
}
.big-pink-btn:hover {
	background-color: var(--secondary);
	border-color: var(--secondary);
}

.pink-btn-light:hover,
.big-pink-btn-light:hover {
	border-color: var(--secondary);
}

.btn-disabled,
.btn-disabled:hover {
	background-color: var(--color-background-dark);
	border-color: indianred;
	color: indianred;
}

.content-landing {
	display: flex;
	flex-direction: column;
	/* width 100%; */
	height: 100%;
	left: 0;
	top: 0;
	z-index: 1;
}

#home-landingpage {
	/* transition-duration: 1s; */
	display: flex;
	height: auto;
	white-space: normal; /* !important to not stretch here!! */
}

/*
NOTE: inlined for LCP opt
#home-page-start {
	border-radius: 0% 0% 50% 50% / 10%;
	background-image: url(/img/banners/roblox_4_big.png);
	background-position: center;
	box-shadow: inset 0px -3px 6px 0px black;
}
*/

.home-page-content {
	padding-top: 8rem;
	padding-bottom: 8rem;
	position: relative;
	width: 100%;
	height: 100%;
}

.home-page-container {
	animation: slidein;
	animation-duration: 0.75s;
	animation-iteration-count: 1;
	max-width: 960px;
	width: 100%;
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
}

#toolbox-download-btn {
	position: absolute;
	right: 0;
	margin-right: 245px;
	z-index: 1;
	display: none;
}

.home-info {
	display: block;
	position: relative;
	width: 90%; /* add margin instead? */
	height: 400px;
}

.home-info h1 {
	color: var(--primary);
	font-size: 44px;
	line-height: 58px;
	font-weight: 400;
	margin-bottom: 0.5rem;
	margin-top: 0;
	line-height: 1.2;
	text-shadow: 2px 2px black;
	text-shadow: black 2px 2px, 0 0 8px black, 0 0 8px black, 0 0 8px black;
}

.home-info > p {
	margin-bottom: 2.5rem;
	font-size: 1.15rem;
	color: var(--white);
	line-height: 1.5;
}

#home-page-start p {
	font-family: "comic-sans", cursive;
	text-shadow: 0px 0 20px #000000, 0px 0 8px #000000, 0px 0 8px #000000, 0px 0 8px #000000;
	font-weight: 700;
	background-size: 40px;
	max-width: 90%;
	letter-spacing: .15rem;
	line-height: 2.1rem;
}

.button-box {
	display: flex;
	flex-direction: row;
	height: auto;
	width: 100%;
	margin: auto;
	position: relative;
	justify-content: center;
}

.button-box > div {
	display: block!important;
	margin: 0;
	margin-right: 10px; /* small gap */
}

.home-padding {
	height: 240px;
	background: linear-gradient(180deg,rgb(30 30 30 / 0%) 0%,rgba(0,0,0,1) 100%);
}

.home-footer {
	bottom: 0;
	height: 20px;
	width: 100%;
	position: relative;
	color: var(--primary);
	background: linear-gradient(180deg,rgb(30 30 30 / 0%) 0%,rgba(0,0,0,1) 100%);
	z-index: -1;
	justify-content: center;
	align-content: flex-end;
	flex-direction: row;
	flex-wrap: wrap;
	display: flex;
	z-index: 1;
}
.home-footer-dark {
	bottom: 0;
	height: 20px;
	width: 100%;
	position: relative;
	color: var(--primary);
	background-color: black;
	z-index: -1;
	justify-content: center;
	align-content: flex-end;
	flex-direction: row;
	flex-wrap: wrap;
	display: flex;
	z-index: 1;
}

.link-dark {
	display: block;
	position: absolute;
	width: 32px;
	height: 32px;
	right: 0;
	bottom: 0;
	color: gray;
	overflow: hidden;
	white-space: nowrap;
}

.link-dark:hover {
	width: 610px;
}

/* TODO: give random text? */
.home-ribbon {
	width: 15.38em;
	height: 1.54em;
	line-height: 1.54em;
	position: absolute;
	overflow: hidden;
	top: 3.5em;
	left: -3.25em;
	z-index: 42;
	background: var(--primary);
	font-size: 14px;
	text-decoration: none;
	text-align: center;
	transform: rotate(-45deg);
	color: var(--color-background-dark);
	box-shadow: 2px 2px 20px 2px black;
}
.home-ribbon-background {
	position: absolute;
	height: auto;
	background: black;
	top: 420px;
	margin: auto;
	text-align: right;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 2px;
	padding-bottom: 5px;
	transform: rotateZ(5deg);
	line-height: 32px;
	text-align: center;
	width: 350px;
	transform: translate(480px, 0px) rotateZ(4deg);
}
.home-ribbon-background1 {
	position: absolute;
	height: auto;
	background: black;
	top: 20px;
	left: -88px;
	margin: auto;
	text-align: right;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 2px;
	padding-bottom: 5px;
	transform: rotateZ(315deg);
	line-height: 24px;
	text-align: center;
	width: 300px;
}
.home-ribbon-background2 {
	position: absolute;
	background: black;
	margin: auto;
	text-align: right;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 2px;
	padding-bottom: 5px;
	line-height: 22px;
	text-align: center;
	width: 300px;
	transform: translate(420px, 60px);
	transform: translate(510px, 60px) rotateZ(352deg);
}
.collapsible-header {
	color: var(--primary);
	font-size: 24px;
	text-decoration: underline;
}

#notepad-toolbox1 {
	filter: saturate(0.1);
	display: none;
}
#lua-top-mobile {
	display: none;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow-y: hidden;
	overflow-x: auto;
}
.btn-desktop {
	display: flex;
	flex-direction: row-reverse;
}

/* add GlowEffect for UploadFile button? */
@keyframes slidein {
	0% {
		opacity: 0;
		margin-top: 40px;
	}
	70% {
		opacity: 1;
	}
	100% {
		margin-top: 0;
	}
}

/*
	#==========================#
	#       Chat ChatGPT       #
	#==========================#

*/

.chat-container {
	display: flex;
	height: 100%;
	width: 100%;
}

.sidebar {
	width: 250px;
	background-color: #333;
	color: #fff;
	padding: 20px;
}

	.sidebar h2 {
		margin-bottom: 20px;
	}

.channel-list {
	list-style: none;
}

	.channel-list li {
		margin-bottom: 10px;
		cursor: pointer;
		padding: 5px;
	}

		.channel-list li.active {
			background-color: var(--color-hover);
		}

.chat-content {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.messages {
	flex-grow: 1;
	padding: 20px;
	background-color: #f2f2f2;
	overflow-y: auto;
}

.message {
	display: flex;
	margin-bottom: 20px;
}

.user-avatar img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin-right: 10px;
}

.message-content {
	background-color: #fff;
	padding: 10px;
}

.message-content h3 {
	margin-bottom: 5px;
}

.input-box {
	display: flex;
	padding: 10px;
}

.input-box input {
	flex-grow: 1;
	padding: 5px;
	border: none;
	border-radius: 5px;
}

.input-box button {
	padding: 5px 10px;
	margin-left: 10px;
	background-color: #333;
	color: #fff;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

.scriptfile-input {
	display: inline-block;
	position: relative;
	width: 100%;
	height: 250px;
	border: 2px dashed var(--primary);
	border-radius: 5px;
	text-align: center;
	font-family: Arial, sans-serif;
	cursor: pointer;
	box-sizing: border-box;
}

.scriptfile-input__input {
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.scriptfile-input__label {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.scriptfile-input__icon {
	font-size: 36px;
	color: gray;
}

.scriptfile-input__text {
	display: block;
	margin-top: 10px;
	color: gray;
}

/* CodePen I took, tnx https://codepen.io/php-hacker/pen/mdBXaxJ */
@keyframes fly-away {
	0% {
		opacity: 1;
		filter: blur(1px);
	}

	100% {
		transform: scale(0.3);
		opacity: 0;
		filter: blur(20px);
		border-radius: 50%;
	}
}
@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(0) scale(1);
	}

	25% {
		opacity: 1;
	}

	to {
		opacity: 0;
		transform: translateY(-10em) scale(0);
	}
}

#fire-container {
	font-size: 24px;
	filter: blur(var(--blur));
	-webkit-filter: blur(var(--blur));
	position: relative;
	width: 10em;
	height: 12em;

	display: inline-block;
	position: absolute;
	top: -180px;
	left: -40px;
}

#fire-container .particle {
	animation: rise var(--fireDuration) ease-in infinite;
	background-image: radial-gradient( var(--fireColor1) 30%, var(--fireColor2) 70% );
	border-radius: 50%;
	mix-blend-mode: screen;
	opacity: 0;
	position: absolute;
	bottom: 0;
	width: var(--fireSize);
	height: var(--fireSize);
}

.big-text-desktop {
	font-size: 38px;
}

@keyframes fake-loading {
	from {
		transition-delay: 0.2s;
		width: 10%;
	}

	20% {
		width: 60%;
	}

	26% {
		width: 80%;
	}

	30% {
		width: 90%;
	}

	60% {
		width: 90%;
	}

	61% {
		width: 60%;
	}

	64% {
		width: 60%;
	}
	71% {
		width: 63%;
	}

	88% {
		width: 92%;
	}

	98% {
		width: 100%;
	}

	99% {
		transition-delay: 0;
	}
	100% {
		width: 0;
	}
}

@media only screen and (max-width: 1100px) {
	.stats-flex {
		display: none;
	}
}

@media only screen and (max-width: 900px) {
	.big-text-desktop {
		font-size: 1.5em;
	}

	.img-desktop {
		display: none;
	}

	#waifu-box .content-box-right {
		display: none;
	}

}

@media only screen and (max-width: 600px) {
	.content-box-page {
		border: 0;
	}
	.tooltip-date-text {
		display: none;
	}
	.reply-box .content-box-left {
		display: none;
	}

	.home-ribbon {
		display: none;
	}
	.home-ribbon-background, .home-ribbon-background1, .home-ribbon-background2 {
		display: none;
	}
	#home-page-start p {
		text-shadow: none;
	}
	#home-page-start {
		background-image: none!important;
		background: var(--color-background-dark)!important;
		box-shadow: 0px 0px 6px 0px black!important;
	}
	#home-page-start p {
		text-shadow: none;
		font-weight: 200;
		max-width: 100%;
		background-size: 100%;
		font-size: 18px;
		line-height: 22px;
		font-weight: 100;
	}
	.btn-desktop {
		display: none;
	}

	.notepad-body {
		flex-direction: column;
	}

	#notepad-toolbox1 {
		display: block;
	}

	/* Make lines smaller on mobile */
	.notepad-lines > ul {
		font-size: 14px;
		line-height: 16px;
	}

	.lasm-script {
		font-size: 14px;
		line-height: 16px;
	}

	/* text inside boxes */
	.content-box-middle {
		max-height: 350px;
	}

	.post-title {
		font-size: 26px;
		padding-right: 30px;
	}

	.box-text {
		font-size: 14px;
	}

	.flare-box {
		font-size: 14px;
	}

	/*
	.notepad-toolbox {
		width: 100%;
		font-size: 20px;
		line-height: 1.25;
		box-shadow: 0px -4px 3px 1px black;
		z-index: 1;
		overflow-y: auto;
		filter: none;
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}
	*/

.toolbox-stats {
	margin-top: 0px;
}

	.toolbox-collapsible {
		font-size: 20px;
		line-height: 1.2;
	}

	.toolbox-button {
		font-size: 18px;
		line-height: 1.2;
	}
	/*
.toolbox-button-rgb {
	background: #5c258d; /* fallback for old browsers * /
	background: -webkit-linear-gradient( to right bottom, #4389a2, #5c258d ); /* Chrome 10-25, Safari 5.1-6 * /
	background: linear-gradient( to right bottom, #4389a2, #5c258d ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ * /

	animation-iteration-count: infinite;
	animation-duration: 30s;
	animation-name: rgb_anim;
}
.toolbox-button-rgb:hover {
	animation-iteration-count: infinite;
	animation-duration: 15s;
	animation-name: rgb_anim;
}*/
	@keyframes rgb_anim {
		from {
			filter: hue-rotate(0deg);
		}

		50% {
			filter: hue-rotate(360deg);
		}

		to {
			filter: hue-rotate(0deg);
		}
	}

	#toolbox-download-btn {
		margin-right: 20px;
		top: 5px;
	}
	/*
#toolbox-download-btn::after {
	content: "X";
	width: 20px;
	height: 20px;
	background-color: green;
	display: block;
}
*/
	#lua-sessions {
		display: none;
	}

	#lua-top-mobile {
		display: block;
	}

	.money-block {
		display: none;
	}

	/*.notepad-test {
	max-height: 70%;
}*/

	.notepad-top {
		height: 45px;
	}

	/*
.notepad-lines {
	margin-right: 0;
	min-width: 0;
	border-right: 0;
}
*/

	.content-box-left {
		position: absolute !important;
		right: -5px;
		top: -5px;
		padding: 0 !important;
	}

	.content-box-left-2 {
		display: none; /* hide pic on mobile? */
	}

	.small-box-2 {
		overflow: hidden;
		padding-bottom: 3px;
	}

	.reply-contnet-box {
		margin-left: 0;
	}

	.box-avatar {
		filter: drop-shadow(2px 4px 6px black);
		display: none;
	}

	.big-pink-btn {
		margin-right: 10px;
	}

	.home-footer {
		position: unset;
	}

	.home-page-content {
		padding-top: 1rem;
		padding-bottom: 6rem;
	}

	.home-info > p {
		max-width: 100%;
	}
	.home-info h1 {
		text-shadow: black 2px 2px;
	}
	/* TODO: make this in CSS work?
#home-ide {
	max-height: 70%;
}
*/
	.micro-forum {
		padding: 0;
		margin: 0;
		background: #181818;
	}

	.topic-box {
		padding: 6px;
	}

	.content-box-right {
		display: none;
	}

	.content-box,
	.content-box-mini,
	.box-text {
		/* hard to read bro */
		font-size: 16px;
	}

	.notepad-top {
		height: 42px;
	}
}