/* -------------------- 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;
}

html, body {
  height: 100%;
  margin: 0;
}

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: 0px -0.3px 0.2px #323241, 0.0px 0.5px 0.1px #BFC1EB;
	line-height: 1.4;
	text-size: 18px;
}

.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: 19px;
	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: 850px;
	margin: auto;
	position: static;
	padding-top: 32px;
	right: 0px;
	left: 0px;
}

.contentFullWidth {
	margin: auto;
	position: static;
	padding-top: 32px;
	right: 0px;
	left: 0px;
}

.titleCard {
	font-size: 4.3rem;
	font-weight: 100;
	text-align: left;
	margin-bottom: 30px;
	margin-top: -25px;
	padding: 5px 30px;

	text-shadow: 0px 2px 3px #00000040;
	border-radius: 10px;
}

.titleCard p {
	margin-bottom: -10px;	
}

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

.contentBox.tab {
	display: inline-block;
	position: absolute; /* ensures tab is positioned relative to contentBox */
	top: -33px;
	left: 0;
	padding-top: 6px;
	padding-right: 0px;
	padding-left: 16px;
	padding-bottom: 24px;
	font-family: "tw-cond";
	font-size: 21pt;
	line-height: 1.2;
	color: hsla(250, 62%, 85%, 1.0);
	text-align: left;
	text-shadow: 0px 2px 1px #00000040;
	white-space: nowrap;
	background: linear-gradient(
		180deg,
		rgba(107, 86, 223, 0.1) 0%,
		rgba(107, 86, 223, 0.1) 30%,
		rgba(85, 60, 218, 0.2) 32%,
		rgba(85, 60, 218, 0.3) 50%,
		hsla(246, 60%, 72%, 0.3) 100%
	);
	box-shadow: inset 0px 2px 2px rgba(190, 180, 241, 0.9),
		inset 0px 20px 20px rgba(190, 180, 241, 0.22);
	border-radius: 14px 14px 0px 0px;
	z-index: 2;
	height: auto;
	margin-left: 14px;
}

.contentBox.body {
	position: relative;
	z-index: 4;
	margin-top: 0px;
	margin-left: 10px;
	margin-right: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: left;
	padding:1.5rem;
	text-wrap: balance;
	border-radius: 8px;
}


/* blogpost things */

.blogpost {
	position: relative;
	margin-top: 38px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 72px;
	padding-top: 1rem;
	padding-right: 1rem;
	padding-left: 1rem;
	padding-bottom: 1rem;
	text-align: left;
}

.blogpostTitle {
	padding-top: 0.5rem;
	padding-right: 1rem;
	padding-left: 1.8rem;
	padding-bottom: 0.5rem;
	border-radius: 10px;
	display: inline-block;
	font-size: 21pt;
	line-height: 1.2;
	color: hsla(251,24%,13%,1.00);
	text-shadow: 0px 2px 2px #00000040;
	white-space: nowrap;
	box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1), inset 0px 1px 0px rgba(190, 180, 241, 0.8), inset 0px 10px 14px rgba(190, 180, 241, 0.2), inset 0px -1px 1px rgba(0, 0, 0, 0.3);
	font-weight: bolder;
}

.blogpostDate {
	margin-top: 0.5rem;
	font-size: 0.9rem;
	font-family: "tw-bold";
	color: hsla(252,19%,31%,1.00);
	white-space: nowrap;
	padding-bottom: 0px;
	position: relative;
	/* bottom: -8px; */
}

.blogpostLineHorizontal {
	margin-top: 0.5rem;
	width: 100%;
	--s: 7px; /* size of the wave */
	--b: 3px; /* thickness of the line */
	--m: 1; /* curvature of the wave [0 2] */
	--R: calc(var(--s)*sqrt(var(--m)*var(--m) + 1) + var(--b)/2);
	height: calc(2*var(--R));
	--_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;
	background: linear-gradient(90deg,rgba(233,85,43,0.00) 0.00%, rgba(35,32,52,0.50) 3%, rgba(35,32,52,0.50) 97%, rgba(233,85,43,0.00) 100%);
	position: relative;
	/* bottom: -8px; */
}

.blogpostHeader {
  	display: flex;
  	align-items: center;
  	gap: 1rem;
  	margin-bottom: 1.0rem;
}

.blogpostContentWrapper {
	display: flex;
}

.blogpostContent {
	margin-top: 1rem;
	line-height: 1.7;
	flex: 1;
  	align-items: stretch;
  	padding-right: 20px;
}

.blogpostContent p {
	color: hsla(251,24%,23%,1.00);
	font-size: 110%;
	line-height: 1.35;
}

.blogpostContent h2 {
	color: hsla(0,0%,0%,1.00);
}

.blogpostFooter {
	text-align: right;
	border-top-width: thin;
	border-top-style: dashed;
	margin-top: 20px;
	padding-top: 8px;
}

.blogpostFooter a {
	text-decoration: none !important;
	right: 0px;
	position: relative;
	transition-duration: 0.1s;
	letter-spacing: 0px;
	color: darkblue;
}

