html {
	background-color:black;
	image-rendering: pixelated;
	background-image:url("images/cloudsbg.gif"),url("images/skybg.gif");
	animation-name: backgroundScroll;
	animation-duration: 48s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	background-position-y: 26px,0px,0px;
}

@keyframes backgroundScroll {
  from {background-position-y: 0px;}
  to {background-position-y: 1024px,512px;}
}

body {

}

.mainBodyBox { /* The main box that contains everything on the home page*/
	width:1140px;
	margin:auto;
	/*background-color:#222222; debug */
	display:flex;
	text-align: center;
}

.navigationBody {
	width:300px;
	height:592px;
	margin:0px;
	border: ridge 10px white;
	border-radius: 5px;
	/*background-image:url("images/bg.gif");*/
	backdrop-filter:brightness(0.1) blur(5px);
	box-shadow:4px 4px 0px black;
}

.personalBody {
	width:100%;
	height:100%;
	margin:0px;
	
}

.aboutMeBox {
	width:855px;
	height:320px;
	margin-left:6px;
	border: ridge 10px white;
	border-radius: 5px;
	text-align: left;
	/*background-image:url("images/bg.gif");*/
	backdrop-filter:brightness(0.1) blur(5px);
	box-shadow:4px 4px 0px black;
	
}

.iframeHolder {
	text-align: left;
	border: ridge 10px white;
	border-radius: 5px;
	margin:6px;
	padding:6px;
	display:table;
	/*background-image:url("images/bg.gif");*/
	backdrop-filter:brightness(0.1) blur(5px);
	box-shadow:4px 4px 0px black;
}

/* FONTS AND TEXT AND SUCH */

@font-face {
  font-family: sanscode;
  src: url(SansCode.ttf);
}

@font-face {
  font-family: sanscodeItalic;
  src: url(SansCodeItalic.ttf);
}

p {
	font-family: sanscode;
	font-size:14px;
	color: #EAEAEA;
	font-weight: 600;
	height:10px;
	text-shadow:2px 2px 0px black, -2px 2px 0px black, -2px -2px 0px black, 2px -2px 0px black,
	0px 2px 0px black, -2px 0px 0px black, 2px 0px 0px black, 0px -2px 0px black, 3px 3px 0px black;
}

.navigationBody p {
	height:20px;
	font-size:18px;
}

.blogList p {
	height:24px;
}

pi {
	font-family: sanscodeItalic;
}

quiet {
	font-family: sanscodeItalic;
	font-size:12px;
	color: #FFFFFFAA;
	height:0px;
}

h1 {
	font-family: sanscodeItalic;
	font-size:32px;
	color: white;
	font-weight: 600;
	text-align:200px;
}

h2 {
	font-family: sanscodeItalic;
	font-size:24px;
	color: white;
	font-weight: 600;
	text-align:200px;
	height:24px;
	margin:0px;
	margin-bottom:14px;
	transform:translate(10px,3px);
	
}

.iframeHeader {
	font-family: sanscodeItalic;
	font-size:24px;
	color: #FFFFFFFF;
	font-weight: 600;
	text-align:200px;
	height:24px;
	margin:0px;
	margin-bottom:14px;
	transform:translate(10px,3px);
	
	/*background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red, violet);
	background-size:600px,100%;
	-webkit-background-clip: text;
	animation: rainbowScroll 2s linear infinite,shimmy 1s ease-in-out infinite;
	text-shadow:2px 2px 0px black;*/
}

.linkHeader {
	font-family: sanscodeItalic;
	font-size:24px;
	color: #FFFFFFDF;
	font-weight: 800;
	height:24px;
	margin:0px;
	transform:translate(0px,0px);	
}

.navigationBody a:hover{
	background-image: url(images/rainbow.png);
	background-size:512px,100%;
	-webkit-background-clip: text;
	color: #FFFFFF00;
	animation: rainbowScroll 1s linear infinite;
	text-shadow:0px 0px 0px #FFFFFF00;
	font-weight: 900;
	font-size:22px;
}

@keyframes rainbowScroll {
  0% {background-position-x: 0%;}
  100%{background-position-x: -512px;}
}

@keyframes rainbowFlash {
  0% {filter: sepia(0.1) hue-rotate(0deg);}
  100%{filter: sepia(0.1) hue-rotate(360deg);}
}

@keyframes shimmy {
  0% {transform:translate(10px,3px);}
  50%{transform:translate(10px,4px);}
  100%{transform:translate(10px,3px);}
}

