/* global */

:root {
    --color-accent: #e8c264;
    --color-05: #080d12;
    --color-10: #0d1a26;
    --color-15: #182635;
    --color-20: #19334d;
    --color-25: #284058;
    --color-30: #264d73;
    --color-35: #37597b;
    --color-40: #336699;
    --color-45: #47739e;
    --color-50: #4080bf;
    --color-55: #618cb8;
    --color-60: #6699cc;
    --color-65: #84a6c8;
    --color-70: #8cb3d9;
    --color-75: #a7bfd7;
    --color-80: #b3cce6;
    --color-85: #cad9e7;
    --color-90: #d9e6f2;
    --color-95: #edf2f7;
}

@font-face{
    font-family: Commissioner;
    src: url(/fonts/commissioner.ttf) format( 'truetype' );
}

@font-face{
    font-family: GreatVibes;
    src: url(/fonts/great_vibes.ttf) format( 'truetype' );
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Commissioner;
    background-color: var(--color-10) !important;
    color: var(--color-75) !important;
}

p,
li {
    text-align: justify;
    margin: 1rem;
}

a,
a:visited {
    color: var(--color-85) !important;
    transition: color 222ms ease-in-out, background-color 222ms ease-in-out;
}

a:hover,
a:active {
    color: white !important;
    transition: none;
}

.logo {
    font-family: GreatVibes;
}

/* navigation */

#navigation .quick {
    position: absolute;
    top: 0;
    left: 0;
    height: 3rem;
    width: 100%;
    max-width: 75rem;
    padding: 0 calc(50% - 37.5rem);
    overflow: hidden;
    background-color: var(--color-40);
}

#navigation .quick > * {
    position: relative;
    height: 2rem;
    padding: .5rem;
    border: none;
    color: var(--color-95);
    display: inline;
    text-decoration: none;
    float: right;
    line-height: 1.9rem;
}

#navigation .quick .logo {
    float: left;
    font-size: 1.75rem;
    line-height: 2.2rem;
    padding: .5rem 2rem;
}

/* address */

#address {
    padding: 3rem calc(50% - 37.5rem) 0 calc(50% - 37.5rem);
    background-color: var(--color-20) !important;
    max-width: 75rem;
}

#address > div {
    padding: 1rem;
}

/* content */

#content {
    padding: 0 calc(50% - 37.5rem) 0 calc(50% - 37.5rem);
    background-color: var(--color-20) !important;
    max-width: 75rem;
}

#content > div {
    display: table;
}

#content > .wrapper {
    padding: 1rem;
}

#content > .wrapper > *:first-child {
    margin-top: 0;
}

#content > .wrapper > *:last-child {
    margin-bottom: 0;
}

/* footer */

#footer {
    padding: 1rem calc(50% - 37.5rem) 1rem calc(50% - 37.5rem);
    max-width: 75rem;
}

#footer > * {
    display: block;
    text-align: center;
}

#footer > span:first-of-type {
    font-size: 2rem;
    line-height: 5rem;
    margin-bottom: 1rem;
}

/* easteregg cookie */

#easteregg_cookie {
    display: inline-block;
    height: 5rem;
    width: 5rem;
    background-size: cover;
    cursor: pointer;
    border-radius: 2.5rem;
    margin-bottom: -1.9rem;
    user-select: none;
}

/* webgl_fluid_simulation */

#webgl_fluid_simulation {
    position: absolute;
    top: 3rem;
    left: 0;
    height: calc(100% - 3rem);
    width: 100%;
}

/* homepage - intro */

#homepage_intro {
    height: calc(100vh - 3rem);
    display: table;
    width: 100%;
}

#homepage_intro > div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: var(--color-95);
    text-shadow: 1px 1px 1px var(--color-20);
    pointer-events: none;
}

#homepage_intro > div > * {
    position: relative;
}

#homepage_intro > div > h1 {
    font-family: GreatVibes;
    font-size: 3.1rem;
    margin: 0 0 -.5rem 0;
}

#homepage_intro > div > h1 > span {
    color: var(--color-accent);
}

#homepage_intro > div > span {
    font-size: .95rem;
    font-style: italic;
}