/* ===================== GLOBAL VARIABLES =====================
** LAYOUT
	parent = top level attributes
	child = inherits parent attributes
	margin: space outside an element, separates elements from other elements (defined by margin)
	border: space between the outter margin and the inner padding, customizable line or 'frame' that wraps the padding (defined by border)
	padding: space inside an element, used to increase clickable/visible area without changing content size (defined by padding)
	content: inner most area with text, images, etc. (defined by width & height)
	box-sizing: used to include the padding & the border (defined by witdth & height)
	z-index: controls the depth of elements, which elements appear in-front and which appear behind on another (top, 30, 20, 10, 0, bot)
	content-box = sets dimensionalization of content by content-box (no padding, no border, no margin) * DEFAULT
	border-box = sets dimensionalization of content by border-box (yes padding, yes border, no margin)
	<div> stack natrually ontop of each other.

*** FLEX
	flex = element is a block-lvel flex container ** MOST COMMON **
	ORDERING & ORIENTATION | flex-direction | flex-wrap | flex-flow | order
	ALIGNMENT | justify-content | align-item, align-self | align-content (flex-start, flex-end, center, space-between, space-around)
	FLEXIBILITY | flex-grow | flex-shrink | flex-basis | flex	

** best practice is to use the default font size of the user's device
	vw: Viewport Width (percentage of browser width, ex: 1vw = 1% of width)
	vh: Viewport Height (percentage of browser height, ex: 1vh = 1% of height)
	rem: Root em (font size of the root element of the document)

	** previous variables used for sizing:
	em: Electronic Measure (relative units to a selected font size, ex: 2in font, 1em = 2in)
	ex: Electronic X-height (relative units to the height of a font's lowercase letters)
	px: Pixel (relative pixel units dependant on type of device being used, CSS 1px = 1/96th of an inch)
	pt: Point (inherited from typography, represented in physical units: cm, mm, in, etc.)
	pc: Pica (inherited from typography, represented in physical units: cm, mm, in, etc.)

** POSITION for text, images, content, etc: (start, left, center, right, end, justify [distributed equally])
	text-align: controls text alignment
	align-items: aligns items (grid or flex) along the cross axis (vertical in a row)
	justify-content: aligns items (grid or flex) along the main axis (horizontal in a row)
	align-content: aligns multiple lines of flex/grid items along the cross axis

** FONTS
    font: size/line-height, style, variant, weight, stretch, family
	font-weight: 100 (thin), 400 (normal), 700 (bold), 900 (extra-bold)
    serif = flourishes with small details on the ends of strokes
    sans-serif = simple strokes
    monospace = every character has the same width
    cursive = emulate handwriting, flowing strokes
    fantasy = intended to be decorative

** DISPLAY
	inline = element is inline with element - like <span>
	inline-table = element displayed as an inline-level table (with horz. padding)
	inline-block = element displayed wrt to page borders, inline-row (with horz. padding + b/w spacing)
	inline-flex = element displayed wrt to page borders, inline-row (with horz. padding + vert. padding)
	inline-grid = element displayed wrt to page borders, inline-column (with horz. padding + vert. padding)
	block = element is a block element, starts a new line and takes up width - like <p>
	contents = container dissapears, making the child elements children of the element next level up
	grid = element is a block-level grid container (use divisible sizing, most common is 12)
	list-item = element behave like a list - like <li>
	table = element behaves like <table>
	table-caption = element behaves like <caption>
	table-column-group = behave like <colgroup>
	table-header-group = behave like <thead>
	table-footer-group = behave like <tfoot>
	table-row-group = behave like <tfoot>
	table-cell = behave like <td>
	table-column = behave like <col>
	table-row = behave like <tr>
	run-in = behaves by running into the next element
	absolute = 
	relative = 

COLORS:
	FFFFFF = White
	808080 = Gray, Mid
	000000 = Black
	E95133 = Tangerine // comp: 33CBE9
	00DEFF = Lowsky Blue // comp: FF2200


*/
/* ===================================================================== GLOBAL RESET ===================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===================================================================== PAGE FOUNDATION ===================================================================== */
body {
    min-height: 100vh;
    background: linear-gradient(
        to bottom,
        #380E06 0%,
        #001218 100%
    );
    overflow-x: hidden;
}
/* ===================== HEADERS ===================== */
p {
	font-size: clamp(14px, 1.2vw, 48px);
	font-style: normal; 
	font-weight: 550; 
	font-family: 'Aptos', sans-serif; 
	color: #FFFFFF;
}

