body {
	font-family: Tahoma, Verdana, sans-serif;
	font-size: .85rem;
	line-height: 1.3rem;
}
/* wow fuck making backgrounds responsive on mobile this sucked ass */
body:after{
      content:"";
      position:fixed; /* stretch a fixed position to the whole screen */
      top:0;
      height:100%; /* fix for mobile browser address bar appearing disappearing */
      left:0;
      right:0;
      z-index:-1; /* needed to keep in the background */
      background: var(--bg-image) center top;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}
/* -- MACROSOFT EXPLODER UI -- */
#wrapper1 {
	position: relative;
	top: 20px;
	width: 60%;
	height: 50%;
	min-width: 1140px;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	border-top: 2px solid var(--accent-1);
	border-left: 2px solid var(--accent-1);
	border-right: 2px solid var(--accent-2);
	border-bottom: 2px solid var(--accent-2);
}
#padder {
	margin: 20px;
	color: rgba(255,255,255,0);
	text-align: center;
}
#wrapper2 {
	background: var(--accent-3);
	border-top: 2px solid var(--accent-5);
	border-left: 2px solid var(--accent-5);
	border-right: 2px solid var(--accent-4);
	border-bottom: 2px solid var(--accent-4);
	padding: 2px;
}
#titlebar {
	width: auto;
	background: linear-gradient(to right, var(--grad-1), var(--grad-2));
	margin: 0;
	font-size: .85rem;
	font-family: Tahoma, Verdana, sans-serif;
	color: #fff;
	padding: 2px;
}
#titlebar::after {
	content: var(--minimize);
	position: relative;
	float: right;
	top: 2px;
	right: 1px;
}
#nav1 {
	width: auto;
	margin-top: 3px;
	border-top: 2px solid var(--accent-4);
	border-left: 2px solid var(--accent-4);
	border-right: 2px solid var(--accent-5);
	border-bottom: 2px solid var(--accent-5);
	font-size: .85rem;
}
#nav2 {
	width: auto;
	border-top: 2px solid var(--accent-5);
	border-left: 2px solid var(--accent-5);
	border-bottom: 2px solid var(--accent-4);
	padding: 6px;
}
.sys {
	margin-right: 15px;
}
#nav3 {
	width: auto;
	margin-top: -4px;
	border-top: 2px solid var(--accent-4);
	border-left: 2px solid var(--accent-4);
	border-right: 2px solid var(--accent-5);
	border-bottom: 2px solid var(--accent-5);
	font-size: .85rem;
}
#nav4 {
	width: auto;
	border-top: 2px solid var(--accent-5);
	border-left: 2px solid var(--accent-5);
	border-right: 2px solid var(--accent-4);
	border-bottom: 2px solid var(--accent-4);
	padding: 6px;
}
#nav5 {
	width: auto;
	margin-top: -4px;
	border-top: 2px solid var(--accent-4);
	border-left: 2px solid var(--accent-4);
	border-right: 2px solid var(--accent-5);
	border-bottom: 2px solid var(--accent-5);
	font-size: .85rem;
}
#nav6 {
	width: auto;
	border-top: 2px solid var(--accent-5);
	border-left: 2px solid var(--accent-5);
	border-right: 2px solid var(--accent-4);
	border-bottom: 2px solid var(--accent-4);
	padding: 2px;
	padding-left: 6px !important;
}
.button {
	display: inline-block;
	text-align: center;
	margin-right: 10px;
}
.button.inactive {
	color: var(--accent-4);
	text-shadow: 1px 1px var(--accent-5);
}
.button.back::before {
	content: var(--back);
}
.button.forward::before {
	content: var(--forward);
}
.button.stop::before {
	content: var(--stop);
}
.button.refresh::before {
	content: var(--refresh);
}
.go::before {
	content: var(--go);
	position: relative;
	top: 5px;
}
#urlbar1 {
	display: inline-block;
	border-top: 2px solid var(--accent-4);
	border-left: 2px solid var(--accent-4);
	border-right: 2px solid var(--accent-5);
	border-bottom: 2px solid var(--accent-5);
}
#urlbar2 {
	border-top: 2px solid var(--accent-2);
	border-left: 2px solid var(--accent-2);
	border-right: 2px solid var(--accent-1);
	border-bottom: 2px solid var(--accent-1);
	background: var(--reading);
	color: var(--reading-text);
	padding: 2px;
	vertical-align: middle;
	}
