/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* -------------------- fonts -------------------------- */

@font-face {
  font-family: "tw-cond";
  src: url("fonts/Tw Cen MT Std Bold Cond.ttf");
} 

@font-face {
  font-family: "tw-bold";
  src: url("fonts/Tw Cen MT.ttf");
} 

@font-face {
  font-family: "tw-regular";
  src: url("fonts/TwCenMTStd.otf");
} 

/* -------------------- end fonts -------------------- */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
	background-color: #444669;
	background: repeating-linear-gradient(
		90deg,
		#56587b,
		#56587b 2px,
		#444669 2px,
		#444669 40px
	);
	color: #000000;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	text-shadow: -0.2px -1px 1px #323241, 0.0px 0.5px 0px #BFC1EB;
}

.siteBoundries {
	background-color: #8C8FD1;
	background-image: url(web-images/bg1.png);
	border-right: thick solid #7570A3;
	border-left: thick solid #7570A3;
	height: 100%;
}

.mainHeader {
	height: 244px;
	margin-top: 20px;
	position: static;
	justify-content: space-between;
}

.bannerBackground-desktop {
	position: absolute;
	object-fit: contain;
	width: 1035px;
	height: auto;
	margin: auto;
	left: 0px;
	right: 0px;
}

.bannerBackground-mobile {
	position: absolute;
	right: 0px;
	left: 0px;
	top: 0px;
    margin-top: -95px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	width: 100%;
}

.bannerContent {
	display: flex;
	align-items: center;
	height: 100%;
	width: 100%;
	padding: 35px;
}

.bannerMascot {
	z-index: 1;
	position: absolute;
	margin-top: -14px;
  	margin-left: 20px;
	width: auto; 
	height: auto;
}

.bannerLogo {
	width: 300px;
	height: auto;
	z-index: 1;
	position: absolute;
	margin-top: 30px;
	margin-left: 184px;
}

/* content navigation taskbar thing */

#mainNavBar {
	height: 55px;
	border-radius: 15px;
	margin-top: -65px;
	margin-right: 50px;
	margin-left: 50px;
	margin-bottom: 0px;
	padding: 0px;
	position: relative;
	display: flex;
  	flex-direction: row;
	justify-content: flex-end;
	/* transition: top 0.5s ease-in-out; <- just looks weird now */
}

#mainNavBar.navFixed {
	position: fixed;
	top: 0;
}

.navDivider {
	position: relative;
	z-index: 40;
	width: 2px;
	height: 100%;
	background-position: 0%;
	box-shadow: -2px 0px 1px rgba(0, 0, 0, 0.2);
	background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 17.96%,rgba(181,175,233,1.00) 51.81%,rgba(0,0,0,0.00) 84.11%);
}

.navButton {
	display: inline-flex;
	position: relative;
	/* align-items: center; */
	padding: 6px 16px;
	text-decoration-thickness: 0;
	text-shadow: 0px 2px 1px #00000040;
	text-decoration: none;
	font-variant: normal;
	font-weight: normal;
	font-family: "tw-regular";
	font-size: 21pt;
	color: hsla(250,62%,85%,1.00);
	line-height: 140%;
	transition: all 0.15s;
	transition-timing-function: ease-out;
}

.navButtonImg.normal {
	position: absolute;
	object-fit: fill;
	transition: opacity 1s;
	transition-timing-function:cubic-bezier(234);
	z-index: -1;
	top: -6px;
	left: -18px;
	width: calc(100% + 33px);
	height: calc(100% + 11px);
	opacity: 0;
}

.navButtonImg.click {
	position: absolute;
	object-fit: fill;
	transition: opacity 0.4s;
	transition-timing-function:cubic-bezier(234);
	z-index: -1;
	top: -6px;
	left: -18px;
	width: calc(100% + 33px);
	height: calc(100% + 11px);
	opacity: 0;
}

.navButton:hover 
	.navButtonImg.normal { opacity: 1; transition: opacity 0.04s; transition-timing-function: ease-in; }
