/*
		light to dark:
		rgba(0,255,255,1) to rgba(0,25,100,1)
		*/
		*{
			font-size:20px;
			font-family:montserrat,sans-serif;
			color:rgb(63,63,63);
		}
		
		#darkModeToggle{
			font-size:16px;
			position:fixed;
			top:8px;
			right:8px;
			z-index:290;
			text-align:center;
			display:flex;
			aspect-ratio:2;
			padding:4px;
			border: solid 2px rgb(63,63,63);
			border-radius:8px;
			align-items:center;
			cursor:pointer;
		}
		#darkModeToggle:hover{
			background:#7F7F7F;
		}
		
		.dark *{
			color:white;
		}
		
		.background{
			background:white;
		}
		.dark .background{
			background:rgb(40,40,40);
		}
		
		body{
			margin:0px;
			background-image:url("/images/tileable_pattern.png")
		}
		
		header{
			height:240px;
			width:100%;
			/*background-image:url("images/tileable_pattern_flip.png");*/
			background:white;
			position:relative; /*allow children to 100% size of this-->*/
		}
		.dark header{
			background:rgb(23,23,23);
		}
		.imgHeaderContainer{
			height:100%;
			display:flex;
			justify-content:center;
			position:relative; /*let it hav z index*/
			overflow:hidden;
		}
		.headerGradient{
			width:100%;
			background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 66% 0%,rgba(0,0,0,0.5) 84%,rgba(0,0,0,0.75) 92%,rgba(0,0,0,1) 100%);
			/*background:linear-gradient(90deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.75) 100%);*/
		}
		.headerGradient.flip{
			background:linear-gradient(270deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 66% 0%,rgba(0,0,0,0.5) 84%,rgba(0,0,0,0.75) 92%,rgba(0,0,0,1) 100%);
		}
		.headerBG{
			/*background-size:calc((100% - 767px)/2) 33%; W I D E*/
			background-size:240px 120px;
			display:block;
			position:absolute;
			height:100%;
			width:50%;
			background-image:url("/images/momiji_yay.png");
		}
		.dark .headerBG{
			background-image:url("/images/momiji_yay_dark.png");
		}
		.headerBG.right{
			background-position: right top;
			right:0px;
		}
		.topSpacer{
			background: rgb(222, 255, 255);
			height:6px;
		}
		.dark .topSpacer{
			background: rgb(47, 47, 47);
		}
		.mainContainer{
			display:flex;
			margin-left:auto;
			margin-right:auto;
			/*min-height:100vh; /*todo: prob will need changing*/
			min-height:calc(100vh - 486px);
			max-width: min(83.33%, 1280px);
			/*box-shadow: 0px 0px 20px rgb(0,255,255);*/ /*this looks bad at the top and bottom, cuz the blur near the corners is rounded*/
			
			position:relative;
			z-index:200; /* without this the footer goes over the player selector list lmao*/
		}
		.dark .mainContainer{
			/*box-shadow: 0px 0px 20px rgb(0,25,100);*/
		}
		.blurGradient{
			width:20px;
			display:inline-block;
			background:linear-gradient(90deg,rgba(0,255,255,0) 0%,rgba(0,255,255,0.25) 66% 0%,rgba(0,255,255,0.5) 84%,rgba(0,255,255,0.75) 92%,rgba(0,255,255,1) 100%);
		}
		.blurGradient.flip{
			background:linear-gradient(270deg,rgba(0,255,255,0) 0%,rgba(0,255,255,0.25) 66% 0%,rgba(0,255,255,0.5) 84%,rgba(0,255,255,0.75) 92%,rgba(0,255,255,1) 100%);
		}
		.dark .blurGradient{
			background:linear-gradient(90deg,rgba(0,25,100,0) 0%,rgba(0,25,100,0.25) 66% 0%,rgba(0,25,100,0.5) 84%,rgba(0,25,100,0.75) 92%,rgba(0,25,100,1) 100%);
		}
		.dark .blurGradient.flip{
			background:linear-gradient(270deg,rgba(0,25,100,0) 0%,rgba(0,25,100,0.25) 66% 0%,rgba(0,25,100,0.5) 84%,rgba(0,25,100,0.75) 92%,rgba(0,25,100,1) 100%);
		}
		.flip{
			/*transform: rotate(180deg); this SHOULD work but NOOO chrome has to be a fucking moron and leave gaps because rounding numbers properly is too hard*/
		}
		.mainSideDecoration{
			display:block;
			width:12px;
			background:linear-gradient(0deg,rgba(0,255,255,0.33),rgba(63,255,255,0.17));
		}
		.dark .mainSideDecoration{
			background:linear-gradient(0deg,rgba(0,25,100,0.33),rgba(80,80,80,0.17));
		}
		main{
			padding:16px;
			width:100%;
		}
		main pre{
			white-space: pre-wrap;
		}
		footer{
			box-shadow:0px 0px 100px rgba(0,255,255,0.33);
			z-index: 100;
			position: absolute;
			background:rgb(213, 255, 255);
			height:240px;
			width:100%
		}
		.dark footer{
			box-shadow:0px 0px 100px rgba(0,25,100,0.33);
			/*background:rgb(0, 25, 100); 1/6th this
			background:rgb(40,40,40); 5/6ths this*/
			background:rgb(33,37,50);
		}
		.footerTop{
			display:block;
			height:12px;
			width:100%;
			background-color:rgba(0,255,255,0.33);
		}
		.dark .footerTop{ background-color:rgba(0,25,100,0.33); }
		
		.flexItemContainer{
			display:flex;
			justify-content: center;
		}
		
		.footerItem{
			height:180px;
			width:180px;
			background:rgba(0,0,0,0.0833);
			border-radius:17px;
			margin-top:24px;
			margin-bottom:24px;
			margin-left:12px;
			margin-right:12px;
			text-decoration:none;
		}
		
		.footerItem:hover{ background:rgba(0,0,0,0.0417); }
		
		.dark .footerItem{ background:rgba(0,0,0,0.1667); }
		
		.dark .footerItem:hover{ background:rgba(0,0,0,0.0833); }
		
		.smallImgContainer{
			width:100%;
			height:108px;
			display:flex;
			justify-content:center;
		}
		
		.smallImg{ margin:16px; }
		
		.footerItemLabelContainer{
			display:flex;
			align-items:center;
			height:52px;
		}
		
		.footerItemLabel{
			text-align:center;
			width:100%;
			margin:16px;
		}
		
		.discordLogo{ content:url("/images/didcord_logo_blurple.svg"); }
		
		.dark .discordLogo{ content:url("/images/didcord_logo_white.svg"); }
		
		.weebLogo{ content:url("/images/finiteThinkV3_contentcropfrom512_notext.png"); }
		
		#aboutContainer{
			position:fixed;
			z-index:300;
			width:100%;
			height:100%;
			background:rgba(0,0,0,0.5);
			overflow-y:scroll;
		}
		
		#aboutContent{
			/*0px min, 80px max, 2nd param is a mapping which outputs 0px when 100% is 400 pixels, and outputs 80px when 100% is 600 pixels (200 pixels more)*/
			margin:clamp(0px,((100% - 400px)/200)*80,80px);
			padding:16px;
			border-width:2px;
			border-color:#BFBFBF;
			border-radius:8px;
			border-style: solid;
		}
		
		.dark #aboutContent{
			border-color:#3F3F3F;
		}
		
		.blueLinks a{
			color:#3F7F7F;
		}
		
		.blueLinks a:hover{
			color:#00FFFF;
		}
		
		.dark .blueLinks a{
			color:#1F7FFF;;
		}
		
		.dark .blueLinks a:hover{
			color:#3FBFFF;
		}
		
		.iamblue{
			color:#3F7F7F;
		}
		
		.iamblue:hover{
			color:#00FFFF;
		}
		
		.dark .iamblue{
			color:#1F7FFF;;
		}
		
		.dark .iamblue:hover{
			color:#3FBFFF;
		}