:root
{
    --bg-color: #000;
    --bg-color-item: #111;
    /* --base-text: #9CDCFE; */
    /* --base-text: #5bb5e6; */
    --base-text: #7dc0e4;
    /* --base-text: #a8a8a8; */
    --heading-item: #358CD6;
    --highlight-1: #6A9949;
    --highlight-2: #CE834A;
    --highlight-3: #584999;
    --link:#009BDD;
    --link-bg: #1d3053;
    /* --highlight-4: #305080; */
    --highlight-4: #9372e0;

}

html
{
    height: 100%;
}

body {
    /* background-color: #252736; */
    /* background-color: #0a0e2c; */
    background-color: var( --bg-color);
    color: var( --base-text);
    display: flex;

    height: 100%;
    width: 100%;
    /* padding-top:20%; */
    margin: 0px;

    justify-content: center;
    align-content: center;
    align-items: center;

    font-family: Consolas, Monospace, sans-serif, Helvetica;
}

p {
    font-size: 1.15em;
    width: 100%;
}

h1 {
    font-size: 6em;
    font-family: Exo;
    font-weight: lighter;
    margin: 0;
    line-height: 1em;
}

h2 {
    font-size: 2em;
    font-family: Exo;
    text-decoration: none;
    color: var(--heading-item);
    font-weight: normal;
    margin: 0;
}

h3 {
    font-size: 3em;
    text-decoration: none;
    color: var(--highlight-3);
    font-weight: normal;
    margin: 0;
}

h4 {
    font-size: 2em;
    text-decoration: none;
    color: var(--heading-item);
    font-weight: normal;
    margin: 0;
    font-size: calc(1% of container width + 12px);
    /* font-size-adjust: 0.5; */
}

a {
    font-size: 12pt;
}

a:link {
    text-decoration: none;
    /* color: #009BDD; */
    color: var( --link );
    font-family: Consolas, Monospace, sans-serif, Helvetica;

}

a:visited {
    text-decoration: none;
    color: var( --link );
}

a:hover {
    /* text-decoration: none; */
    text-decoration: underline;
}

/* a:active {
    text-decoration: none;
} */

img {
    position: relative;
    display: inline;
    margin: 0px;
    padding: 0px;
    /* height: 100%; */
    width: auto;
}