.blogpostFooter a:hover {
	right: -5.5px;
	position: relative;
	letter-spacing: 1px;
	color: rgba(243,97,54,1.00);
	text-decoration: underline !important;
}

.blogpostLineVertical {
	--s: 7px; /* size of the wave */
	--b: 3px; /* thickness of the line */
	--m: 1; /* curvature of the wave [0 2] */
	--R: calc(var(--s)*sqrt(var(--m)*var(--m) + 1) + var(--b)/2);
	width: calc(2*var(--R));
	height: auto;
	--_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
	mask:
	radial-gradient(var(--R) at top 50% right calc(-1*var(--m)*var(--s)), var(--_g)) 
     calc(50% - var(--s)/2 - var(--b)/2) calc(50% - 2*var(--s))/calc(var(--s) + var(--b)) calc(4*var(--s)) repeat-y,
    radial-gradient(var(--R) at top 50% left calc(-1*var(--m)*var(--s)),var(--_g)) 
     calc(50% + var(--s)/2 + var(--b)/2) 50%/calc(var(--s) + var(--b)) calc(4*var(--s)) repeat-y;
	background: linear-gradient(180deg,rgba(233,85,43,0.00) 0.00%, rgba(35,32,52,0.50) 3%, rgba(35,32,52,0.50) 60%, rgba(233,85,43,0.00) 100%);
	margin-right: 1rem;
	object-fit: contain;
	align-self: stretch;
}


/* footer */


.footer {
	text-align: center;
	background-color: hsla(252,77%,12%,0.78);
	margin-top: 162px;
	padding: 40px 10px;
	color: #7E7E7E;
	font-size: small;
	background-image: linear-gradient(180deg,rgba(44,38,88,1.00) 0%,rgba(88,80,145,1.00) 8%,rgba(44,38,88,1.00) 10%,rgba(54,47,106,1.00) 80%,rgba(54,47,106,1.00) 96%,rgba(18,10,44,1.00) 100%);
	box-shadow: inset 0px 2px 4px #BCBDD8;
	font-family: 'MS UI Gothic', Arial, sans-serif;
	text-shadow: none;
}

.footer a {
  	color: #aaa;
	text-decoration: none;
}

.footer a:hover {
  	color: #fff;
	text-decoration: underline;
}

.footerLinks {
 	margin-top: 20px;
	margin-bottom: -20px;
  	display: flex;
  	justify-content: center;
  	gap: 20px;
  	flex-wrap: wrap;
}

/* errors */

.errorpicture {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 40px;
	width: 100%;
	height: auto;
	display: block
}


/* ========= 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,1) 0%,rgba(195,183,239,0.85) 49%,rgba(190,180,237,0.85) 50%,rgba(155,153,209,0.85) 100%),
		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) 6px,
		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 -2px 4px 1px hsla(237,61%,6%,0.20);
	color: #222;
}

.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 3px 6px 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(255,225,215,1.00);
	font-family: "tw-cond";
	font-size: 200%;
}

.themeDarkwave p {
	color: rgba(223,216,246,0.70);
	font-size: 85%;
	line-height: 1.8;
}

.spacer {
	--s: 7px; /* 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;
	box-shadow: inset 0px 5px 7px 0px rgba(61,53,100,1.00);
}

.announcementUrgent {
	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: -48px;
	margin-right: 0px;
	margin-bottom: 68px;
	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;
}

.announcementConstruct {
	background-image: repeating-linear-gradient( 45deg,
		rgba(255, 102, 0, 0.1),
		rgba(255, 102, 0, 0.2) 10px,
		rgba(77, 77, 77, 0.2),
		rgba(77, 77, 77, 0.3) 20px),
		linear-gradient(180deg,rgba(90,90,90,10) 0%,rgba(230,230,230,10) 42.14%,rgba(190,190,190,10) 43.01%,rgba(50,50,50,10) 96.72%);
	margin-top: -48px;
	margin-right: 0px;
	margin-bottom: 68px;
	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(150, 150, 150, 0.9), inset 0px 10px 14px rgba(255, 194, 153, 0.5), inset 0px -1px 1px rgba(0, 0, 0, 0.5);
	text-shadow: 0px 2px 2px rgb(77, 31, 0);
	font-family: "tw-cond";
	font-size: 21pt;
	color: 77, 31, 0;
	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%; }
	.content { max-width: 300px; }
}

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

@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: 45px; margin-left: -5px; z-index:0}
	.bannerLogo {
	width: 200px;
	top: 50px;
	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; z-index: 99;
	width: 100%; top: 21px; left: 0; margin: 0; } 
	#mainNavSpace {display: none; }
	.mainHeader { height: 60px; }
	.blogpostContent { font-size: 10px; }
	.blogpostTitle { font-size: 16px; }
	.blogpostDate {font-size: 10px; }
}

@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-top: -164px;
	margin-right: -20px;
	margin-left: -20px;
	margin-bottom: 36px;
}
	.content { max-width: 600px; }
	.blogpostContent { font-size: 12px; }
	.blogpostTitle { font-size: 24px; }
	.blogpostDate {font-size: 14px; }
}

@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 */