/******************************************** IMPORTS *********************************************/
@import url("https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&display=swap");

/************************************** PERFORM HEADER RESET **************************************/
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    -webkit-font-smoothing: antialiased;
    line-height: 1;
}

abbr, acronym, address, applet, aside, audio, big, blockquote, body, canvas, caption, center, cite, code, dd, details,
dfn, div, dt, em, embed, figcaption, footer, form, h2, h3, h4, h5, h6, header, hgroup, i, iframe, img, ins, kbd, label,
legend, li, mark, nav, object, ol, output, p, pre, q, ruby, s, samp, section, span, strike, strong, sub, summary, sup,
tbody, td, tfoot, th, thead, tr, tt, u, ul, var, video, a, article, b, del, dl, fieldset, figure, h1, html, menu, small,
table, time {
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: none;
}

button {
    border: none;
}

button:focus {
    outline: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

ol, ul {
    list-style: none;
}

/*************************************** SET CSS VARIABLES ****************************************/
:root {
    /* math constants */
    --golden-ratio-shrink: 0.6180339887498948482;
    --golden-ratio-grow: 1.6180339887498948482;

    /* general UI look & behavior */
    --button-border-width: 1px;
    --button-active-vertical-translation: 1px;
    --button-hover-transition-duration: 0.3s;
    --button-hover-transition-timing-function: ease-out;
    --sliding-element-transition-duration: 0.5s;
    --sliding-element-transition-timing-function: ease;
    --ui-backdrop-filter: blur(28px);
    --default-shading: #0000000f;

    /* border aesthetics */
    --default-border-radius: 0.4em;

    /* font settings */
    --default-font-family: "Dosis", sans-serif;
    --default-font-size: 1em;
    --default-line-height: 1.2em;

    /* shadow aesthetics */
    --default-shadow-opacity: 0.4;
    --default-shadow-color: rgba(0, 0, 0, var(--default-shadow-opacity)); /* 40% */
    --default-shadow-blur: 2px;
    --default-shadow: 1px 1px var(--default-shadow-blur) var(--default-shadow-color);

    --default-light-shadow-color: rgba(0, 0, 0, calc(var(--default-shadow-opacity) / 4)); /* 10% */

    --flat-shadow-opacity: var(--default-shadow-opacity);
    --flat-shadow-color: var(--default-shadow-color);
    --flat-shadow-blur: 1px;
    --flat-shadow: 1px 1px var(--flat-shadow-blur) var(--default-shadow-color);

    /* header */
    --header-height: 5em;

    /* main */
    --main-font-size: 2em;

    /* footer */
    --footer-height: 1.8em;
}

/************************************ REGULAR CSS DEFINITIONS *************************************/
html, body, #root {
    height: 100%;
}

.wrapper {
    position: relative;
    background-color: #070709;
    color: white;

    display: flex;
    flex-direction: column;
    height: inherit;

    font-family: var(--default-font-family);
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);

    box-shadow: 2px 2px 5px #0000004c;
    overflow: auto;

    z-index: 1;
}

.wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background-image: url("images/graph.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    background-color: rgba(0, 0, 0, 0.5);
    pointer-events: none;

    filter: blur(1px) brightness(0.3618) contrast(0.9);
    z-index: -1;
}

header {
    height: var(--header-height);
    display: flex;
    flex-direction: row;

    background: linear-gradient(to right, rgba(7, 7, 9, 1), rgba(7, 7, 9, 0.2));
}

header > img {
    height: 100%;
    object-fit: contain;
    object-position: center;
}

header > .neophyte {
    display: flex;
    align-items: center;

    font-weight: 500;
    font-size: 2em;
    margin-bottom: 0.2463em;
}

main {
    flex-grow: 1;
    background-color: rgba(3, 34, 70, 0.2);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.8em 10%;

    font-size: 1.5em;
    font-weight: 300;
    line-height: 1.2em;
}

main > p {
    text-align: center;
    margin-bottom: 1em;
}

main > .owl-logo {
    max-width: 128px;

    filter: drop-shadow(0 0 13px rgba(0, 0, 0, 0.9)); /* White glow */
}

main > .alpha-title {
    font-weight: 600;
}

footer {
    font-size: 0.80em;
    height: var(--footer-height);

    display: flex;
    justify-content: center;
    align-items: center;
    color: #aaa;
    margin-bottom: 1px;

    background: rgba(7, 7, 9, 0.2);
}