.navButton:hover { color: hsla(0,0%,100%,1.00); }
.navButton:hover { text-shadow: 0px 5px 3px #00000040; line-height: 115%; transition: all 0.05s; transition-timing-function: ease-out; }

.navButton:active 
	.navButtonImg.click { opacity: 1; transition: opacity 0.08s; }
.navButton:active { text-shadow: 0px 1px 1px #00000040; line-height: 155%; transition: all 0.05s; transition-timing-function: ease-out;}

.navButtonContent {
  position: relative;
  z-index: 10;  
}

#mainNavSpace {
	margin-left: 32px;
}



/* content and blogpost css */

.content {
	max-width: 750px;
	margin: auto;
	position: static;
	padding-top: 32px;
}

.contentBox {
	padding-top: 0px;
	padding-left: 5px;
	padding-right: 5px;
	border-radius: 10px 37px 10px 10px;
	margin-top: 0px;
	position: relative;
	margin-bottom: 0px;
	padding-bottom: 8px;
	display: block;
}

.contentBox.tab {
	width: 28%;
	z-index: -5;
	border-radius: 14px 14px 0px 0px;
	box-shadow: inset 0px 1px 0px rgba(190, 180, 241, 0.9), inset 0px -10px 20px rgba(190, 180, 241, 0.22);
	background: linear-gradient 180deg, rgba(107, 86, 223, 0.4) 0%, rgba(107, 86, 223, 0.9) 50%, rgba(85, 60, 218, 0.3) 52%, rgba(85, 60, 218, 0.2)60%, hsla(246,60%,72%,0.00) 100%;
	text-shadow: 0px 2px 1px #00000040;
	font-family: "tw-cond";
	font-size: 21pt;
	color: hsla(250,62%,85%,1.00);
	line-height: 100%;
	text-align: left;
	top: -28px;
	margin-left: -73%;
	display: inline-block;
	padding-right: 0px;
	padding-left: 16px;
	margin-top: 7px;
	height: 37px;
	padding-top: 7px;
}

.contentBox.body {
	position: relative;
	z-index: 4;
	margin-top: -13px;
	margin-left: 10px;
	margin-right: 10px;
	top: -5px;
	bottom: 0px;
	padding-top: 32px;
	padding-bottom: 32px;
	text-align: left;
	padding-left: 15px;
	padding-right: 15px;
	text-wrap: balance;
	border-radius: 12px;
}

/* footer */


.bottomJargon {
	text-align: center;
	background-color: hsla(252,77%,12%,0.78);
	margin-top: 0px;
	padding-top: 10px;
	padding-bottom: 32px;
	color: #7E7E7E;
	font-size: small;
	right: 0px;
	left: 0px;
	bottom: 0px;
	display: flex-end;
	background-image: linear-gradient(180deg,rgba(44,38,88,1.00) 0%,rgba(88,80,145,1.00) 9.67%,rgba(44,38,88,1.00) 13.12%,rgba(54,47,106,1.00) 69.25%,rgba(54,47,106,1.00) 82.04%,rgba(18,10,44,1.00) 90.32%);
	box-shadow: inset 0px 2px 4px #BCBDD8;
}


/* errors */

.errorpicture {
	width: auto;
	height: auto;
	margin-top: 110px;
	margin-bottom: 190px;
}


/* ========= themeing, colors, and extras ============== */

.themeAero {
	background: linear-gradient( 180deg, rgba(107, 86, 223, 0.4) 0%, rgba(107, 86, 223, 0.9) 50%, rgba(85, 60, 218, 0.9) 52%, rgba(85, 60, 218, 0.75)70%, rgba(85, 60, 218, 0.2) 100% );
	box-shadow: 0px 10px 17px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(190, 180, 241, 0.9), inset 0px 10px 14px rgba(190, 180, 241, 0.8), inset 0px -1px 1px rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(3px);
	background-blend-mode: luminosity;
}

.themePinstripes {
	background: linear-gradient(180deg,rgba(180,170,237,0.30) 0%,rgba(95,73,219,0.25) 49%,rgba(95,73,219,0.45) 50%,rgba(95,73,219,0.25) 96.72%),
		linear-gradient(to top, transparent, #9295D2 100%),
		repeating-linear-gradient( 0deg,
		rgba(168,170,205,0.60),
		rgba(168,170,205,0.60) 2px,
		hsla(246,62%,66%,1.00) 2px,
		hsla(236,42%,70%,1.00) 8px
	);
	border: 2px solid hsla(247,22%,54%,0.4);
	border-radius: 10px;
	background-color: hsla(254,64%,16%,0.10);
	box-shadow: inset 0px -8px 19px 5px hsla(237,61%,6%,0.40);
}

.themeDarkwave {
	background: linear-gradient(180deg,rgba(21,21,30,0.90) 0%,rgba(50,46,73,0.90) 100%), linear-gradient(90deg,rgba(168,165,178,0.20) 10%,rgba(26,26,35,0.76) 70%), linear-gradient(163deg,rgba(127,128,133,1.00) 12.44%,rgba(168,165,178,1.00) 38.86%,rgba(26,26,35,1.00) 41.80%,rgba(39,39,55,1.00) 87.39%);
	box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.2), inset 0px -1px 0px rgba(190, 180, 241, 0.9), inset 0px -10px 34px rgba(190, 180, 241, 0.25), inset 0px 1px 1px rgba(0, 0, 0, 0.9);
	border: 1.5px solid hsla(247,22%,54%,0.75);
}

.themeDarkwave h3 {
	color: rgba(242,157,129,1.00);
	font-family: "tw-cond";
	font-size: 200%;
}

.themeDarkwave p {
	color: rgba(223,216,246,1.00);
	font-family: "tw-bold";
}

.spacer {
  --s: 4px; /* size of the wave */
  --b: 3px; /* thickness of the line */
  --m: 1; /* curvature of the wave [0 2] */
	background: linear-gradient(90deg,rgba(233,85,43,0.00) 0.00%, rgba(123,126,191,1.00) 50%,rgba(233,85,43,0.00) 100%);
  --R: calc(var(--s)*sqrt(var(--m)*var(--m) + 1) + var(--b)/2);
  height: calc(2*var(--R));
	width: 100%;
  --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
  mask:
    radial-gradient(var(--R) at left 50% bottom calc(-1*var(--m)*var(--s)), var(--_g)) 
     calc(50% - 2*var(--s)) calc(50% - var(--s)/2 - var(--b)/2)/calc(4*var(--s)) calc(var(--s) + var(--b)) repeat-x,
    radial-gradient(var(--R) at left 50% top calc(-1*var(--m)*var(--s)),var(--_g)) 
     50% calc(50% + var(--s)/2 + var(--b)/2)/calc(4*var(--s)) calc(var(--s) + var(--b)) repeat-x;
	margin-top: 64px;
	margin-bottom: 64px;
	-webkit-box-shadow: inset 0px 5px 7px 0px rgba(61,53,100,1.00);
	box-shadow: inset 0px 5px 7px 0px rgba(61,53,100,1.00);
}

.announcement {
	background-image: linear-gradient(180deg,rgba(252,168,169,10) 0%,rgba(133,31,31,10) 42.14%,rgba(100,0,0,10) 43.01%,rgba(200,69,71,10) 96.72%);
	margin-top: -106px;
	margin-right: 0px;
	margin-bottom: 86px;
	margin-left: 0px;
	position: relative;
	z-index: 9;
	padding-top: 9px;
	padding-bottom: 14px;
	border-radius: 6px 6px 22px 22px;
	box-shadow: 0px 10px 17px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(190, 120, 121, 0.9), inset 0px 10px 14px rgba(190, 140, 171, 0.8), inset 0px -1px 1px rgba(0, 0, 0, 0.5);
	text-shadow: 0px 2px 1px #00000040;
	font-family: "tw-cond";
	font-size: 21pt;
	color: hsla(250,62%,85%,1.00);
	line-height: 100%;
	left: 0px;
	right: 0px;
}

/* adjust things to fit different screensizes ew gross! */

@media (max-width : 499px ) and ( min-width : 0px ) { 
	/* you're gonna hurt your eyes if you read this...! */
	#mainNavBar { height: 30px; } 
	.navButton { font-size: 85%; }
}

@media (max-width : 828px ) and ( min-width : 500px ) { 
	/* making text sizes smaller... */
	#mainNavBar { height: 40px; } 
	.navButton { font-size: 110%; }
}

@media (max-width : 828px ) and ( min-width : 0px ) { 
	.bannerBackground-desktop { display: none; width: 0; }
	.bannerBackground-mobile { margin-top: -100px; height: 225px;}
	.bannerMascot { width: 12%; height:auto; margin-top: -115px; margin-left: -5px; z-index:0}
	.bannerLogo {
	width: 200px;
	top: 30px;
	left: 0px;
	right: 0px;
	align-content: center;
	align-self: center;
	margin: auto;
	display: inline;
	}
	.siteBoundries { border: none; }
	.siteContainer { width: 100%; left: 0px; right: 0px; padding: 0px; margin: 0px; } 
	/* mobile navbar */
	#mainNavBar { border-radius: 0px; justify-content: center; margin: 0; z-index: 99;
	width: 100%; top: -170px; left: 0;} 
	#mainNavSpace {display: none; }
}

@media ( max-width : 1050px ) and (min-width : 829px ){ 
	.bannerBackground-desktop { display: none; width: 0; }
	.bannerBackground-mobile { display: inline-block; height: 225px; }
	/* switch out banner styles for optimized small-scale */
	.bannerContent { width: 4%; height: 4%; padding: 0px;}
	.bannerMascot { width: 95px; margin-top: 84px; margin-left: -340px;}
	.bannerLogo {width: 245px; position: absolute; margin-top: 64px; margin-left: -220px; }
	.siteBoundries { width: 800px; }
	#mainNavBar { margin: -164px -20px 0px -20px; }
}

@media (min-width: 1051px) {
	.bannerBackground-mobile { display: none; }
}

/* from here, upwards, begin "mobile-izing" */

@media (max-width: 1150px) and (min-width: 1051px) { 
	.bannerContent { width: 100%; height: 100%; padding: 35px; }
}

/* -- end adjust site widths */

