/*========================================*/
/*========== Font Face Settings ==========*/
/*========================================*/

@font-face {
	font-family: "Furore";
	src: url("src/font/furore.otf");
	font-display: swap;
}

@font-face {
	font-family: "Neon";
	src: url("src/font/MonaspaceNeon-Regular.otf");
	font-weight: normal;
	font-display: swap;
}

/*================================*/
/*========== Animations ==========*/
/*================================*/
@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes btn-anim {
  0%,100%  {background: linear-gradient(0deg, #666, #bbb) padding-box, linear-gradient(0deg, red, black) border-box;}
  5%  {background: linear-gradient(0deg, #666, #bbb) padding-box, linear-gradient(18deg, red, black) border-box;}
  10% {background: linear-gradient(0deg, #666, #bbb) padding-box, linear-gradient(36deg, red, black) border-box;}
  15% {background: linear-gradient(0deg, #666, #bbb) padding-box, linear-gradient(64deg, red, black) border-box;}
  20% {background: linear-gradient(0deg, #666, #bbb) padding-box, linear-gradient(72deg, red, black) border-box;}
  25% {background: linear-gradient(0deg, #666, #bbb) padding-box, linear-gradient(90deg, red, black) border-box;}
  30% {background: linear-gradient(0deg, #666, #bbb) padding-box, linear-gradient(108deg, red, black) border-box;}
  35% {background: linear-gradient(0deg, #666, #bbb) padding-box, linear-gradient(126deg, red, black) border-box;}
  40% {background: linear-gradient(0deg, #666, #bbb) padding-box, linear-gradient(144deg, red, black) border-box;}
  45% {background: linear-gradient(0deg, #666, #bbb) padding-box, linear-gradient(162deg, red, black) border-box;}
  50% {background: linear-gradient(0deg, #666, #bbb) padding-box, linear-gradient(180deg, red, black) border-box;}
  55% {background: linear-gradient(0deg, #666, #bbb) padding-box, linear-gradient(198deg, red, black) border-box;}
  60% {background: linear-gradient(0deg, #666, #bbb) padding-box, linear-gradient(216deg, red, black) border-box;}
  65% {background: linear-gradient(0deg, #666, #bbb) padding-box, linear-gradient(234deg, red, black) border-box;}
  70% {background: linear-gradient(0deg, #666, #bbb) padding-box, linear-gradient(252deg, red, black) border-box;}
  75% {background: linear-gradient(0deg, #666, #bbb) padding-box, linear-gradient(270deg, red, black) border-box;}
  80% {background: linear-gradient(0deg, #666, #bbb) padding-box, linear-gradient(288deg, red, black) border-box;}
  85% {background: linear-gradient(0deg, #666, #bbb) padding-box, linear-gradient(306deg, red, black) border-box;}
  90% {background: linear-gradient(0deg, #666, #bbb) padding-box, linear-gradient(324deg, red, black) border-box;}
  95% {background: linear-gradient(0deg, #666, #bbb) padding-box, linear-gradient(342deg, red, black) border-box;}
}

@keyframes lightup {
	0% {filter:brightness(0.8);}
	100% {filter:brightness(1.0);}
}

@keyframes button-press {
	0%{
		transform: scale(1);
	}
	100%{
		transform: scale(0.98);
	}
}

@keyframes button-lift {
	0%{
		transform: scale(1);
	}
	100%{
		transform: scale(1.1);
	}
}

@keyframes button-slight-lift {
	0%{
		transform: scale(1);
	}
	100%{
		transform: scale(1.01);
	}
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes blinkCursor {
  0%, 100% {
    color: #FFFFFF;
    text-shadow: 0 0 4px #00FF00;
  }
  50% {
    color: #009900;
    text-shadow: none;
  }
}

/*=================================*/
/*=========== Meta Reset ==========*/
/*=================================*/

html {
	scroll-padding-top: 7vw;
}

* {
	box-sizing: border-box; 
	font-family: Arial, Helvetica, sans-serif;
	scroll-behavior: smooth;
	user-select: none;
}

body {
	margin: 0;
	background-color: #000;
	background-repeat: repeat;
	background-blend-mode: normal;
	color: #fff;
}

p {
	margin: 0;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

a:visited {
	text-decoration: none;
}

button {
	border: none;
	background-color: none;
}

figure {
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    unicode-bidi: isolate;
}

main {
	display: block;
	margin: auto;
	padding-top: 10vh;
	background:url('src/background.svg'),linear-gradient(180deg, #FFFFFF00 0%, #FFFFFF00 95%, #990000 100%);
	background-size: contain;
	background-blend-mode: screen;
	background-repeat: no-repeat;
	image-rendering: -webkit-optimize-contrast;
}

section {
	margin: 0;
	padding: 0;
}

aside {
    margin: 0;
    padding: 0;
}

nav {
	position:fixed;
	width: 100%;
	display: flex;
	background:
		linear-gradient(180deg, #383838 0%, #404040 20%, #484848 40%, #505050 55%, #595959 65%, #616161 70%, #696969 75%, #797979 80%, #898d85 85%, #a5a5a5 90%, #aeb2ba 95%, #505050 100%);
	z-index: 10;
}

footer {
	display: grid;
	text-align: center;
	background-image: linear-gradient(180deg, #ffffff 0%, #dddddd 1%, #afafaf 50%, #939393 100%);
	border-width: 5px 0 0 0;
	border-color: #fff;
	border-style: outset;
}

footer::after {
	content:'© 2026 Nuke Blastfield';
	color: #999999;
	text-shadow: 0 -1px 0 #CCCCCC;
	filter: drop-shadow(0 1px 1px #666666);
	margin: 0.5em auto;
}

/*=========================================*/
/*========== Universal Component ==========*/
/*=========================================*/

/*-----------------------------------*/
/*---------- BE Scroll Bar ----------*/
/*-----------------------------------*/
/*---------- Scroll Bar ----------*/
::-webkit-scrollbar {
  width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #000000;
  width: 50%;
  border: 3px inset #ccc; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
	background:linear-gradient(0deg, #ffffff 0%, #aeb2ba 5%, #595959 15%, #cccccc 65%, #cccccc 90%, #aeb2ba 95%, #ffffff 100%);
	border: 2px outset #ccc;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background:linear-gradient(0deg, #ffffff 0%, #aeb2ba 5%, #595959 15%, #696969 65%, #898d85 90%, #aeb2ba 95%, #ffffff 100%);
}

/*Visible n hidden effect*/
.hidden {
    opacity: 0;
    transform: translateY(50px); /* Starts below its position */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Visible state with animation */
.visible {
    opacity: 1;
    transform: translateY(0); /* Slides up to normal position */
}

/*------------------------------------------*/
/*---------- Universal Navigation ----------*/
/*------------------------------------------*/

.navigation-buttons{
	display: flex;
	justify-items: center;
	margin: auto;
	padding-inline-start: 0;
	/*background:linear-gradient(0deg, #383838 0%, #595959 15%, #696969 65%, #898d85 90%, #aeb2ba 100%);
	border: 1px solid #898d85;
	border-style: outset;*/
	width: 60%;
}

.navigation-button{
	display: flex;
	flex-flow: column;
	align-items: stretch;
	margin: auto;
	background:linear-gradient(0deg, #383838 0%, #595959 15%, #696969 65%, #898d85 90%, #aeb2ba 100%);
	border: 1px outset #898d85;
	padding: 1vw;
	width: 100%;
}

.navigation-button a{
	display: block;
	margin: auto;
	align-items: center;
	text-align: center;
	font-size: 1.5vw;
	font-family: Furore, Arial, Helvetica, sans-serif;
	font-weight: 800;
	padding: 0.5em;
	color: goldenrod;
	border: 2px ridge #000000;
	background: rgb(214,4,8);
	background: radial-gradient(circle, #d60408 0%, #ce0000 10%, #9d0000 30%, #850000 50%, #710000 70%, #400000 90%, #482428 100%), url('src/red-pattern.svg');
	background-blend-mode: lighten;
	box-shadow: 0 0 5px #000000 inset;
	text-decoration: none;
	width: 100%;
}

.navigation-button a:hover{
	color: lightgoldenrodyellow;
	text-shadow: 0 0 5px gold;
	background: rgb(255,174,0);
	background: radial-gradient(circle, #ffae00 0%, #ffa500 10%, #ff8d00 30%, #ff7900 50%, #e25000 70%, #da4800 90%, #892404 100%), url('src/red-pattern.svg');
	background-blend-mode: lighten;
	box-shadow: 0 0 2px darkred inset;
}

#nav-logo {
	display: none;
}

#menu-toggle {
    display: none;
}

/*-------------------------*/
/*---------Footer----------*/
/*-------------------------*/
.footer-container {
	display: flex;
	flex-flow: row;
	width: 80%;
	margin: auto;
}

.footer-left {
	display: flex;
	flex-flow: column;
	width: 30%;
}

.footer-logo {
	display: flex;
	flex-flow: row;
	margin: 1em 0;
}

.footer-logo p{
	color: #333;
	font-size: 24px;
	font-weight: bold;
	text-align: left;
	margin: auto 0.5em;
}

.footer-right {
	display: flex;
	flex-flow: row;
	overflow: auto;
	width: 70%;
}

.footer-column {
	display: flex;
	flex-flow: column;
	width: 33%;
	margin: 1vw;
}

.footer-column p{
	padding: 0 2vw;
	color: #dddddd;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-weight: 600;
	text-align: center;
	text-shadow: 0 1px 2px #333333;
	margin: 0 auto 1em auto;
}

.footer-links {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
}

.footer-links a{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #000;
	text-decoration: none;
	line-height: 1.5em;
	text-align: center;
	margin: 0.25em auto;
}

.footer-links a:hover {
	color: #aa0000;
}

.footer-portals {
	margin: 1vw;
	padding: 0 1vw;
	background-color: #000000;
	background-image: url('src/techtree-pattern.svg');
	background-blend-mode: luminosity;
	border-radius: 12px;
	border: 3px solid #333333;
	display: flex;
	flex-flow: row-reverse;
}

.footer-portals a{
	display: flex;
	flex-flow: row;
	text-decoration: none;
	margin: auto 0;
	color: #ffffff;
	font-size: 16px;
	font-family: Arial, Helvetica Black, sans-serif;
	font-weight: 600;
	padding: 0 1vw;
	border-left: 2px solid #FFFFFF50;
	line-height: 2em;
}

.footer-portals img {
	margin: auto 4px;
	width: 24px;
	height: 24px;
}

.footer-portals a:last-child {
	border-left: none;
}

.footer-portals a:hover {
	filter: drop-shadow(0 0 4px #ff99cc) brightness(110%);
}

.language-selector {
	position: relative;
	display: inline-block;
	font-family: Arial, Helvetica, sans-serif;
	color: #00FF00;
}

/*---------- Language Selector ----------*/
.lang-selector {
	display: flex;
	flex-flow: column;
	justify-content: left;
	background-image: url(src/pattern.svg);
	border-radius: 10px;
	border: 2px inset #333;
	padding: 0.5em;
	width: 50%;
}

.selected-language {
	background: #00CC0050;
	padding: 0.25em;
	cursor: pointer;
	display: flex;
	align-items: center;
	user-select: none;
	transition: background 0.2s;
	width: 10vw;
}

.selected-language:hover {
	background: #00FF0050;
	color: #FFFFFF;
	text-shadow: 0 0 2px #00FF00;
}

.language-dropdown {
	display: none;
	position: absolute;
	left: 0;
	background: url('src/pattern.svg');
	border-radius: 0;
	box-shadow: 0 4px 10px rgba(0,0,0,0.3);
	overflow: hidden;
	z-index: 100;
}

.language-dropdown a:visited {
	color: #00FF00;
}

.language-dropdown a:hover {
	color: #FFFFFF;
	text-shadow: 0 0 2px #00FF00;
}

.language-dropdown.active {
	display: block;
	animation: fadeIn 0.15s ease;
}

.language-option {
	display: flex;
	align-items: center;
	transition: background 0.2s;
	text-decoration: none;
	color: #00FF00;
	width: 10vw;
	padding: 0.25em;
}

.language-option:hover {
	background: #009900;
	color: #FFFFFF;
}

.language-option.current-lang {
    cursor: default;
}

.language-option.current-lang::after {
    content: "\25C2";
    color:#00CC00;
    font-size: 0.9em;
    margin-left: 0.5em;
    animation: blinkCursor 0.2s ease-in-out infinite;
}

/*========== Small Note ==========*/
.small-note {
	margin-top: 0.5em;
}

.small-note p {
	font-size: 14px;
	color: #ccc;
	text-align: center;
	text-shadow: 0 2px 6px #000000;
}

.small-note a {
	font-size: 14px;
	display: inline;
	color: #CC0000;
}

.small-note a:hover {
	color: #FF0000;
}

/*===============================*/
/*========== Main Page ==========*/
/*===============================*/

/*========== Overview Module ==========*/
.overview {
	display: block;
	padding: 2vw;
	width: 60%;
	margin: auto;
}

.overview h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 72px;
	font-weight: 900;
	font-variant: small-caps;
	line-height: 0.5em;
	margin: 1em auto;
	text-align: center;
	color: #FFF;
	text-shadow: 0 0 10px #F00;
}

.overview h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 32px;
	text-align: center;
}

.overview p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.5em;
	text-align: center;
	text-shadow: 0 2px 2px #000000;
}

.cta-btn {
	display: flex;
	margin: auto;
	width: 50%;
	padding: 32px;
}

.cta-btn a{
	display: block;
	margin: auto;
	text-align: center;
	font-size: 24px;
	font-family: Furore, sans-serif;
	font-weight: 800;
	color: darkred !important;
	box-shadow: 0 0 5px white inset;
	padding: 0.5em;
	background:
		linear-gradient(0deg, #999, #ddd) padding-box, /*this is your grey background*/
		linear-gradient(0deg, red, black) border-box;
	border: 5px solid transparent;
	border-radius: 20px;
    text-decoration: none;
}

.cta-btn a:hover {
	color: yellow !important;
	text-shadow: 0 0 5px gold;
	box-shadow: 0 0 2px black inset;
	animation: btn-anim 1s infinite;
	filter: drop-shadow(0 0 10px #ff0000);
}

#lang-portal{
	color: #f90;
}

#lang-portal:hover {
	color: #fc0;
}

#lang-portal:visited {
	color: #f90;
}

/*========== Features Module ==========*/
.main-features {
	margin: 0 auto;
	padding: 1vh auto;
	width: 100%;
	background: linear-gradient(180deg,#FFFFFF00 50%, #000000 100%);
}

.main-features h2{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 48px;
	text-align: center;
}

.main-features-section {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	width: 60%;
	margin: auto;
}

.main-features-container {
	display: flex;
	flex-flow: column;
	padding: 1vw;
	width: 33%;
}

.main-features-image {
	margin: 0;
	border-radius: 0px;
	display: flex;
	flex-flow: column;
	justify-content: center;
}

.main-features-image img {
	filter: brightness(0.8);
	max-width: 100%;
	height: auto;
	margin: auto;
	border: 3px solid #900;
}

.main-features-container:hover img{
	animation-name: lightup;
	animation-timing-function: ease-in-out;
	animation-duration: 0.5s;
	animation-fill-mode: both;
	animation-direction: alternate;
	box-shadow: 0 0 5px #FF0000;
}

.main-features-container h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
	font-size: 24px;
	text-align: center;
	color: #FFFFFF;
	margin: 0.5em auto;
}

.main-features-container p {
	width: 100%;
	line-height: 1.25em;
	color:#fff;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 400;
	text-align: center;
	text-shadow: 0 1px 0 #666;
}

/*========== Factions Module ==========*/
.main-factions {
	display: flex;
	flex-flow: row;
	width: 100%;
	margin: 0 auto;
	padding: 10vh auto;
	background-color: #000000;
}

.main-factions-container {
	display: flex;
	flex-flow: column;
	width: 33%;
	margin: 0 auto;
}

.main-factions-container h2 {
	font-size: 48px;
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;
	margin: 1em 0 0 0;
	line-height: 1em;
}

.main-factions-selection {
	display: flex;
	flex-flow: row;
	justify-content: center;
	width: 100%;
	margin: auto;
}

.main-faction-button {
	background-color: #000000;
	border-radius: 50%;
	margin: 1vw;
	padding: 0;
	width: 180px;
	height: 180px;
}

.main-faction-button img{
	border: 3px solid #666;
	border-radius: 50%;
}

#gdi.main-faction-button:hover img{
	border: 3px solid #0066FF;
}

#nod.main-faction-button:hover img{
	border: 3px solid #FF0000;
}

.faction-active {
	animation-name: button-slight-lift;
	animation-duration: 0.2s;
	animation-iteration-count:1;
	animation-fill-mode: both;
}

#gdi img {
	border: 3px solid #0066FF;
}

#nod img {
	border: 3px solid #FF0000;
}

#gdi.faction-active{
	transition-duration: 0.2s;
	box-shadow: 0 0 90px 2px #0066CC;
}

#nod.faction-active {
	transition-duration: 0.2s;
	box-shadow: 0 0 90px 2px #CC0000;
}

.main-factions-description {
	width: 66%;
	margin: auto;
}

.main-faction-description {
	display: none;
	padding: 6px 12px;
	border-top: none;
	margin: auto;
	height: 436px;
	max-width: 100%;
}

.main-faction-description h3 {
	font-size: 48px;
}

.main-faction-description p {
	font-size: 18px;
	text-shadow: 0 1px 2px #000;
	width: 50%;
	line-height: 1.25em;
}

.main-faction-description a {
	display: block;
	margin: 3vh 0;
	align-items: center;
	text-align: center;
	font-size: 1.5vw;
	font-family: Furore, Arial, Helvetica, sans-serif;
	font-weight: 800;
	padding: 0.5em;
	text-decoration: none;
	width: 20%;
}

#main-allied-description.main-faction-description h3 {
	color: #FFFFFF;
	text-shadow: 0 0 20px #0066FF;
}

#main-soviet-description.main-faction-description h3 {
	color: #FFFFFF;
	text-shadow: 0 0 20px #FF0000;
}

#main-allied-description.main-faction-description a {
	color: white;
	border: 2px solid #000000;
	border-style: ridge;
	background: rgb(4, 113, 214);
	background: radial-gradient(circle, #047bd6 0%, #004cce 10%, #00479d 30%, #003c85 50%, #002f71 70%, #001740 90%, #243048 100%), url('src/blue-pattern.svg');
	background-blend-mode: lighten;
	box-shadow: 0 0 5px #000000 inset;
}

#main-allied-description.main-faction-description a:hover{
	color: #FFFFFF;
	text-shadow: 0 0 5px #0066FF;
	background: #FFFFFF;
	background: radial-gradient(circle, #bdddff 0%, #8ad8ff 10%, #00ddff 30%, #00c3ff 50%, #00a6e2 70%, #008ada 90%, #043989 100%), url('src/blue-pattern.svg');
	background-blend-mode: lighten;
	box-shadow: 0 0 2px darkblue inset;
}

#main-soviet-description.main-faction-description a {
	color: goldenrod;
	border: 2px solid #000000;
	border-style: ridge;
	background: rgb(214,4,8);
	background: radial-gradient(circle, #d60408 0%, #ce0000 10%, #9d0000 30%, #850000 50%, #710000 70%, #400000 90%, #482428 100%), url('src/red-pattern.svg');
	background-blend-mode: lighten;
	box-shadow: 0 0 5px #000000 inset;
}

#main-soviet-description.main-faction-description a:hover{
	color: lightgoldenrodyellow;
	text-shadow: 0 0 5px gold;
	background: rgb(255,174,0);
	background: radial-gradient(circle, #ffae00 0%, #ffa500 10%, #ff8d00 30%, #ff7900 50%, #e25000 70%, #da4800 90%, #892404 100%), url('src/red-pattern.svg');
	background-blend-mode: lighten;
	box-shadow: 0 0 2px darkred inset;
}

#main-allied-description.main-faction-description {
	background-image:url('src/allied-banner.avif');
}

#main-soviet-description.main-faction-description {
	background-image:url('src/soviet-banner.avif');
}

/*========== News Module ==========*/
.main-news {
	display: flex;
	flex-flow: column;
	padding: 1vw;
	width: 100%;
	margin: auto;
}

.main-news h2{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 48px;
	text-align: center;
	margin: 0.5em;
	color: #FFFFFF;
	line-height: 1em;
}

.news-section {
	padding: 0;
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	margin: auto;
}

.news-section a {
	text-align: center;
	line-height: 2em;
	color: #FFFFFF;
	font-size: 18px;
	border: 2px solid #CC000050;
	margin: 1vw;
	width: 20%;
}

.news-section a:hover {
	box-shadow: 0 0 10px #FF0000;
	animation-name: button-slight-lift;
  	animation-duration: 0.2s;
	animation-iteration-count:1;
	animation-fill-mode: both;
}

.news-section a:visited {
	color: #FFFFFF;
}

.news-container {
	display: flex;
	flex-flow: column;
	background-color: #FFFFFF25;
}

.news-container img {
	width: 100%;
	height: auto;
	aspect-ratio: 360/270;
}

.news-container time {
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	margin: 2em 1em 1em auto;
	padding: 0;
	background-color: #CC0000;
	width: 30%;
	border-radius: 20px;
	line-height: 1.25em;
}

/*========== Main CTA ==========*/
.main-cta {
	display: flex;
	flex-flow: column;
	justify-content: center;
	width: 100%;
	margin: 10vh auto 0 auto;
	background-image:url('src/cta_bg.avif');
	background-size: cover;
	background-position-y: -10vh;
}

.main-cta h2 {
	font-size: 48px;
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;
}

.main-cta p {
	font-size: 18px;
	color: #FFFFFF;
	text-align: center;
	width: 60%;
	margin: auto;
}

.main-cta-button a {
	display: block;
	margin: 5vh auto;
	align-items: center;
	text-align: center;
	font-size: 1.5vw;
	font-family: Furore, Arial, Helvetica, sans-serif;
	font-weight: 800;
	padding: 0.5em;
	color: goldenrod;
	border: 2px solid #000000;
	border-style: ridge;
	background: rgb(214,4,8);
	background: radial-gradient(circle, #d60408 0%, #ce0000 10%, #9d0000 30%, #850000 50%, #710000 70%, #400000 90%, #482428 100%), url('src/red-pattern.svg');
	background-blend-mode: lighten;
	box-shadow: 0 0 5px #000000 inset;
	text-decoration: none;
	width: 20%;
}

.main-cta-button a:hover {
	color: lightgoldenrodyellow;
	text-shadow: 0 0 5px gold;
	background: rgb(255,174,0);
	background: radial-gradient(circle, #ffae00 0%, #ffa500 10%, #ff8d00 30%, #ff7900 50%, #e25000 70%, #da4800 90%, #892404 100%), url('src/red-pattern.svg');
	background-blend-mode: lighten;
	box-shadow: 0 0 2px darkred inset;
}

.stay-connected {
	display: flex;
	flex-flow: column;
	justify-content: center;
	width: 60%;
	margin: auto;
	padding-bottom: 5vh;
}

.stay-connected h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 36px;
	text-align: center;
}

.main-social-media {
	display: flex;
	flex-flow: row;
	justify-content: center;
	width: 40%;
	margin: auto;
}

.main-social-media a {
	margin: auto;
}


.main-social-media a:hover {
	filter:drop-shadow(0 0 3px #fff);
}

.main-social-media img{
	width: 100%;
	aspect-ratio: 1/1;
}

/*===================================*/
/*========== Archives Page ==========*/
/*===================================*/
.arvhives {
	margin: 0 auto;
}

.archives h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 48px;
	text-align: center;
	margin: 1em auto 0 auto;
	color: #FFFFFF;
}

.archives p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	text-align: center;
	margin: auto;
	color: #FFFFFF;
}

.archives-board {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	margin: auto;
	padding: 10vh 0;
	width: 60vw;
}

.archives-container {
	width: 28vw;
	border: 2px solid #FFFFFF50;
	margin: 1vw;
	padding: 1em;
	background-color: #00000075;
	backdrop-filter: blur(10px);
}

.archives-container h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	text-align: center;
	color: #FFFFFF;
	margin: 0.5em auto;
}

.archives-links {
	display: flex;
	flex-flow: column;
}

.archives-links a {
	align-self: flex-start;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #FFFFFF;
	text-decoration: none;
	text-align: left;
	margin: 0.25em 1em;
}

.archives-links a:hover {
	text-decoration: underline;
	color: #FF0000;
}

.archives-links a:visited {
	text-decoration: underline;
	color: #FFFFFF;
}

/*===================================*/
/*========== Download Page ==========*/
/*===================================*/
.download {
	width: 100%;
	margin: auto;
	display: flex;
	flex-flow: column;
}

.download h1{
	font-size: 36px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	margin: 2em auto 0 auto;
}

.download h2{
	font-size: 60px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-variant: small-caps;
	text-align: center;
	margin: auto;
	color: #FFFFFF;
	text-shadow: 0 0 10px #F00;
}

.download-links {
	margin: 0 auto 5vh auto;
}

.download-buttons {
	margin: 20px auto;
	width: 60vw;
}

.download-buttons a {
	display: flex;
	flex-flow: row;
	justify-content: center;
	margin: auto;
	text-align: center;
	max-width: 30%;
	background: linear-gradient(45deg, #0ce39a, #69007f, #fc0987);
	text-decoration: none;
	text-align: center;
	font-size: 24px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 800;
	padding: 0.5em;
	color: goldenrod;
	border: 2px solid #000000;
	border-radius: 10px;
	background: rgb(214,4,8);
	background: radial-gradient(circle, #d60408 0%, #ce0000 10%, #9d0000 30%, #850000 50%, #710000 70%, #400000 90%, #482428 100%), url('src/red-pattern.svg');
	background-blend-mode: lighten;
	box-shadow: 0 0 5px #000000 inset;
	text-decoration: none;
}

.download-buttons a:hover{
	color: lightgoldenrodyellow;
	text-shadow: 0 0 5px gold;
	background: rgb(255,174,0);
	background: radial-gradient(circle, #ffae00 0%, #ffa500 10%, #ff8d00 30%, #ff7900 50%, #e25000 70%, #da4800 90%, #892404 100%), url('src/red-pattern.svg');
	background-blend-mode: lighten;
	box-shadow: 0 0 2px darkred inset;
}

#os-warning {
	display: none;
	color: #ffbf00;
	text-align: center;
}

#os-warning::before {
	content: "⚠ ";
}

.download-guide {
	background-color: #00000050;
	margin: 10vh auto;
	padding: 1em;
	backdrop-filter: blur(20px);
	width: 60vw;
	border: 1px solid #FF0000;
}

.download-guide p {
	font-size: 16px;
	line-height: 1.5em;
	color: #FFFFFF;
	margin: 1em auto;
	text-align: center;	
}

.download-guide h2 {
	font-size: 24px;
	font-variant: normal;
	color: #FFFFFF;
}

.guide-buttons {
	display: flex;
	flex-flow: row;
	justify-content: center;
	margin: 2vh auto;
	gap: 2vw;
}

.guide-button {
	font-size: 18px;
	font-weight: bold;
	color: #FF0000;
	padding: 1em;
	border-radius: 3px;
	border: 1px solid #CC0000;
	background-color: #CC000030;
	background-image: url('src/red-pattern.svg');
	background-blend-mode: luminosity;
}

.guide-button:hover {
	background-color: #FF0050;
	color: #FFFFFF;
	text-shadow: 0 0 5px #FF6666;
	box-shadow: 0 0 5px #FF000050;
}


.download-information {
	margin: 10vh auto;
	background-color: #00000050;
	backdrop-filter: blur(4px);
	border-left: 4px solid #FF0000;
	padding: 1em;
	width: 60vw;
	background-image: url('src/red-pattern.svg');
}

.download-information h2 {
	font-size: 24px;
	font-variant: normal;
	color: #FFFFFF;
}

.system-requirements {
	display: flex;
	flex-flow: row;
	font-size: 14px;
	margin: 2vh auto;
}

.system-requirements ul {
	list-style-type: square;
	list-style-position: outside;
	margin: auto;
	padding: 0;
}

.system-requirements li {
	margin: 1em auto;
}

/*================================*/
/*========== Units Page ==========*/
/*================================*/

.units {
	width: 100%;
	margin: auto;
}

.units h1{
	font-family: Arial, Helvetica Black, sans-serif;
	font-size: 72px;
	font-weight: 900;
	line-height: 1em;
	margin: auto;
	margin-top: 1em;
	margin-bottom: 1em;
	text-align: center;
	text-shadow: 0 0 10px #000000;
}

.units h2{
	font-size: 24px;
	font-family: Arial, Helvetica Black, sans-serif;
	text-align: center;
}

.faction-description {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.5em;
	margin: auto;
	width: 60%;
	background-color:#00000075;
	backdrop-filter: blur(10px);
	padding: 1em;
}

.faction-overview p{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5em;
	text-align: center;
	margin: auto;
}


/*---------- Techtree Module ----------*/
.techtree {
	display: flex;
	flex-flow: row;
	justify-content: center;
	width: 100%;
	margin: auto;
}

.techtree-container {
	display: flex;
	flex-flow: row;
	background-image: url('src/techtree-pattern.svg');
}

.techtree-tier {
	display: flex;
	flex-flow: column;
	width: 240px;
	margin: 0;
}

.techtree-tier h3 {
	text-align: center;
	width: 100%;
	margin: 0 auto;
}

.techtree-tier-content {
	display: flex;
	flex-flow: column;
}

.techtree-row {
	display: flex;
	flex-flow: row;
	width: 100%;
	margin: 0;
}

.techtree-row a {
	margin: 0;
	height: 48px;
}

.techtree-row a:hover {
	filter: brightness(1.5);
}

.techtree-row img {
	margin: 0 auto;
}

.category-container {
	margin: auto;
	padding-bottom: 5vh;
}

.unit-board {
	width: 80%;
	margin: auto;
}

.unit-container {
	display: flex;
	flex-flow: column;
	margin: 10px auto;
	width: 80%;
	background-color: #383838;
	box-shadow: 0 0 12px #000;
}

.unit-container a{
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 600;
	text-decoration: underline;
}

.unit-container-name {
	display: flex;
	flex-flow: row;
	margin: 1vh auto 0 auto;
	padding: 0.5em;
	background-color: #FFFFFF30;
	width: 50%;
}

.unit-container-name h3 {
	width: 80%;
	margin: auto 5em;
}

.unit-container-info {
	display: flex;
	flex-flow: row;
	margin: 2vh auto;
	padding: 0 0.5vw;
	width: 100%;
	justify-content: center;
}

.unit-container-info img{
	margin: 0 0.5vw 0 0;
	width: 360px;
}

.unit-container-desc {
	display: flex;
	flex-flow: column;
	margin: 0 0.5vw;
	width: calc((100% - 360px)/2);
}

.unit-container-desc p {
	font-size: 16px;
	background-color: #CCCCCC50;
	padding: 1em;
}

.unit-container-desc ul {
	list-style-type: square;
	list-style-position: outside;
}

.unit-container-desc li {
	font-size: 16px;
}

.unit-container-stats {
	display: flex;
	flex-flow: column wrap;
	margin: 0 0.5vw;
	width: calc((100% - 360px)/2);
}

.unit-container-stats p {
	padding: 0.25em;
	border: 1px solid #CCCCCC;
	background-color: #99999950;
	font-size: 14px;
}

.unit-container-left {
	width: 28%;
	padding: 12px;
}

.unit-container-left img{
	border-radius: 20px;
	max-width: 360px;
	aspect-ratio: 4 / 3 !important;
}

.unit-container-mid{
	display: grid;
	width: 15%;
	padding: 5% 0;
}

.unit-container-mid h3{
	padding: 0.5em;
	margin: auto;
	text-align: center;
	font-size: 24px;
}

.unit-container-mid img{
	display: block;
	position: relative;
	margin: auto;
	max-width: 60px;
	/*margin-top: calc(50% - 24px);*/
	margin: auto;
}

.unit-container-right{
	display: grid;
	width: 57%;
}

.unit-container-right p{
	font-size: 18px;
	padding: 1em;
	line-height: 1.5em;
	text-align: left;
}

.unit-container-right ul{
	text-align: left;
	columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

.unit-container-right li{
	font-size: 14px;
	font-weight: 400;
	font-family: Arial, Helvetica, sans-serif;
}

.unit-container-right a{
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
}

/*------------------------------*/
/*---------- Map Page ----------*/
/*------------------------------*/
.maps {
	margin: auto;
}

.maps h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 48px;
	text-align: center;
	margin: 1em auto 0 auto;
	color: #FFFFFF;
}

.maps p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	text-align: center;
	margin: auto;
}

.maps h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-weight: bold;
	text-align: center;
	margin: auto;
}

.maps h3{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-weight: normal;
	text-align: left;
	margin: auto;
}

.map-section {
	display: flex;
	flex-flow: row;
	width: 80%;
}

.map-container {
	width: 33%;
	margin: 1em 0;
	background-color: #000;
	background: linear-gradient(180deg, #ffffff75 0%, #99999950 50%, #00000025 100%);
	padding: 0.5em;
	border: 2px solid #333333;
}

.map-container img{
	max-width: 100%;
	height: auto;
}

.map-container h4{
	font-size: 18px;
	font-weight: normal;
	text-align: left;
	margin: 0.5em auto;
	line-height: 1.25em;
}

.map-container:hover {
	border:2px solid #f00;
}
.maps-section {
	display: flex;
	flex-flow: column;
	width: 80%;
	margin: auto;
}

.map-type {
	display: none; /* Hidden by default */
}

/* The "show" class is added to the filtered elements */
.show-maps {
	display: flex;
	flex-flow: row wrap;
}

.map {
	display: flex;
	flex-flow: row;
	width: 100%;
	background-color: #333333;
	margin: 10px;
	padding: 12px;
}

.map-image {
	display: flex;
	flex-flow: row;
	margin: auto;
	width: 50vw;
	height: 50vh;
	background: url('src/pattern.svg'),radial-gradient(circle,#00FF00,#00CC00,#000000);
	background-blend-mode: luminosity;
	border: 2px ridge #CCC;
}

.map-image img {
	margin: auto;
	width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.map-description {
	display: flex;
	flex-flow: column;
	width: 50%;
	margin: 10px;
}

.map-description h3 {
	font-size: 24px;
	font-weight: bold;
	margin: 0 1vw;
}

.map-description p {
	font-size: 16px;
	margin: 1em 1vw;
	text-align: left;
}

.map-info-table {
	margin: auto;
}

.map-info-table table {
	border: 1px solid #fff;
  	border-collapse: collapse;
  	border-width: 1px;
}

.map-info-table tr {
    margin: auto;
}

.map-info-table th {
    background-color:#993333;
    text-align: center;
	padding: 0 1em;
}

.map-info-table td {
    background-color:#08080850;
    text-align: left;
    line-height: 1.5em;
	padding: 0 1em;
}

/* Style the buttons */
.map-selector {
	display: flex;
	flex-flow: row;
	justify-content: center;
	background:linear-gradient(0deg, #383838 0%, #595959 15%, #696969 65%, #898d85 90%, #aeb2ba 100%);
	border: 1px outset #898d85;
	margin: 10vh 0 auto 0;
}

.map-selector-button {
	display: flex;
	flex-flow: row;
	justify-content: center;
	background-color: #333333;
	border: none;
	padding: 0.5em;
	font-size: 16px;
	margin: 0.5em;
	width: 12vw;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: goldenrod;
	border: 2px ridge #000000;
	background: rgb(214,4,8);
	background: radial-gradient(circle, #d60408 0%, #ce0000 10%, #9d0000 30%, #850000 50%, #710000 70%, #400000 90%, #482428 100%), url('src/red-pattern.svg');
	background-blend-mode: lighten;
	box-shadow: 0 0 5px #000000 inset;
}

/* Add a light grey background on mouse-over */
.map-selector-button:hover {
	color: lightgoldenrodyellow;
	text-shadow: 0 0 5px gold;
	background: rgb(255,174,0);
	background: radial-gradient(circle, #ffae00 0%, #ffa500 10%, #ff8d00 30%, #ff7900 50%, #e25000 70%, #da4800 90%, #892404 100%), url('src/red-pattern.svg');
	background-blend-mode: lighten;
	box-shadow: 0 0 2px darkred inset;
}

/* Add a dark background to the active button */
.selected-button {
	color: lightgoldenrodyellow;
	text-shadow: 0 0 5px gold;
	background: rgb(255,174,0);
	background: radial-gradient(circle, #ffae00 0%, #ffa500 10%, #ff8d00 30%, #ff7900 50%, #e25000 70%, #da4800 90%, #892404 100%), url('src/red-pattern.svg');
	background-blend-mode: lighten;
	box-shadow: 0 0 2px darkred inset;
}

/*===============================*/
/*========== Blog List ==========*/
/*===============================*/
.blog-list {
	margin: auto;
}

.blog-list h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 48px;
	text-align: center;
	margin: 1em auto 0 auto;
	color: #FFFFFF;
}

.blog-list p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	text-align: center;
	margin: auto;
}

.blog-list h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 36px;
	text-align: center;
	line-height: 1.5em;
	color:#fff;
	margin: 5vh auto 0 auto;
}

.blog-category {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	margin: auto;
	width: 100%;
}

.blog-container {
	display: flex;
	flex-flow: column;
	border-radius: 20px;
	border: 5px outset #333;
	padding: 0.5vw;
	margin: 0.5vw;
	background:linear-gradient(0deg, #c8c8c8 0%, #ffffff 15%, #c8c8c8 65%, #adadad 90%, #939393 100%);
}

.blog-container:hover {
	animation-name: button-slight-lift;
	animation-duration: 0.2s;
	animation-iteration-count:1;
	animation-fill-mode: both;
	box-shadow: 0 0 10px #f00;
}

.blog-container img{
	margin: auto;
	max-width: 100%;
	height: auto;
	padding: 0;
	border-radius: 12px;
	border: 4px inset #333;
	aspect-ratio: 4/3;
}

.blog-container h3 {
	display:block;
	margin: 0.5em;
	max-width: 90%;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 18px;
	text-align: center;
	line-height: 1em;
	color: #333;
}

.dots {
	display: flex;
	flex-flow: row;
	justify-content: right;
	margin: 0 1vw;
}

.dot {
	height: 15px;
  width: 15px;
  margin: 10px 5px;
	background: radial-gradient(circle, #c00 0%, #c00 50%, #600 100%);
	border-radius: 50%;
	border: 2px inset #333;
}

.blog-container:hover .dot {
	background: radial-gradient(circle, #fc0 0%, #c00 75%, #c00 100%);
}

/*===============================*/
/*========== Blog Page ==========*/
/*===============================*/

.blog {
	margin: auto;
}

.blog h1 {
	font-size: 48px;
	text-align: center;
	margin-bottom: 3vw;
	margin-top: 10vh;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	text-shadow: 0 1px 1px #000;
}

.blog-main {
	display: flex;
	flex-flow: row;
	padding: 0;
	margin: auto;
}

.blog-info {
	display: flex;
	justify-content: center;
}

.update-time {
	display: inline-flex;
	margin: auto;
	padding: 0.25em;
	background:linear-gradient(0deg, #c8c8c8 0%, #ffffff 15%, #c8c8c8 65%, #adadad 90%, #939393 100%);
	border: 4px outset #ddd;
	box-shadow: 0 0 24px #000;
}

.update-time p{
	background: linear-gradient(-45deg, #000000 0, #333333 50%, #000000 100%), url(src/techtree-pattern.svg);
	background-blend-mode: luminosity;
	border-radius: 3px;
	margin: 0.25em;
	padding: 0.5em;
	font-family: monospace;
	font-size: 14px;
	font-weight: normal;
	color: #00ff00;
	text-shadow: 0 0 3px #00cc00;
	user-select: text;
	text-align: center;
}

.blog-left {
	width: 20%;
	padding: 1vw;
}

.blog-right {
	width: 20%;
	padding: 1vw;
}

.chap-nav {
	position: sticky;
	top: 7vw;
	display: block;
	width: 100%;
	margin: auto;
	background:linear-gradient(0deg, #c8c8c8 0%, #ffffff 15%, #c8c8c8 65%, #adadad 90%, #939393 100%);
	border: 4px outset #ddd;
	box-shadow: 0 0 24px #000;
}

.chap-nav p{
	font-size: 24px;
	font-family: Furore, sans-serif;
	text-align: center;
	color: #000;
}

.chaps {
	background: linear-gradient(-45deg, #000000 0, #333333 50%, #000000 100%), url(src/techtree-pattern.svg);
	background-blend-mode: luminosity;
	border-radius: 5px;
	margin: 0.5em;
	padding: 0.5em;
}

.chaps ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.chaps a {
	text-decoration: none;
	font-family: monospace;
	font-size: 10px;
	display: block;
	color: #0f0;
	margin: 0.5em;
	padding: 0.5em;
	text-shadow: 0 1px 1px #090;
}

.chaps a:before {
	content: ' \220E';
	margin-right: 0.5em;
}

#h2 {
	font-size: 14px;
	font-weight: 700;
}

#h3 {
	font-size: 12px;
	font-weight: normal;
	margin-left: 4em;
	padding: 0.25em;
}

.chaps a:hover {
	display: block;
	color: #fff;
	background-color:#00cc00;
	border-radius: 5px;
	box-shadow: 0 0 5px #00cc0060;
}

.blog-cta {
	position: sticky;
	top: 7vw;
	display: flex;
	flex-flow: column;
	width: 100%;
	margin: auto;
	padding-top: 10vw;
	background: url('src/images/blogs/eva.avif') no-repeat, url('src/blue-pattern.svg');
	background-size: cover;
	background-blend-mode: screen;
	border: 4px ridge #ccc;
	box-shadow: 0 0 24px #000;
}

.blog-cta p{
	text-align: center;
	font-family: monospace;
	font-size: 14px;
	font-weight: bold;
	text-shadow: 0 1px 1px #0c0;
	margin: 1em 0;
	color: #0f0;
	background: linear-gradient(-45deg, #000000 0, #333333 50%, #000000 100%), url(src/techtree-pattern.svg);
	background-blend-mode: luminosity;
	border-radius: 5px;
	margin: 0.5em;
	padding: 0.5em;
}

.blog-cta a{
	display: block;
	margin: 0.5em;
	align-items: center;
	text-align: center;
	font-size: 16px;
	font-family: Furore, Arial, Helvetica, sans-serif;
	font-weight: 800;
	padding: 0.5em;
	color: goldenrod;
	border: 2px solid #000000;
	border-style: ridge;
	background: rgb(214,4,8);
	background: radial-gradient(circle, #d60408 0%, #ce0000 10%, #9d0000 30%, #850000 50%, #710000 70%, #400000 90%, #482428 100%);
	box-shadow: 0 0 5px #000000 inset;
	text-decoration: none;
	width: auto;
}

.blog-cta a:hover{
	color: lightgoldenrodyellow;
	text-shadow: 0 0 5px gold;
	background: rgb(255,174,0);
	background: radial-gradient(circle, #ffae00 0%, #ffa500 10%, #ff8d00 30%, #ff7900 50%, #e25000 70%, #da4800 90%, #892404 100%);
	box-shadow: 0 0 2px darkred inset;
}

.blog-cta img {
	max-width: 90%;
	height: auto;
	margin: 3px auto;
	border-radius: 10px;
	border: 5px solid #000;
}

.blog-content {
	display: block;
	margin: 1vw auto;
	padding: 2vw;
	width: 60%;
	background-color: #333333;
	box-shadow: 0 0 12px #000;
}

.blog-content p{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 300;
	color: #ffffff;
	line-height: 1.5em;
	margin-top: 0.5em;
}

.blog-content b{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
}

.blog-content ul{
	list-style-position: inside;
  list-style-type: disc;
  margin: 0.5em 0;
  padding: 0;
}

.blog-content ol {
    list-style-position: inside;
    margin: 0.5em 0;
    padding: 0;
}

.blog-content li{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5em;
	margin: 0.5em 0;
}

.blog-content li > ul {
    list-style-position: inside;
    list-style-type: circle;
    margin: 0;
    margin-left: 1em;
    padding: 0;
}

.blog-content li > ol {
    list-style-position: inside;
    list-style-type: lower-alpha;
    margin: 0;
    margin-left: 1em;
    padding: 0;   
}

.blog-content img{
	display: block;
	margin: 1em auto;
	width: auto;
	max-width: 100%;
	height: auto;
}


.blog-content code {
	font-family: Neon;
	font-size: 14px;
	font-weight: normal;
	border: 1px solid #999;
	border-radius: 4px;
	background-color: #080808;
	padding: 0.2em 0.4em;
	margin: auto 0.2em;
	user-select: text;
	text-align: center;
	line-height: 1em;
}


.code-presentation {
	display: inline-block;
	background-image:url("src/pattern.svg");
	background-blend-mode: lighten;
	margin: 1em 0;
	padding: 1em;
	border-radius: 10px;
	border: 1px solid #fff;
	user-select: text;
}

.code-presentation p,del {
	font-family: Neon, monospace;
	font-size: 14px;
	font-weight: normal;
	color: #00ff00;
	text-shadow: 0 0 3px #00cc00;
	user-select: text;
}

.code-presentation ::selection {
  color: #ffffff;
  background: #009900;
  text-shadow: 0 0 2px #00ff00;
}

.blog-content h2{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: black;
	font-size: 28px;
	text-align: left;
	color:#fff;
	margin-bottom: 0.25em;
	background-color: #ffffff25;
	border-left: 4px solid #c00;
	padding: 0 0.5em;
}
.blog-content h3{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 22px;
	text-align: left;
	color:#fff;
	line-height: 1.25em;
	margin-bottom: 0.25em;
	margin-top: 1em;
}
.blog-content h4{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 18px;
	text-align: left;
	color:#fff;
	line-height: 1.25em;
	margin-block-start: 0.5em;
	margin-block-end: 0.25em;
}

.blog-content a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 300;
	color: #fff;
	text-decoration: underline;
}

.blog-content a:hover {
	color: #f00;
}

.blog-content figcaption {
	font-family: monospace;
	font-size: 14px;
	background-color: #333;
	text-align: center;
	border: 1px dashed #fff;
	width: 20%;
	margin: auto;
	padding: 0.5em;
}

.general-table {
	margin:5vh 0;
	overflow-x: auto;
}

.general-table table, th, tr, td {
	border: 1px solid #fff;
  	border-collapse: collapse;
  	padding: 0.5em;
  	border-width: 1px;
}

.general-table tr {
    margin: 0.5em;
}

.general-table th {
    background-color:#993333;
    padding: 1em;
    text-align: center;
}

.general-table td {
    background-color:#08080850;
    padding: 1em;
    text-align: center;
    line-height: 1.5em;
}

.cta-btn {
	display: flex;
	margin: auto;
	width: 50%;
	padding: 32px;
}

.cta-btn a{
	display: block;
	margin: auto;
	text-align: center;
	font-size: 24px;
	font-family: Furore, sans-serif;
	font-weight: 800;
	color: darkred !important;
	box-shadow: 0 0 5px white inset;
	padding: 0.5em;
	background:
		linear-gradient(0deg, #999, #ddd) padding-box, /*this is your grey background*/
		linear-gradient(0deg, red, black) border-box;
	border: 5px solid transparent;
	border-radius: 20px;
    text-decoration: none;
}

.cta-btn a:hover {
	color: yellow !important;
	text-shadow: 0 0 5px gold;
	box-shadow: 0 0 2px black inset;
	animation: btn-anim 2s infinite;
}

/*----------=================================----------*/
/*----------========== Smart Phone ==========----------*/
/*----------=================================----------*/

@media only screen and (max-width: 720px) {
	/*=================================*/
	/*=========== Meta Reset ==========*/
	/*=================================*/

	html {
		scroll-padding-top: calc(2vh + 40px);
	}

	* {
		box-sizing: border-box; 
		font-family: Arial, Helvetica, sans-serif;
		scroll-behavior: smooth;
		user-select: none;
	}

	body {
		margin: 0;
		background-color: #000;
		background-repeat: repeat;
		background-blend-mode: normal;
		color: #fff;
	}

	main {
		display: block;
		margin: auto;
		padding-top: calc(2vh + 40px);
		width: 100%;
		background:url('src/background-animless.svg'),linear-gradient(180deg, #FFFFFF00 0%, #FFFFFF00 95%, #990000 100%);
		background-blend-mode: screen;
		background-repeat: no-repeat;
		background-size: 1920px;
		background-position: 50% 0;
	}

	nav {
		z-index: 10;
		position: fixed;
	}

	/*=======================================*/
	/*========== Universal Modules ==========*/
	/*=======================================*/

	/*========== Navigation ==========*/
	.navigation-buttons{
		display: flex;
		position: fixed;
		top: calc(2vh + 40px);
		right: 0;
		flex-flow: column;
		justify-items: center;
		margin: 0;
		padding-inline-start: 0;
		width: 100%;
        overflow: hidden;
        visibility: hidden;
		transition: 
			opacity 0.3s ease-out,
			transform 0.3s ease-out, 
			visibility 0s 0.3s;
		opacity: 0;
		transform: translateX(100px);
	}

	.navigation-button{
		display: flex;
		flex-flow: column;
		align-items: stretch;
		margin: auto;
		background:linear-gradient(0deg, #383838 0%, #595959 15%, #696969 65%, #898d85 90%, #aeb2ba 100%);
		border: 1px outset #898d85;
		padding: 1vh;
		width: 100%;
	}

	.navigation-button a{
		display: block;
		margin: auto;
		align-items: center;
		text-align: center;
		font-size: 2vh;
		font-family: Furore, Arial, Helvetica, sans-serif;
		font-weight: 800;
		padding: 0.5em;
		color: goldenrod;
		border: 2px ridge #000000;
		background: rgb(214,4,8);
		background: radial-gradient(circle, #d60408 0%, #ce0000 10%, #9d0000 30%, #850000 50%, #710000 70%, #400000 90%, #482428 100%), url('src/red-pattern.svg');
		background-blend-mode: lighten;
		box-shadow: 0 0 5px #000000 inset;
		text-decoration: none;
		width: 100%;
	}

	.navigation-button a:hover{
		color: lightgoldenrodyellow;
		text-shadow: 0 0 5px gold;
		background: rgb(255,174,0);
		background: radial-gradient(circle, #ffae00 0%, #ffa500 10%, #ff8d00 30%, #ff7900 50%, #e25000 70%, #da4800 90%, #892404 100%), url('src/red-pattern.svg');
		background-blend-mode: lighten;
		box-shadow: 0 0 2px darkred inset;
	}

	.navigation-button:first-child {
		display: none;
	}

	#nav-logo {
		display: block;
		margin: 1vh auto 1vh 3vw;
		height: 36px;
	}

	#menu-toggle {
		display: block;
		margin: 1vh 3vw 1vh auto;
		border: 3px ridge #999;
		border-radius: 12px;
		background: linear-gradient(0deg, #333333 0%, #999999 100%);
	}

	#menu-toggle img{
		filter: drop-shadow(0 2px 2px #00000075);
		margin: auto;
	}

	.navigation-buttons.menu-open {
		opacity: 1;
		transform: translateX(0);
		max-height: 500px;
		visibility: visible;
		transition: 
			opacity 0.3s ease-out,
			transform 0.3s ease-out,
			visibility 0s 0s;
    }
	/*========== Footer ==========*/
	.footer-container {
		display: flex;
		flex-flow: column;
		justify-content: center;
	}

	.footer-left {
		width: 100%;
		margin: auto;
	}

	.footer-logo {
		display: flex;
		flex-flow: row;
		margin: 1em auto;
	}

	.footer-logo p{
		color: #333;
		font-size: 24px;
		font-weight: bold;
		text-align: left;
		margin: auto 0.5em;
	}

	.lang-selector {
		display: flex;
		flex-flow: column;
		justify-content: left;
		background-image: url(src/pattern.svg);
		border-radius: 10px;
		border: 2px inset #333;
		padding: 0.5em;
		width: 100%;
		margin: auto auto 10vh auto;
	}

	.language-selector {
		position: relative;
		display: block;
		font-family: Arial, Helvetica, sans-serif;
		color: #00FF00;
		margin: 0;
	}

	.selected-language {
		display: block;
		background: #00CC0050;
		padding: 0.25em;
		cursor: pointer;
		align-items: left;
		user-select: none;
		transition: background 0.2s;
		width: 100%;
	}

	.selected-language:hover {
		background: #00FF0050;
		color: #FFFFFF;
		text-shadow: 0 0 2px #00FF00;
	}

	.language-dropdown {
		display: none;
		position: absolute;
		left: 0;
		width: 100%;
		background: url('src/pattern.svg');
		border-radius: 0;
		box-shadow: 0 4px 10px rgba(0,0,0,0.3);
		overflow: hidden;
		z-index: 100;
	}

	.language-dropdown a {
		margin: 0 1em;
	}
	
	.language-dropdown a:visited {
		color: #00FF00;
	}

	.language-dropdown a:hover {
		color: #FFFFFF;
		text-shadow: 0 0 2px #00FF00;
	}

	.language-dropdown.active {
		display: flex;
		flex-flow: row;
		animation: fadeIn 0.15s ease;
	}

	.language-option {
		display: flex;
		align-items: center;
		transition: background 0.2s;
		text-decoration: none;
		color: #00FF00;
		width: 100%;
		padding: 0.25em;
	}

	.language-option:hover {
		background: #009900;
		color: #FFFFFF;
	}

	.language-option.current-lang {
		/*opacity: 0.6;*/
		cursor: default;
	}

	.language-option.current-lang::after {
		content: "\25C2";
		/*color: #a0ffa0;*/
		color:#00CC00;
		font-size: 0.9em;
		margin-left: 0.25em;
		animation: blinkCursor 0.2s ease-in-out infinite;
	}

	.footer-right {
		display: flex;
		flex-flow: column;
		justify-content: center;
		overflow: auto;
		width: 100%;
	}

	.footer-column {
		display: flex;
		flex-flow: column;
		justify-content: center;
		width: 80%;
		margin: 1vh auto;
	}

	.footer-column p{
		padding: 0 2vw;
		color: #dddddd;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 24px;
		font-weight: 600;
		text-align: center;
		text-shadow: 0 1px 2px #333333;
		margin: 0 auto 1em auto;
	}

	.footer-links {
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
	}

	.footer-links a{
		font-family: Arial, Helvetica, sans-serif;
		font-size: 20px;
		color: #000;
		text-decoration: none;
		line-height: 1.5em;
		text-align: center;
		margin: 0.25em auto;
	}

	.footer-links a:hover {
		color: #aa0000;
	}

	.footer-portals {
		margin: 5vh 1vw 1vh 1vw;
		padding: 0 1vw;
		background-color: #000000;
		background-image: url('src/techtree-pattern.svg');
		background-blend-mode: luminosity;
		border-radius: 6px;
		border: 3px solid #333333;
		display: flex;
		flex-flow: row-reverse;
	}

	.footer-portals a{
		display: flex;
		flex-flow: row;
		text-decoration: none;
		text-align: left;
		margin: auto 0;
		color: #ffffff;
		font-size: 12px;
		font-family: Arial, Helvetica Black, sans-serif;
		font-weight: 300;
		padding: 0 1vw;
		border-left: 2px solid #FFFFFF50;
		line-height: 1em;
		overflow: hidden;
	}

	.footer-portals a:last-child {
		border-left: none;
	}

	.footer-portals img {
		margin: auto 4px;
		width: 24px;
		height: 24px;
	}

	.footer-portals a:hover {
		filter: drop-shadow(0 0 4px #ff99cc) brightness(110%);
	}

	/*===============================*/
	/*========== Main Page ==========*/
	/*===============================*/

	/*========== Overview Module ==========*/
	.overview {
		margin: auto;
		padding: 5vw;
		width: 100%;
	}

	.overview h1 {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 48px;
		font-weight: black;
		font-variant: small-caps;
		line-height: 1em;
		margin: auto;
		margin-top: 1em;
		margin-bottom: 1em;
		text-align: center;
		text-shadow: 0 0 10px #000000;
	}

	.overview h2 {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 24px;
		text-align: center;
	}

	.overview p {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 16px;
		line-height: 1.5em;
		text-align: center;
		width: 100%;
		margin: auto;
	}

	.overview a {
		margin: 3vw auto;
	}

	.cta-btn {
		display: flex;
		margin: 2em auto;
		width: 100%;
		padding: 32px;
	}

	.cta-btn a{
		display: block;
		margin: auto;
		text-align: center;
		font-size: 24px;
		font-family: Furore, sans-serif;
		font-weight: 800;
		color: darkred !important;
		box-shadow: 0 0 5px white inset;
		padding: 0.5em;
		background:
			linear-gradient(0deg, #999, #ddd) padding-box, /*this is your grey background*/
			linear-gradient(0deg, red, black) border-box;
		border: 5px solid transparent;
		border-radius: 20px;
		text-decoration: none;
	}

	.cta-btn a:hover {
		color: yellow !important;
		text-shadow: 0 0 5px gold;
		box-shadow: 0 0 2px black inset;
		animation: btn-anim 1s infinite;
		filter: drop-shadow(0 0 10px #ff0000);
	}

	/*========== Features Module ==========*/
	.main-features {
		width: 100%;
	}

	.main-features h2 {
		font-size: 32px;
	}

	.main-features-section {
		flex-flow: column;
		width: 100%;
	}

	.main-features-container {
		width: 100%;
	}

	.main-features-image img {
		filter: brightness(1.0);
	}

	.main-features-container h3{
		line-height: 1em;
		margin: 1em auto;
	}

	/*========== Factions Module ===========*/
	.main-factions {
		display: flex;
		flex-flow: column;
		justify-content: center;
		width: 100%;
		margin: auto;
	}

	.main-factions h2 {
		font-size: 32px;
		line-height: 1.5em;
	}

	.main-factions-container {
		display: flex;
		flex-flow: column;
		justify-content: center;
		width: 100%;
		margin: auto;
	}

	.main-factions-selection {
		display: flex;
		flex-flow: row;
		justify-content: center;
		width: 100%;
		margin: auto;
	}

	.main-factions-selection img {
		width: 128px;
		height: 128px;
	}

	.main-faction-button {
		width: 128px;
		height: 128px;
	}

	.main-factions-description {
		width: 100%;
		margin: auto;
	}

	.main-faction-description {
		display: none;
		padding: 6px 12px;
		border-top: none;
		margin: auto;
		height: 436px;
		max-width: 100%;
		background-repeat: no-repeat;
		background-position: 20% 0;
	}

	.main-faction-description h3 {
		font-size: 28px;
		text-align: center;
	}

	.main-faction-description p {
		font-size: 18px;
		text-shadow: 0 1px 2px #000;
		width: 80%;
		line-height: 1.25em;
		margin: auto;
	}

	.main-faction-description a {
		display: block;
		margin: 3vh auto;
		align-items: center;
		text-align: center;
		font-size: 2vh;
		font-family: Furore, Arial, Helvetica, sans-serif;
		font-weight: 800;
		padding: 0.5em;
		text-decoration: none;
		width: 80%;
	}

	/*========== News Module ==========*/
	.main-news {
		display: flex;
		flex-flow: column;
		padding: 1vw;
		width: 100%;
		margin: auto;
	}

	.main-news h2{
		font-family: Arial, Helvetica, sans-serif;
		font-size: 48px;
		text-align: center;
		margin: 0.5em;
		color: #FFFFFF;
		line-height: 1em;
	}

	.news-section {
		padding: 0;
		width: 100%;
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		margin: auto;
	}

	.news-section a {
		text-align: center;
		line-height: 2em;
		color: #FFFFFF;
		font-size: 18px;
		border: 2px solid #CC000050;
		margin: 1vw;
		width: 80%;
	}

	.news-section a:hover {
		box-shadow: 0 0 10px #FF0000;
		animation-name: button-slight-lift;
		animation-duration: 0.2s;
		animation-iteration-count:1;
		animation-fill-mode: both;
	}

	.news-section a:visited {
		color: #FFFFFF;
	}

	.news-container {
		display: flex;
		flex-flow: column;
		background-color: #FFFFFF25;
	}

	.news-container img {
		width: 100%;
		height: auto;
		aspect-ratio: 360/270;
	}

	.news-container time {
		text-align: center;
		font-size: 12px;
		font-weight: bold;
		margin: 2em 1em 1em auto;
		padding: 0;
		background-color: #CC0000;
		width: 20%;
		border-radius: 20px;
		line-height: 1.25em;
	}

	/*========== Main CTA ==========*/
	.main-cta {
		display: flex;
		flex-flow: column;
		justify-content: center;
		width: 100%;
		margin: 10vh auto 0 auto;
		background-image:url('src/cta_bg.avif');
		background-size: cover;
		background-position-x: 50%;
		background-position-y: 0;
	}

	.main-cta h2 {
		font-size: 32px;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
		width: 80%;
		margin: 1em auto;
	}

	.main-cta p {
		font-size: 18px;
		color: #FFFFFF;
		text-align: center;
		width: 80%;
		margin: auto;
	}

	.main-cta-button a {
		display: block;
		margin: 5vh auto;
		align-items: center;
		text-align: center;
		font-size: 24px;
		font-family: Furore, Arial, Helvetica, sans-serif;
		font-weight: 800;
		padding: 0.5em;
		color: goldenrod;
		border: 2px solid #000000;
		border-style: ridge;
		background: rgb(214,4,8);
		background: radial-gradient(circle, #d60408 0%, #ce0000 10%, #9d0000 30%, #850000 50%, #710000 70%, #400000 90%, #482428 100%), url('src/red-pattern.svg');
		background-blend-mode: lighten;
		box-shadow: 0 0 5px #000000 inset;
		text-decoration: none;
		width: 60%;
	}

	.main-cta-button a:hover {
		color: lightgoldenrodyellow;
		text-shadow: 0 0 5px gold;
		background: rgb(255,174,0);
		background: radial-gradient(circle, #ffae00 0%, #ffa500 10%, #ff8d00 30%, #ff7900 50%, #e25000 70%, #da4800 90%, #892404 100%), url('src/red-pattern.svg');
		background-blend-mode: lighten;
		box-shadow: 0 0 2px darkred inset;
	}

	.stay-connected {
		display: flex;
		flex-flow: column;
		justify-content: center;
		width: 100%;
		margin: auto;
		padding-bottom: 5vh;
	}

	.stay-connected h3 {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 36px;
		text-align: center;
	}

	.main-social-media {
		display: flex;
		flex-flow: row;
		justify-content: center;
		width: 100%;
		margin: auto;
	}

	.main-social-media a {
		margin: auto;
	}


	.main-social-media a:hover {
		filter:drop-shadow(0 0 3px #fff);
	}

	.main-social-media img{
		width: 100%;
		aspect-ratio: 1/1;
	}

	/*===================================*/
	/*========== Archives Page ==========*/
	/*===================================*/
	.arvhives {
		margin: 0 auto;
		padding: 10vh auto;
	}

	.archives h1 {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 48px;
		text-align: center;
		margin: 0 auto;
		color: #FFFFFF;
	}

	.archives p {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 18px;
		text-align: center;
		margin: auto;
		color: #FFFFFF;
	}

	.archives-board {
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		margin: auto;
		padding: 10vh 0;
		width: 80%;
	}

	.archives-container {
		width: 100%;
		border: 2px solid #FFFFFF50;
		margin: 1vw;
		padding: 1em;
		background-image: url('src/background-pattern.webp');
		background-size: cover;
	}

	.archives-container h2 {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 24px;
		text-align: center;
		color: #FFFFFF;
		margin: 0.5em auto;
	}

	.archives-links {
		display: flex;
		flex-flow: column;
	}

	.archives-links a {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 16px;
		color: #FFFFFF;
		text-decoration: none;
		text-align: left;
		margin: 0.25em 1em;
	}

	.archives-links a:hover {
		text-decoration: underline;
		color: #FF0000;
	}

	.archives-links a:visited {
		text-decoration: underline;
		color: #FFFFFF;
	}

	/*===================================*/
	/*========== Download Page ==========*/
	/*===================================*/
	.download {
		width: 100%;
		margin: auto;
		display: flex;
		flex-flow: column;
	}

	.download-links {
		margin: 5vh auto;
	}

	.download-buttons {
		margin: 20px auto;
		width: 60vw;
	}

	.download-buttons a {
		display: flex;
		flex-flow: row;
		justify-content: center;
		margin: auto;
		text-align: center;
		max-width: 100%;
	}

	.download h1{
		font-size: 32px;
		text-align: center;
		font-family: Arial, Helvetica, sans-serif;
		margin: 2em auto 0 auto;
		width: 80vw;
	}

	.download h2{
		font-size: 48px;
		font-family: Arial, Helvetica, sans-serif;
		font-weight: bold;
		font-variant: small-caps;
		text-align: center;
		margin: auto;
		color: #FFFFFF;
		text-shadow: 0 0 10px #F00;
	}

	.download-guide {
		background-color: #00000050;
		width: 80%;
		padding: 1em;
		margin: 5vh auto;
		backdrop-filter: blur(20px);
		border: 1px solid #FF0000;
	}

	.download-guide p {
		font-size: 14px;
		line-height: 1.25em;
		color: #FFFFFF;
		margin: 1em auto;
		text-align: center;	
	}

	.download-guide h2 {
		font-size: 24px;
		font-variant: normal;
		color: #FFFFFF;
	}

	.guide-buttons {
		display: flex;
		flex-flow: column;
		justify-content: center;
		margin: 2vh auto;
		gap: 2vw;
	}

	.guide-button {
		font-size: 18px;
		font-weight: bold;
		color: #FF0000;
		padding: 1em;
		border-radius: 3px;
		border: 1px solid #CC0000;
		background-color: #CC000030;
		background-image: url('src/red-pattern.svg');
		background-blend-mode: luminosity;
	}

	.guide-button:hover {
		background-color: #FF0050;
		color: #FFFFFF;
		text-shadow: 0 0 5px #FF6666;
		box-shadow: 0 0 5px #FF000050;
	}

	.download-information {
		display: flex;
		flex-flow: column;
		justify-content: center;
		margin: 5vh auto;
		background-color: #00000050;
		backdrop-filter: blur(4px);
		border-left: 4px solid #FF0000;
		padding: 1em;
		width: 80%;
		background-image: url('src/red-pattern.svg');
	}

	.download-information h2 {
		font-size: 24px;
		font-variant: normal;
		color: #FFFFFF;
	}

	.system-requirements {
		display: flex;
		flex-flow: column;
		font-size: 14px;
		margin: 2vh auto;
	}

	.system-requirements ul {
		width: 80%;
	}

	.system-requirements li {
		margin: 1em auto;
	}

	/*-------------------------------*/
	/*----------Units Page-----------*/
	/*-------------------------------*/
	.units {
		width: 100%;
	}
	
	.units h1{
		font-family: Arial, Helvetica Black, sans-serif;
		font-size: 36px;
		font-weight: 900;
		line-height: 1em;
		margin: 2em auto;
		margin-bottom: 1em;
		text-align: center;
		text-shadow: 0 0 10px #000000;
	}

	.faction-overview p{
		font-family: Arial, Helvetica, sans-serif;
		font-size: 16px;
		font-weight: 500;
		line-height: 1.5em;
		text-align: left;
		margin: auto;
		width: 90%;
	}

	/*---------- Techtree ----------*/
	.techtree-container {
		display: flex;
		flex-flow: column;
		background-image: url('src/techtree-pattern.svg');
		border: 1px solid #007BE9;
		box-shadow: 0 0 6px #007BE9;
	}
	
	/*---------- Category Container ----------*/
	.category-container {
		margin: auto;
		width: 90%;
	}
	/*---------- Unit Card ----------*/
	.unit-board {
		width: 100%;
	}

	.unit-container {
		display: flex;
		flex-flow: column;
		margin: 10px auto;
		width: 100%;
		background-color: #383838;
		box-shadow: 0 0 12px #000;
		padding-bottom: 1em;
	}
	
	.unit-container a{
		color: #ffffff;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 16px;
		font-weight: 600;
		text-decoration: underline;
	}
	
	.unit-container-name {
		display: flex;
		flex-flow: row;
		margin: 10px auto;
		padding: 0.25em;
		background-color: #FFFFFF30;
		width: 95%;
	}
	
	.unit-container-name h3 {
		width: 80%;
		margin: auto 1em;
	}
	
	.unit-container-info {
		display: flex;
		flex-flow: column;
		margin: auto;
		width: auto;
		justify-content: center;
	}
	
	.unit-container-info img{
		margin: auto;
		width: 360px;
		max-width: 96%;
		height: auto;
	}
	
	.unit-container-desc {
		display: flex;
		flex-flow: column;
		margin: 10px;
		width: auto;
	}
	
	.unit-container-desc p {
		font-size: 16px;
		background-color: #CCCCCC50;
		padding: 1em;
	}
	
	.unit-container-desc ul {
		list-style-type: square;
		list-style-position: outside;
	}
	
	.unit-container-desc li {
		font-size: 16px;
	}
	
	.unit-container-stats {
		display: flex;
		flex-flow: column wrap;
		margin: auto;
		width: 90%;
	}
	
	.unit-container-stats p {
		padding: 0.25em;
		border: 1px solid #CCCCCC;
		background-color: #99999950;
		font-size: 14px;
	}	

	.unit-container-left {
		margin: auto;
		width: 100%;
		padding: 5px;
	}

	.unit-container-left img{
		max-width: 90vw;
		width: 100%;
		height: auto;
	}

	.unit-container-mid{
		display: flex;
		width: 100%;
	}

	.unit-container-mid h3{
		width: 60%;
		text-align: center;
		font-size: 18px;
	}

	.unit-container-mid img{
		width: 40%;
		max-width: 60px;
		margin: 15px 30px;
	}
	
	.unit-container-right{
		display: block;
		width: 100%;
	}

	.unit-container-right p{
		width: 100%;
		font-size: 18px;
		padding: 0 5vw;
		line-height: 1.5em;
		text-align: left;
	}

	.unit-container-right ul{
		width: 100%;
		text-align: left;
		padding: 2em 10vw;
	}
	/*-----------------------------*/
	/*----------Maps Page----------*/
	/*-----------------------------*/

	.maps-section {
		display: flex;
		flex-flow: column;
		width: 100%;
		margin: auto;
	}

	.map-type {
		display: none;
	}

	.show-maps {
		display: flex;
		flex-flow: row wrap;
	}

	.map {
		display: flex;
		flex-flow: column;
		width: 100%;
		background-color: #333333;
		margin: 10px;
		padding: 12px;
	}

	.map-image {
		width: 100%;
		height: auto;
	}

	.map-image img {
		margin: auto;
		max-width: 100%;
		height: auto;
	}

	.map-description {
		display: flex;
		flex-flow: column;
		width: 95%;
	}

	.map-description h3 {
		font-size: 24px;
		font-weight: bold;
		margin: 0 1vw;
		text-align: center;
	}

	.map-description p {
		font-size: 16px;
		margin: 1em 1vw;
	}

	.map-info-table {
		margin: auto;
	}

	.map-info-table table {
		border: 1px solid #fff;
		border-collapse: collapse;
		border-width: 1px;
	}

	.map-info-table tr {
		margin: auto;
	}

	.map-info-table th {
		background-color:#993333;
		text-align: center;
		padding: 0 1em;
	}

	.map-info-table td {
		background-color:#08080850;
		text-align: left;
		line-height: 1.5em;
		padding: 0 1em;
	}

	/* Style the buttons */
	.map-selector {
		display: flex;
		flex-flow: column;
		justify-content: center;
		margin: 5vh auto;
		width: 80%;
	}

	.map-selector-button {
		display: flex;
		flex-flow: row;
		justify-content: center;
		border: none;
		padding: 0.5em;
		font-size: 16px;
		margin: 0.25em auto;
		width: 95%;
		text-align: center;
		font-family: Arial, Helvetica, sans-serif;
		font-weight: bold;
	}

	/*----------------------------------*/
	/*----------Blog List Page----------*/
	/*----------------------------------*/

	.blog-list {
		margin: auto;
	}

	.blog-list h1 {
		font-size: 36px;
		margin: 1em auto 0 auto;
		line-height: 1em;
	}

	.blog-list h2 {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 24px;
		font-weight: bold;
		text-align: center;
	}

	.blog-list p {
		line-height: 1em;
		margin: 5vw auto;
		font-size: 14px;
	}

	.blog-category {
		width: 100%;
	}

	.blog-container {
		margin: 1vh auto;
	}

	.blog-container h3 {
		font-size: 18px;
		text-align: center;
	}

	.blog-container img {
		border-radius: 10px;
		border: 2px inset #333;
		padding: 0;
	}

	/*-----------------------------*/
	/*----------Blog Page----------*/
	/*-----------------------------*/

	.blog {
		width: 100%;
		margin: 0 auto;
	}

	.blog h1 {
		font-size: 32px;
		text-align: center;
	}

	.blog-main {
		display: flex;
		flex-flow: column;
		padding: 0;
		margin: auto;
		width: 100%;
	}

	.blog-left {
		width: 90%;
		padding: 0;
		margin: 3vh auto;
	}

	.blog-right {
		display:none;
	}

	.chap-nav {
		position: relative;
		display: block;
		width: auto;
		margin: auto;
		background:linear-gradient(0deg, #c8c8c8 0%, #ffffff 15%, #c8c8c8 65%, #adadad 90%, #939393 100%);
		border: 4px outset #ddd;
		box-shadow: 0 0 24px #000;
	}

	.chap-nav p{
		font-size: 24px;
		font-family: Furore, sans-serif;
		text-align: center;
		color: #000;
	}

	.chaps {
		background: linear-gradient(-45deg, #000000 0, #333333 50%, #000000 100%), url(src/techtree-pattern.svg);
		background-blend-mode: luminosity;
		border-radius: 12px;
		margin: 0.5em;
		padding: 0.5em;
	}

	.chaps a {
		text-decoration: none;
		font-family: monospace;
		font-size: 12px;
		display: block;
		color: #fff;
		margin: 0.5em;
		padding: 0.5em;
		text-shadow: 1px 0 1px #000;
	}

	#h2 {
		font-weight: 700;
	}

	#h3 {
		font-weight: normal;
		margin-left: 4em;
		padding: 0.25em;
	}

	.chaps a:hover {
		display: block;
		color: #fff;
		background: radial-gradient(circle, #dd9000 20%, #e30000 90%, #660000 100%);
		border-radius: 5px;
		box-shadow: 0 0 5px #ff000060;
	}

	.blog-content {
		display: block;
		margin: 1em auto;
		padding: 1em;
		width: 90%;
		background-color: #333333;
		box-shadow: 0 0 12px #000;
	}

	.code-presentation {
		display: inline-block;
		/*background-color: #0c0c0c;*/
		background: linear-gradient(-45deg, #0c0c0c 0, #151515 50%, #0c0c0c 100%);
		background-blend-mode: hard-light;
		margin: 1em 0;
		padding: 1em;
		border-radius: 10px;
		border: 1px solid #fff;
		word-break: break-all;
	}

	.code-presentation p,del {
		font-family: Neon, monospace;
		font-size: 14px;
		color: #00ff00;
		text-shadow: 0 0 3px #00cc00;
		user-select: text;
	}

	.blog-content h2{
		font-family: Arial, Helvetica, sans-serif;
		font-weight: 700;
		font-size: 28px;
		text-align: left;
		color:#fff;
	}
	.blog-content h3{
		font-family: Arial, Helvetica, sans-serif;
		font-weight: normal;
		font-size: 24px;
		text-align: left;
		color:#fff;
	}

	.blog-content a {
		color: #fff;
		text-decoration: underline;
	}

	.blog-content img {
		max-width: 100%;
		height: auto;
	}

	.blog-content figcaption {
		font-family: monospace;
		font-size: 12px;
		background-color: #333;
		text-align: center;
		border: 1px dashed #fff;
		width: 100%;
		margin: auto;
		padding: 0.5em;
	}

	.blog-content table {
		overflow-x: hidden;
	}

	.general-table {
		max-width: 100vw;
	}

	.general-table table, tr, th, td {
		border: 1px solid #fff;
	  border-collapse: collapse;
	  padding: 0.5em;
	}
}