@keyframes flash {
  0% {color: yellow;}
  50%{color: violet;}
  100% {color: yellow;}
}

h3 {
	
}

a {
	color: #ffbf29;
	text-decoration: none;
}
a:hover {
	color: #ff8229;
	text-decoration: underline;
}

flashText {
	animation: flash 1s ease-in-out infinite;
	text-shadow:2px 2px 0px black;
}

/* about me */

img.profileImage {
	position:absolute;
	transform:translate(500px,-75px);
}

img.queerFlag {
	position:absolute;
	transform:translate(280px,-288px);
}

img.queerFlag2 {
	position:absolute;
	transform:translate(250px,-288px);
}

/* MORE box */

.moreBox {
	width:100%;
	height:234px;
	text-align: left;
	border: ridge 10px white;
	border-radius: 5px;
	margin:6px;
	margin-left:0px;
	padding:6px;
	display:table;
	/*background-image:url("images/bg.gif");*/
	backdrop-filter:brightness(0.1) blur(5px);
	box-shadow:4px 4px 0px black;
}

/* GAMES box */
.gameBox {
	width:282px;
	height:67px;
	border: dashed 2px white;
	margin-bottom: 4px;
	display:flex;
	text-align: center;
}

.gameBox:hover{
	filter:brightness(1.2);
}

.gameBox img{
	outline: solid 2px black;
	width:48px;
	height:48px;
	margin-top:auto;
	margin-bottom:auto;
	margin-left:10px;
	margin-right:20px;
	transform:translate(0px,-1px);
	filter: drop-shadow(2px 2px 1px #00000066);
}

.gameBox p{
	font-size:22px;
	transform:translate(0px,-2px);
	text-shadow:3px 3px 0px black, -3px 3px 0px black, -3px -3px 0px black, 3px -3px 0px black,
	0px 3px 0px black, -3px 0px 0px black, 3px 0px 0px black, 0px -3px 0px black, 5px 5px 3px black;
	
	font-family: sanscodeItalic;
	font-weight: 800;
	
	color: #ffbf29;
	text-decoration: none;
	
	
	
}

.gameBox year{
	font-size:14px;
	transform:translate(243px,26px);
	text-shadow:2px 2px 0px black, -2px 2px 0px black, -2px -2px 0px black, 2px -2px 0px black,
	0px 2px 0px black, -2px 0px 0px black, 2px 0px 0px black, 0px -2px 0px black, 3px 3px 2px black;
	
	font-family: sanscode;
	font-weight: 800;

	text-decoration: none;
	position:absolute;
	color:#DDDDDD;
	
}

.gameBox pageCount{
	font-size:14px;
	transform:translate(76px,26px);
	text-shadow:2px 2px 0px black, -2px 2px 0px black, -2px -2px 0px black, 2px -2px 0px black,
	0px 2px 0px black, -2px 0px 0px black, 2px 0px 0px black, 0px -2px 0px black, 3px 3px 2px black;
	
	font-family: sanscode;
	font-weight: 800;

	text-decoration: none;
	position:absolute;
	color:#DDDDDD;
	width:200px;
	text-align:right;
	
}

.gameBox comicTitle{
	transform:translate(-34px,-6px);
	position:absolute;
	width:200px;
}


/* button */
.buttonBox {
	width:1115px;
	margin-left:0px;
	display:flex;
	text-align: center;
	overflow:hidden;
	border: ridge 10px white;
	border-radius: 5px;
	padding:0px;
	/*background-image:url("images/bg.gif");*/
	box-shadow:4px 4px 0px black;
}

.buttonBoxScroll {
	width:100%;
	display:flex;
	animation: buttonScroll ease-in-out 8s infinite;
	margin-top:10px;
	margin-bottom:10px;
	margin-left:0px;
	margin-right:0px;
}

.buttonBoxScroll:hover {
	width:100%;
	display:flex;
	animation-play-state: paused;
}

.buttonBoxScroll img {
	margin-right:10px;
	height:31px;
	image-rendering: pixelated;
	box-shadow:2px 2px 0px black,-2px -2px 0px black,-2px 2px 0px black,2px -2px 0px black;
}

.buttonBoxScroll img:hover {
	box-shadow:6px 6px 0px black;
	outline: dashed 2px white;
	z-index:10;
	overflow: overlay;
	transform:scale(1.1);
}

@keyframes buttonScroll {
  0% {transform:translate(16px,0px);} /*      \/     replace this number with number of buttons                  */
  50%{transform:translate(  calc(calc(-98px * 12) + 1104px)  ,0px);}
  100%{transform:translate(16px,0px);} 
}

/* SCROLL BAR */

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: 2px;
  background: #343434; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #ffbf29;
  border-radius: 2px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ff8229;
}