h1 { 
	font-size: clamp(18px, 1.2vw, 48px);
	font-style: normal; 
	font-weight: 550; 
	font-family: 'Aptos', sans-serif; 
	color: #FFFFFF;
}

.h1org { 
	color: #E95133;
}

h2 { 
	font: 16px; 
	font-style: normal; 
	font-weight: 150; 
	font-family: 'Georgia', serif; 
	color: #808080;
}
/* ===================================================================================================================================================== */
/* ===================================================================== SECTION 1: ==================================================================== */
/* ===================================================================================================================================================== */

/* ===================== NAVIGATION BAR ===================== */
.page-nav {
	z-index: 22;
	margin: 10px auto;
	width: 100%;
	height: 100%;
    display: grid;
    grid-template-columns: 
		repeat(12, 1fr);
	align-items: center;
	align-self: center;
    justify-self: center;
}

/* ===================== LOGO ===================== */
.nav-logo-link {
    z-index: 25;
	margin-top: 15px;
	grid-column: 1 / span 2;
	display: inline;
    justify-self: center;
    align-self: center;
}
.nav-logo {
	width: clamp(32px, 2.4vw, 72px);
    height: auto;
}


/* ===================== NAV TABLE ===================== */
.nav-table {
    z-index: 25;
    margin-top: 15px;
	grid-column: 3 / span 8;  
	justify-self: center;
	align-self: center;
	
    display: grid;
	grid-template-columns:
        repeat(8, 1fr);
    place-items: center;
    
	width: 100%;

    font-family: 'digital-7', monospace;
    font-size: clamp(20px, 1.3vw, 72px);
    letter-spacing: 0.28em;
    color: #E95133;
}


/* ===================== NAV ITEMS ===================== */
.nav-item {
    z-index: 25;
	display: grid;
    align-items: center;
    justify-items: center;

    width: 100%;
    min-width: 0;

    color: #E95133;
    text-decoration: none;
    transition:
        color 0.2s ease,
        text-shadow 0.2s ease,
        transform 0.2s ease;
}

.nav-letter {
    z-index: 25;
	display: flex;
    align-items: center;
    justify-content: center;
	
    width: 100%;
	line-height: 1;

	font-size: clamp(20px, 84px);
    letter-spacing: 0.05em;
}

.nav-item:hover,
.nav-item.active {
    color: #00DEFF;
    text-shadow:
        0 0 8px rgba(93,213,255,0.7);
    transform: translateY(-2px);
}

.nav-border-left,
.nav-border-right {
    z-index: 25;
	display: flex;
	align-self: center;
    align-items: center;
    justify-content: center;

	font-size: clamp(28px, 1.2vw, 108px);
    line-height: 1;
}

/* ===================== HAMBURGER MENU ===================== */
.hamburger-menu {
    z-index: 25;
/*	grid-column: 11 / span 2;
	display: flex;  */
	grid-column: 11 / span 2;    
	justify-content: center;
	align-items: center;
	justify-self: center;
	align-self: center;

    background: none;
	border: none;
	outline: none;
	box-shadow: none;
	padding: 0;
	cursor: pointer;
	
    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
	
    font-size: clamp(26px, 2.2vw, 48px);
	color: #00DEFF;
    line-height: 1;
}

.hamburger-menu:hover {
	transform: scale(1.08);
    opacity: 0.85;
}