#nav6 img {
	vertical-align: middle;
}
#nav6 {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	column-gap: 5px;
}
#urlbar1 {
	flex-grow: 2;
}
#content2 {
	border-top: 2px solid var(--accent-2);
	border-left: 2px solid var(--accent-2);
	border-bottom: 2px solid var(--accent-1);
	border-right: 2px solid var(--accent-1);
}
#content1 {
	border-top: 2px solid var(--accent-4);
	border-left: 2px solid var(--accent-4);
	border-right: 2px solid var(--accent-5);
	border-bottom: 2px solid var(--accent-5);
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	background: var(--reading);
	color: var(--reading-text);
	z-index: 1;
	margin-top: 3px;
}
/* -- MAIN PAGE UI -- */
#contentwrapper {
	width: 95%;
	margin: 0 auto;
	position: relative;
	left: -10px;
}
#header, #columns, #footer {
	width: 100%;
	padding:10px;
}
#header, #footer {
	display:flex;
	justify-content: center;
	overflow-x: hidden;
}
#headerimg {
	max-width: 800px;
	content: var(--header);
	padding: 10px;
}
#columns {
	display: flex;
	justify-content: space-around;
	align-items: stretch;
	align-content: stretch;
	column-gap: 10px;
}
.left {
	padding-right: 10px;
	border-right: 1px var(--accent-3) solid;
	min-width: 120px;
}
.right {
	padding-left: 10px;
	border-left: 1px var(--accent-3) solid;
	min-width: 120px;
}
.nav {
	margin-bottom: 10px;
}
.nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	font-size: 
}
.main {
	flex-grow: 2;
	padding-left: 10px;
	padding-right: 10px;
}
h1 {
	color: var(--h1);
	font-family: Ubuntu Sans Mono, Courier New, serif;
	margin: 0;
	margin-bottom: 10px;
}
h5 {
	font-family: Ubuntu Sans Mono, Courier New, serif;
	text-decoration: underline;
	margin: 0;
	margin-bottom: 5px;
	font-size: .9rem;
	color: var(--h1);
}
.recentposts {
	border-top: 1px var(--accent-3) solid;
	padding-top: 10px;
}
.recenttitle {
	color: var(--h1);
	font-weight: bold;
}
.postexcerpt {
	text-align: justify;
}
.recentupdates {
	border-top: 1px var(--accent-3) solid;
	padding-top: 10px;
}
.recentupdates table {
	width: 100%;
	border-collapse: collapse;
}
.recentupdates table tr:nth-child(odd) {
	background: var(--table-row);
}
.recentupdates table tr td {
	padding: 0px 3px 0px 3px;
}
td.date {
	text-align: right;
}
p {
	margin: 0;
}
.main p {
	margin-bottom: 10px;
}
input[type="checkbox"]#theme {
  display:none;
}
.link {
	color: var(--link) !important;
	text-decoration: underline;
}
.link:visited {
	color: var(--link-visited) !important;
}
.link:hover {
	color: var(--link-hover) !important;
}
.toggle{
	text-decoration: none !important;
}
.urhere {
	text-decoration: none !important;
}
.urhere::after {
	content: "📍";
}
.main img {
	max-width: 100%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	
}
.caption {
	font-style: italic;
	text-align: center;
	opacity: 0.5;
	font-family: Ubuntu Sans Mono, Courier New, serif;
	font-size: 0.7rem;
}
#workflex {
	display:flex;
	justify-content: space-around;
	text-align: center;
	vertical-align: middle;
	flex-wrap: wrap;
}
#workflex p {
	width: 200px;
}
#workflex img {
	width: 80%;
}
/* -- MARQUEE -- */
#marquee {
  margin-left:10px;
  margin-right: -10px;	
    --gap: 1rem;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
}
#marquee_content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
  animation: scroll 20s linear infinite;
}
#marquee_content img {
	width: 88px;
	height: 31px;
}
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}
#marquee:hover #marquee_content {
  animation-play-state: paused;
} 
/* pause marquee when prefers-reduced-motion is set */
@media (prefers-reduced-motion: reduce) {
	
  #marquee_content {
    animation-play-state: paused !important;
  }
}
/* -- BLOG FILTERS - help making these from egg.design -- */
.main input {
	position: absolute;
	opacity: 0;
	cursor: pointer !important;
}
.main label {
	text-decoration: underline;
	color: var(--link);
	display: inline-block;
	padding: 5px;
	cursor: pointer !important;
	padding-left: 0px;
}
.main label:hover {
	color: var(--link-hover);
}
.main input:checked + label {
	color: var(--link-visited);
}
.main input:checked + label[for='all'] ~ .css-filters div:not([data-all]),.main input:checked + label[for='gamedev'] ~ .css-filters div:not([data-gamedev]),.main input:checked + label[for='life'] ~ .css-filters div:not([data-life]),.main input:checked + label[for='internet'] ~ .css-filters div:not([data-internet]){
    /* here is where you put your css for hiding your filters */
	/* animation: hideFilter .8s 1 forwards!important; - commented out in case i decide to animate again */
	display: none;
}
/* commenting out animation in case i decide to animate again
@keyframes hideFilter {
    50% {
        transform:scale(0);
        height:100px;
        width:100px;
    }
    100% {
        transform:scale(0);
        width:0;
        height:0;
        margin:0;
    }
} */
.css-filters {
	display:flex;
    margin-left: auto;
	margin-right: auto;
	width:100%;
    flex-wrap:wrap;
}
/* to select + style all of the elements inside of your filters container, use this: */
.css-filters > div {
     width:140px;
     position:relative;
     height:100px;
     display:flex;
     align-items:center;
     justify-content:space-around;
     border:1px solid var(--accent-3);
	 margin:.5rem .5rem .5rem 0;
	 margin-bottom: 0 !important;
}
/* blog post color backgrounds */
.css-filters > div:nth-child(7n+1) {
	background: var(--blog-1);
}
.css-filters > div:nth-child(7n+2) {
	background: var(--blog-2);
}
.css-filters > div:nth-child(7n+3) {
	background: var(--blog-3);
}
.css-filters > div:nth-child(7n+4) {
	background: var(--blog-4);
}
.css-filters > div:nth-child(7n+5) {
	background: var(--blog-5);
}
.css-filters > div:nth-child(7n+6) {
	background: var(--blog-6);
}
.css-filters > div:nth-child(7n+7) {
	background: var(--blog-7);
}
/* -- TAGS STYLING -- */
#tags {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-bottom: 10px;
}
#tags a {
	padding: 5px;
	padding-bottom: 4px;
	padding-top: 1px;
	border: 1px solid var(--accent-3);
}
#tags a:nth-child(7n+1) {
	background: var(--blog-1) !important;
}
#tags a:nth-child(7n+2) {
	background: var(--blog-2) !important;
}
#tags a:nth-child(7n+3) {
	background: var(--blog-3) !important;
}
#tags a:nth-child(7n+4) {
	background: var(--blog-4) !important;
}
#tags a:nth-child(7n+5) {
	background: var(--blog-5) !important;
}
#tags a:nth-child(7n+6) {
	background: var(--blog-6) !important;
}
#tags a:nth-child(7n+7) {
	background: var(--blog-7) !important;
}
/* -- COMMENTS STYLING -- */
#comments {
	border-top: 1px solid var(--accent-3);
	padding-top: 5px;
}
/* -- LIGHT MODE PREFERRED -- */
@media (prefers-color-scheme: light) {
	/* Light mode default */
:root {
	--bg-image: url("background.png");
	--accent-1: #c9ddef;
	--accent-2: #354c70;
	--accent-3: #8db3d3;
	--accent-4: #617da7;
	--accent-5: #fff;
	--grad-1: #405a71;
	--grad-2: #5987bc;
	--reading: #fff;
	--reading-text: #333333;
	--link: #0000EE;
	--link-hover: #FF0000;
	--link-visited: #551a8b;
	--minimize: url('assets/ui/minimize.png');
	--back: url('assets/ui/back.png');
	--forward: url('assets/ui/forward.png');
	--stop: url('assets/ui/stop.png');
	--refresh: url('assets/ui/refresh.png');
	--go: url('assets/ui/go.png');
	--header: url('assets/ui/logo.png');
	--h1: #4b8abb;
	--table-row: #c8c8c8;
	--blog-1: #b7e0eb;
	--blog-2: #bdbdbd;
	--blog-3: #89c9c4;
	--blog-4: #6ea6e1;
	--blog-5: #a1fff6;
	--blog-6: #7bddea;
	--blog-7: #55cca5;
}
.toggle::after {
	content: " 🌘";
}
/* Dark mode css toggled */
:root:has(#theme:checked) {
	--bg-image: url("background_dark.png");
	--accent-1: #885399;
	--accent-2: #241c3e;
	--accent-3: #5b5593;
	--accent-4: #38315b;
	--accent-5: #b47cc6;
	--grad-1: #352c51;
	--grad-2: #483475;
	--reading: #1e1e1e;
	--reading-text: #cccccc;
	--link: #e851a2;
	--link-hover: #aa60c2;
	--link-visited: #5b5593;
	--minimize: url('assets/ui/minimize_dark.png');
	--back: url('assets/ui/back_dark.png');
	--forward: url('assets/ui/forward_dark.png');
	--stop: url('assets/ui/stop_dark.png');
	--refresh: url('assets/ui/refresh_dark.png');
	--go: url('assets/ui/go_dark.png');
	--header: url('assets/ui/logo_dark.png');
	--h1: #aa60c2;
	--table-row: #121212;
	--blog-1: #313131;
	--blog-2: #594d7d;
	--blog-3: #3a3e73;
	--blog-4: #3b1f4a;
	--blog-5: #626262;
	--blog-6: #873e63;
	--blog-7: #734ca2;
}
:root:has(#theme:checked) .toggle::after {
	content: " ☀️";
}
}
/* DARK MODE PREFERRED */
@media (prefers-color-scheme: dark) {
	/* Dark mode default */
:root {
	--bg-image: url("background_dark.png");
	--accent-1: #885399;
	--accent-2: #241c3e;
	--accent-3: #5b5593;
	--accent-4: #38315b;
	--accent-5: #b47cc6;
	--grad-1: #352c51;
	--grad-2: #483475;
	--reading: #1e1e1e;
	--reading-text: #cccccc;
	--link: #e851a2;
	--link-hover: #aa60c2;
	--link-visited: #5b5593;
	--minimize: url('assets/ui/minimize_dark.png');
	--back: url('assets/ui/back_dark.png');
	--forward: url('assets/ui/forward_dark.png');
	--stop: url('assets/ui/stop_dark.png');
	--refresh: url('assets/ui/refresh_dark.png');
	--go: url('assets/ui/go_dark.png');
	--header: url('assets/ui/logo_dark.png');
	--h1: #aa60c2;
	--table-row: #121212;
	--blog-1: #313131;
	--blog-2: #594d7d;
	--blog-3: #3a3e73;
	--blog-4: #3b1f4a;
	--blog-5: #626262;
	--blog-6: #873e63;
	--blog-7: #734ca2;
}
.toggle::after {
	content: " ☀️";
}
/* Light mode css toggled */
:root:has(#theme:checked) {
	--bg-image: url("background.png");
	--accent-1: #c9ddef;
	--accent-2: #354c70;
	--accent-3: #8db3d3;
	--accent-4: #617da7;
	--accent-5: #fff;
	--grad-1: #405a71;
	--grad-2: #5987bc;
	--reading: #fff;
	--reading-text: #333333;
	--link: #0000EE;
	--link-hover: #FF0000;
	--link-visited: #551a8b;
	--minimize: url('assets/ui/minimize.png');
	--back: url('assets/ui/back.png');
	--forward: url('assets/ui/forward.png');
	--stop: url('assets/ui/stop.png');
	--refresh: url('assets/ui/refresh.png');
	--go: url('assets/ui/go.png');
	--header: url('assets/ui/logo.png');
	--h1: #4b8abb;
	--table-row: #c8c8c8;
	--blog-1: #b7e0eb;
	--blog-2: #bdbdbd;
	--blog-3: #89c9c4;
	--blog-4: #728cb5;
	--blog-5: #a9dbb8;
	--blog-6: #91e2ed;
	--blog-7: #4e7f9c;
}
:root:has(#theme:checked) .toggle::after {
	content: " 🌘";
}
}