:root
{
    --colour1: #eaeeec;
    --colour2: #cccccc;
    --colour3: #479987;
    --colour4: #004d3d;
    --colour5: #2a584f;
    --colour6: #999999;
    --colour7: #748594;
    --colourFoot: #cbcfce;
}

/* Code for Firefox */
::-moz-selection
{
    color: var(--colour4);
    background: var(--colour2);
}
::selection
{
    color: var(--colour4);
    background: var(--colour2);
}

body
{
    margin: 0%;
    font-family: Nunito;
    background-color: var(--colour1);
    font-size: 1rem;
    font-weight: 400;
}

.hidden
{
    display: none !important;
}

header
{
    background-color: var(--colour2);
    margin: 0%;
    padding: 0.625em;
    padding-top: 0.15625em;
    padding-bottom: 0.15625em;
}

footer
{
    background-color: var(--colourFoot);
    margin: 0%;
    padding: 0.625em;
    text-align: center;
    bottom: 0%;
}

p
{
    margin: 0.625em 0.9375em;
}

hr
{
    margin: 2.5em;
    margin-top: 0.9375em;
    margin-bottom: 0.9375em;
    border-color: var(--colour7);
    border-width: 0.125em;
    border-style: solid;
    border-radius: 0.0625em;
    background-color: var(--colour7);
}

hr.pre-heading
{
    margin: 2.5em;
    margin-top: 1.25em;
    margin-bottom: 0.4375em;
}

h1, h2, h3
{
    color: var(--colour3);
    font-weight: 800;
}
/* Code for Firefox */
h1::-moz-selection, h2::-moz-selection, h3::-moz-selection
{
    color: var(--colour1);
    background: var(--colour6);
}
h1::selection, h2::selection, h3::selection
{
    color: var(--colour1);
    background: var(--colour6);
}

h1
{
    margin: auto;
    text-align: center;
    font-size: 3.83rem;
    text-shadow: 2px 2px 2px var(--colour4);
}
/* Code for Firefox */
h1::-moz-selection
{
    text-shadow: 2px 2px 2px var(--colour2);
}
h1::selection
{
    text-shadow: 2px 2px 2px var(--colour2);
}

h2
{
    margin: 0 0 0 1.25rem;
    text-align: left;
    font-size: 3.16rem;
    text-shadow: 1.25px 1.25px 2px var(--colour4);
}
/* Code for Firefox */
h2::-moz-selection
{
    text-shadow: 1.25px 1.25px 2px var(--colour2);
}
h2::selection
{
    text-shadow: 1.25px 1.25px 2px var(--colour2);
}

@media screen and (max-width: 100ch)
{
	h1
    {
        font-size: 3.16rem;
    }
    h2
    {
        font-size: 2.83rem;
    }
}

#skip-nav
{
    position: absolute;
    
    background-color: var(--colour5);
    color: var(--colour1);
    padding: 0.25em 0.5em;
    
    transform: translateY(-120%);
    transition: transform 120ms ease-out;
}
#skip-nav:focus
{
    transform: translateY(0%);
}

a.unstyled-link
{
    margin: 0%;
}
a.unstyled-link:hover
{
    margin: 0%;
}
a.unstyled-link:active
{
    margin: 0%;
}

a
{
    color: var(--colour5);
    text-decoration: none;
}
a:hover
{
    color: var(--colour4);
    text-decoration: none;
}
a:active
{
    color: var(--colour3);
    text-decoration: none;
}

ul
{
    padding-left: 3.4375em;
    margin-top: 0.4375em;
}
li
{
    margin: 0.15625em;
    font-size: 1.1rem;
}

/*Scroll bar styling*/
::-webkit-scrollbar
{
    width: 10px;
}
::-webkit-scrollbar-track
{
    background: var(--colour1);
    margin: 1px;
}
::-webkit-scrollbar-thumb
{
    background: #888;
    border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover
{
    background: rgb(105, 105, 105);
}