@media (max-width: 400px) {
    .nav-table {
        display: none;
	}
}
/* ===================================================================================================================================================== */
/* ===================================================================== SECTION 2: ==================================================================== */
/* ===================================================================================================================================================== */

/* ===================== MAIN PAGE ===================== */
.page-frame {
    z-index: 10;
    width: min(100%, 2560px);
    height: calc(100vh - 120px);

    margin: 10px auto;
    display: grid;
    grid-template-columns:
       repeat(12, 1fr);
    grid-template-rows:
       repeat(8, 1fr);
    border: 0px solid #00DEFF;
    overflow: hidden;
}

/* ===================== FRAME-GRID =====================
	   | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
	 1 | ------------------ nav-bar ----------------------  
	 2 | sr  sr  -------------------------------  sr   sr
	 3 | sr  sr
	 4 | sr  sr
	 5 | sr  sr
	 6 | sr  sr
	 7 | sr  sr  -------------------------------  sr   sr
	 8 | sr  sr  -------------------------------  sr   sr
	 9 | sr  sr  -------------------------------  sr   sr
	10 | ------------------ footer ----------------------

/* ===================== IMAGE OVERLAY ===================== */
.image-overlay {
    z-index: 8;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-position: center top;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* ===================== SIDEBARS ===================== */
.sidebarleft {
	z-index: 18;
	display: grid;
	grid-column: 1 / span 2;
	grid-row: 1 / span 8;
	border: 0px solid #00DEFF;
	background: none;
	font: 20px; 
	font-style: normal; 
	font-weight: 200; 
	font-family: 'Verdana', sans-serif; 
	color: #000000;
}
.sidebarright {
	z-index: 18;
	display: grid;
	grid-column: 12 / span 1;
	grid-row: 1 / span 8;
	border: 0px solid #00FF00;
	background: none;
	font: 20px; 
	font-style: normal; 
	font-weight: 200; 
	font-family: 'Verdana', sans-serif; 
	color: #000000;
}
/* ===================================================================================================================================================== */
/* ===================================================================== SUB-AREAS ===================================================================== */
/* ===================================================================================================================================================== */

/* ===================== ANIMATION WINDOWS ===================== */
.Ani-31x4x6 {
	z-index: 16;
	display: grid;	
	grid-column: 3 / span 4;
	grid-row: 2 / span 6;

	width: 100%;
    height: 100%;
	margin: 10px;
	border: 2px solid #E95133;
	padding: 10px;
	overflow: hidden;
}
.Ani-61x5x5 {
	z-index: 16;
	display: grid;	
	grid-column: 6 / span 5;
	grid-row: 1 / span 5;

	width: 100%;
    height: 100%;
	margin: 10px;	
	border: 2px solid #E95133;
	padding: 10px;
}
.Ani-32x8x5 {
	z-index: 16;
	display: grid;	
	grid-column: 3 / span 8;
	grid-row: 2 / span 5;

	width: 100%;
    height: 100%;
	margin: 10px;
	border: 2px solid #E95133;
	padding: 10px;
}
.Ani-62x8x5 {
	z-index: 16;
	display: grid;	
	grid-column: 6 / span 5;
	grid-row: 2 / span 6;

	width: 100%;
    height: 100%;
	margin: 10px;
	border: 2px solid #E95133;
	padding: 10px;
}
/* ===================== TEXT WINDOWS ===================== */
.Text-31x8x1 {
	z-index: 18;
	display: grid;
	grid-column: 3 / span 8;
	grid-row: 2 / span 1;

	width: 100%;
    height: 100%;
	border: 0px solid #E95133;
	padding: 10px;
}
.Text-31x3x2 {
	z-index: 18;
	display: grid;
	grid-column: 3 / span 3;
	grid-row: 2 / span 2;

	width: 100%;
    height: 100%;
	border: 0px solid #FF08FF;
	padding: 10px;
}
.Text-33x3x2 {
	z-index: 18;
	display: grid;
	grid-column: 3 / span 3;
	grid-row: 3 / span 2;

	width: 100%;
    height: 100%;
	border: 0px solid #FF08FF;
	padding: 10px;
}
.Text-71x4x2 {
	z-index: 18;
	display: grid;
	grid-column: 7 / span 4;
	grid-row: 2 / span 2;

	width: 100%;
    height: 100%;
	text-align: right;
	border: 0px solid #FF08FF;
	padding: 10px;
}
.Text-73x4x2 {
	z-index: 18;
	display: grid;
	grid-column: 7 / span 4;
	grid-row: 3 / span 2;
	
	width: 100%;
    height: 100%;
	text-align: right;
	border: 0px solid #FFFB08;
	padding: 10px;
}
.Text-75x4x2 {
	z-index: 18;
	display: grid;
	grid-column: 7 / span 4;
	grid-row: 5 / span 2;
	
	width: 100%;
    height: 100%;
	text-align: right;
	border: 0px solid #FFFB08;
	padding: 10px;
}

.Text-37x8x2 {
	z-index: 18;
	display: grid;
	grid-column: 3 / span 8;
	grid-row: 7 / span 2;
	
	width: 100%;
    height: 100%;
	border: 0px solid #FFFB08;
	padding: 10px;
}
/* ===================== CONTACT WINDOWS ===================== */
.cont-32x3x2 {
	z-index: 18;
	display: grid;
	grid-column: 3 / span 3;
	grid-row: 2 / span 2;

	width: 100%;
    height: 100%;
	border: 2px solid #5DD5FF;
}
.cont-34x3x2 {
	z-index: 18;
	display: grid;
	grid-column: 3 / span 3;
	grid-row: 4 / span 2;

	width: 100%;
    height: 100%;
	border: 2px solid #5DD5FF;
}
.cont-36x3x2 {
	z-index: 18;
	display: grid;
	grid-column: 3 / span 3;
	grid-row: 6 / span 2;

	width: 100%;
    height: 100%;
	border: 2px solid #5DD5FF;
}

/* ===================== FOOTER ===================== */
.page-footer1 {
    width: 100%;
    box-sizing: border-box;

	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 100px;

	padding: 55px 6% 60px;

	background: #0b0b0b0b;
	color: #ffffff;
	opacity: 0.65;
}

.page-footer {
	display: grid;
    	
	font-size: 12px;
    color: #FFFFFF;
	text-align: right;
	padding: 15px;
	border: none;
}

.footer-column a {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.footer-column h3 {
	margin: 9 9 22px;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: #ffffff;
}
.footer-column p {
	max-width: 300px;
	margin: 0;
	font-size: 14px;
	line-height: 1.8;
	color: #ffffff;
}

/* ===================== HOVER LINKS ===================== */
.footer-column a {
	position: relative;
	margin-bottom: 14px;
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;

	font-size: 14px;

	transition:
		color 0.2s ease,
		transform 0.2s ease;
}
.footer-column a: hover {
	color: #ffffff;
	transform: translateX(4px);
}

#mesh-container {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;

/*	transform: translate (-50%,-50%); */

	pinter-events:none;
	opacity:0.8;
}
#mesh-canvas {
	width: 100%;
	height: 100%;
	display: block;
}


/* ============================================================================================================== */
/* ================================================== PAGE-END ================================================== */
/* ============================================================================================================== */

/* ===================== PAGE-SPECIFIC IMAGES ===================== */
.page-index .image-overlay {background-image: url("img_s-asteroid_t-50.png");}

.page-operations .image-overlay {background-image: url("img_s-sandstorm_t-50.png");}

.page-wardens .image-overlay {background-image: url("img_s-crystals_t-50.png");}

.page-simulations .image-overlay {background-image: url("img_s-clouds_t-50.png");}

.page-kernels .image-overlay {background-image: url("img_s-mountains.png");}

.page-yottabytes .image-overlay {background-image: url("img_s-nebula_t-50.png");}