/* TITLE */
t { 
    display: block;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
	
	font-family: sanscodeItalic;
	font-size:32px;
	color: white;
	font-weight: 600;
	text-align:0px;
	
	
	text-shadow:3px 3px 2px black, -3px 3px 2px black, -3px -3px 2px black, 3px -3px 2px black,
	0px 3px 2px black, -3px 0px 2px black, 3px 0px 2px black, 0px -3px 2px black, 5px 5px 3px black,
	0px 4px 2px black,0px -4px 2px black,-4px 0px 2px black,4px 0px 2px black;
	
	animation: yayy 1s ease-in-out infinite
}


@keyframes yayy {
  0% {transform:rotate(-0.005turn);}
  50%{transform:rotate(0.005turn);}
  100%{transform:rotate(-0.005turn);}
}

/* COMIC PAGE */

.comicbox {
	width:100%;
	margin:auto;
	border: ridge 5px white;
	border-radius: 5px;
	/*background-image:url("images/bg.gif");*/
	backdrop-filter:brightness(0.1) blur(5px);
	box-shadow:4px 4px 0px black;
	display:block;
	padding:10px;
	box-sizing: border-box;
}

.comicbox img{
	max-width:100%;
	min-height:720px;
	object-fit: contain;
	image-rendering: pixelated;
}

.navigationBox {
	margin:auto;
	border: ridge 5px white;
	border-radius: 5px;
	/*background-image:url("images/bg.gif");*/
	backdrop-filter:brightness(0.1) blur(5px);
	box-shadow:4px 4px 0px black;
	display:block;
	padding:10px;
	width:200px;
	height:320px;
	position:absolute;
	z-index : 1;
}

.poopbox {
	width:100%;
	height:100%;
}

.poopbox a {
	font-family: sanscode;
	font-size:18px;
	font-weight: 600;
	height:0px;
	text-shadow:2px 2px 0px black, -2px 2px 0px black, -2px -2px 0px black, 2px -2px 0px black,
	0px 2px 0px black, -2px 0px 0px black, 2px 0px 0px black, 0px -2px 0px black, 3px 3px 0px black;
	display: block;
	-ms-user-select: none;
	user-select: none;
}

.poopbox a:active{
	color: #EAEAEA;
	transform:translate(0px,1px);
	font-size:20x;
}

.poopbox p {
	font-family: sanscode;
	font-size:18px;
	font-weight: 600;
	height:0px;
	text-shadow:2px 2px 0px black, -2px 2px 0px black, -2px -2px 0px black, 2px -2px 0px black,
	0px 2px 0px black, -2px 0px 0px black, 2px 0px 0px black, 0px -2px 0px black, 3px 3px 0px black;
	display: block;
	transform:translate(0px,-20px);
}

.fatFillBox {
	height:100%;
	weight:100%;
}

/* BLOG STUFF */

.blogWide {
	width:1080px;
	height:100%;
	margin:auto;
	border: ridge 10px white;
	border-radius: 5px;
	text-align: left;
	/*background-image:url("images/bg.gif");*/
	backdrop-filter:brightness(0.1) blur(5px);
	box-shadow:4px 4px 0px black;
	padding:8px;
	padding-left:24px;
	padding-right:24px;
}

.blogWide p{
	height:100%;
	font-size:16px;
	color: #FDFDFD;
	line-height:26px;
	margin-left:auto;
	margin-right:auto;
	width:100%;
}

.blogWide img{
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width:100%;
	max-height:600px;
}

.blogWide i{
	font-family: sanscode;
	font-size:14px;
	color: #CACACA;
	font-weight: 600;
	height:22px;
	text-shadow:2px 2px 0px black, -2px 2px 0px black, -2px -2px 0px black, 2px -2px 0px black,
	0px 2px 0px black, -2px 0px 0px black, 2px 0px 0px black, 0px -2px 0px black, 3px 3px 0px black;
	text-align:center;
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width:100%;
	margin-top:8px;
}

.blogWide h1{
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width:100%;
	text-align:center;
}

.blogWide h2{
	display: block;
	margin-left: 0px;
	max-width:100%;
	text-align:left;
	color: #60f7c0;
	transform:translate(0px,0px);
	font-size:28px;
	height:36px;
	margin-top:50px;
}