:root {
	font-size: 10px;
	--colorBG: #180906;
	--colorBGDark: #070101; /* Darker */
	--colorChroma: #00FF00; /* 00FF00 */
	--colorDivider: #2b2b2b;
	--colorText: #edbdad;
	--colorAccentLight: #e59351;
    --colorAccentDark: #c54327;
    --colorAccentDarkHover: #d2573c;

    --colorBGGradient: #2c0f09;

    --borderThicknessGeneric: 0.4rem;

	/* --cornerRoundStandard: 1.25rem;*/
}

html, body {
	height: 100%;
	width: 100%;
    margin: 0rem;
    padding: 0rem;
    background-color: var(--colorBGDark);
	color: var(--colorText);

    font-size: 1.4rem;
    line-height: 145%;


	font-family: Calibri, Adobe Gothic Standard B, Helvetica, Arial, sans-serif;
    text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.2);


}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

b {
    color: var(--colorAccentLight);
}

h2 {
    color: var(--colorAccentLight);
    margin: 1.25rem 0.5rem 0.75rem 0.5rem;
    padding: 0rem 0rem;
}

h3 {
    font-size: 1.8rem;
    color: var(--colorAccentLight);
    margin: 1.25rem 0.5rem 0rem 0.5rem;
}

ul {
    margin: 0.75rem 0rem;

}

p {
    margin: 0.5rem 0.5rem 1.5rem 1rem;
}

a {
    text-decoration: none;
}

hr {
    border: 0.2rem solid var(--colorDivider)
}

h1 {
    color: var(--colorAccentLight);
    text-align: center;
    font-size: 12rem;
    line-height: 100%;
    margin: 0rem;
}

#headerLogoContainer {
    width: 16rem;
    height: 19rem;
    margin-right: 0.5rem;
}

#headerSubtitle {
    font-size: 2.5rem;
    line-height: 115%;
    font-weight: bold;
    text-align: center;
}

#headerContainer {
    background-color: var(--colorBG);
    border-bottom: var(--borderThicknessGeneric) solid var(--colorDivider);
    display: flex;
    justify-content: center;
    padding: 2rem 0rem;
    width: 100%;
}

#footer {
    text-align: center;
    font-size: 1.75rem;
    padding: 0rem 0rem 0.75rem 0rem;
}

.mainAboutContainer {
    align-self: center;
    max-width: 80rem;
}

.aboutContainer {
    align-self: center;
    max-width: 80rem;
}

.aboutContainer h2, .mainAboutContainer h2 {
    font-size: 2.75rem;
    margin: 1.5rem 0.5rem 1rem 0.5rem;
}

.contentContainer {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    max-width: 80rem;
    justify-content: center;
}

.linkSection {
    display: flex;
    flex-direction: row;
    align-content: center;
    margin: 1rem 0rem 0rem 0rem;
}

.linkSectionImage {
    width: 8rem;
    height: 8rem;
    flex-shrink: 0;
}

.linkSectionText {
    display: flex;
    flex-direction: column;
}

.linkSectionText h2 {
    margin: 0.5rem 0.5rem 0.25rem 0.5rem;
}

.linkSectionText p {
    margin: 0.25rem 0.5rem 1rem 1rem;
}

.linkIconSVG path {
    fill: var(--colorText);
}

a:hover .linkIconSVG path {
    fill: var(--colorAccentLight);
}

#headerTextContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.midContentContainer {
    background-color: var(--colorBG);
    border-bottom: var(--borderThicknessGeneric) solid var(--colorDivider);
    border-top: var(--borderThicknessGeneric) solid var(--colorDivider);
    padding: 0.5rem 0rem;
    width: 100%;
    display:flex;
    justify-content: center;
}

.contentSection {
    width: calc(50% - 1rem);
}

.flexRow .contentContainer {
    flex-direction: row;
    justify-content: center;
}

.infoDivider {
    background-color: var(--colorBG);
    font-size: 2rem;
    text-align: center;
    font-weight: bold;
    margin: 2rem 0rem 0.5rem 0rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.infoDivider p {
    margin: 1rem;
    line-height: 100%;
}

a:link, a:active {
    color: var(--colorAccentDark);
    font-weight: bold;
}

a:visited {
    color: var(--colorAccentDark);
}

a:hover {
    color: var(--colorAccentDarkHover);
}

a:active {
    color: var(--colorAccentDark);
}

.big {
    font-size: 1.8rem;
}

thead {
    font-weight: bold;
}

/* ========================================= */

@media screen and (max-width: 500px) {
    :root {
        font-size: calc(100vw / 50);
    }

    .contentSection {
        width: 100%;
    }

    .linkSection {
        justify-self: center;
        width: calc(100% - 6rem);
    }
}

@media screen and (min-width: 501px) and (max-width: 725px) {
    :root {
        font-size: calc(100vw / 70);
    }
}

@media screen and (min-width: 726px) and (max-width: 900px) {
    :root {
        font-size: calc(100vw / 90);
    }
}

@media screen and (min-width: 1060px) {
    #content01, #content02, #content02b, #content03 {
        max-width: 105rem;
    }

    #content01 .contentSection {
        width: calc(33% - 0.2rem);
    }
}

/* ========================================= */

@keyframes waveBounce {
    0% { opacity: 0; }
	33% { opacity: 1; }
	85% { opacity: 0; }
	100% { opacity: 0; }
}

.logoWaveBounce {
	animation-name: waveBounce;
	animation-duration: 2.5s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

#logoWaveOuter {
	animation-delay: 0.5s;
	left: 2rem;
	opacity: 0;
	fill: var(--colorAccentDark);
}

#logoWaveMid {
	animation-delay: 0.25s;
	left: 3rem;
	opacity: 0;
	fill: var(--colorAccentDark);
}

#logoWaveInner {
	animation-delay: 0s;
	left: 4rem;
	opacity: 0;
	fill: var(--colorAccentDark);
}

#logoJCurve {
	fill: var(--colorAccentLight);
}

#logoMicCore {
	fill: var(--colorAccentDark);
}

#logoTop {
	fill: var(--colorAccentLight);
}

#logoBase {
	fill: var(--colorAccentDark);
}

.logoPieces {
	stroke-width: 0.15rem;
	stroke: var(--colorBG);
	fill-rule: evenodd;
}