/* built on a lot of hope, dreams, sweat, and tears. mostly using w3schools and browsing around the backend of various neocities websites
that looked interesting to me. you can see a running tag of those in the 'about' section of the site. if you're looking in here to try and
figure out the method to my madness, i've attempted to give at least a minor amount of documentation to every tag...even if it might not behind
super helpful. good luck on building your own page!*/

/*-------------------*/
/*primordia pages css*/
/*-------------------*/

/*if you're wondering why the primordia css is on it's own page,*/
/*it's because i simply don't know how to override a base font*/
/*in a div, so this is how i figured to make it happen.*/

.primordiatext {
	text-align: center;
	width: auto;
	margin-top: 5%;
	color: #f6f2fc;
	font-size: 20px;
	font-family: 'Silkscreen';
	text-shadow: 1px 1px 805fe6;
} /*text for the entry page*/

.primordiabody {
	background-color: #1a132c;
} /*background color for the entry page*/

.primordiabox {
	border: 8px ridge #c0bfbb;
	margin: auto;
	color: #f2f0fa;
	background-color: #1a1038;
	padding: 8px;
	overflow: auto;
} /*basic box variant for secret pages.*/

.transcript {
  margin: auto;
  margin-top: 50px;
  margin-bottom: 50px;
  width: 35%;
  border: 2px dashed #bbbbbb;
  padding: 10px;
  background-color: #ffffff;
  color: #440055;
  position: relative;
  font-family: 'Courier New';
} /*container for various secret pages*/

/*------------------------*/
/*standard page layout css*/
/*------------------------*/

.mainbody {
	/*background-color: #3e82b2; unused, default for no gradient*/
	background-image: linear-gradient(180deg, #7080fa, #2f32eb);
	/*background-image: linear-gradient(#fa8107, #fa073c, #750eeb); ALTERNATE "VAPORWAVE" GRADIENT. I didn't like it, but you can enable it here...*/
	background-attachment: fixed;
	color: #fafdff;
}

.header {
	max-width: 1000px;
	margin: 0 auto;
	justify-content: center;
	display: flex;
}/* makes the header image work properly */

.navbar {
	max-width: 1200px;
	border: 8px ridge #c0bfbb;
	margin: 0 auto;
	height: 100px;
	background-color: #c0bfbb;
	margin-bottom: 10px;
}/*sets up the top navigation bar for major page links*/

.base { 
	margin: auto;
	margin-top: 50px;
	margin-bottom: 50px;
	border: 8px ridge #aaacad;
	padding: 10px;
	background-color: #06090a;
	color: #fafdff;
	position: relative;
	max-width: 640px;
} /* mostly antiquated, from the old version of the website. here for reference and the archivist in me */

.container {
	display: grid;
	grid-template-areas:
		"header header header"
		"leftside main rightside"
		"footer footer footer";
	grid-template-columns: 1fr 2.5fr 1fr;
	gap: 10px;
} /*w3schools is a lifesaver...note to self, apparently having extra things in the grid makes it work out properly like a trifold??? what the fuck??*/
  /*later response to self...you need to assign class'd divs to the areas!! e.g. <div class="header">, etc.*/

.wrapper {
	max-width: 1200px;
	margin: 0 auto;
} /*sets the maximum width for the content in the website. should encompass all of the elements.*/

.box {
	border: 8px ridge #c0bfbb;
	margin: auto;
	color: #fafdff;
	background-color: #428db3;
	padding: 8px;
	overflow: auto;
} /*template for a basic box used on the homepage.*/

.webtitlebar {
	border: 8px ridge #c0bfbb;
	margin: auto;
	color: #fafdff;
	background-color: #4b4dcc;
	font-family: Verdana;
	font-size: 12px;
	padding: 4px;
	border-bottom-style: none;
} /*template for the old web-like title bar*/

a:link {
 color: #4d4bcc; 
}

a:visited {
  color: #2f32eb;
}

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

@font-face {
	font-family: 'Silkscreen';
	src: url(fonts/silkscreen-regular-webfont.woff);
}

@font-face {
  font-family: 'Jersey20';
  src: url(fonts/Jersey20-Regular.ttf);
}

@font-face {
  font-family: 'Nabla';
  src: url(fonts/Nabla-Regular-VariableFont.ttf);
}

@font-face {
  font-family: 'Rubik';
  src: url(fonts/Rubik-Regular.ttf);
}

@font-face {
  font-family: 'Sixtyfour';
  src: url(fonts/Sixtyfour-Regular-VariableFont.ttf);
}

@font-face {
  font-family: 'SourceCodePro';
  src: url(fonts/SourceCodePro-Regular.ttf);
}