/*
our colour scheme has 3 basic colours: dark, medium, and light.
there are also transparent versions.
*/
:root {
    --colour-transp: 0.5;
    --colour-dark: rgb(40, 46, 52);
    --colour-medium: rgb(119, 119, 119);
    --colour-light: rgb(255, 255, 255);
    --colour-dark-transparent: rgba(46, 40, 52, var(--colour-transp));
    --colour-medium-transparent: rgb(119, 119, 119, var(--colour-transp));
    --colour-light-transparent: rgb(255, 255, 255, var(--colour-transp));
}

body,
html {
    height: 100%;
    margin: 0;
    font: 400 15px/1.8 "Lato", sans-serif;
    color: var(--colour-medium);
}

/* headings are upper-cased with letter spacing*/
h1,
h2,
h3,
h4 {
    letter-spacing: 5px;
    text-transform: uppercase;
}

h1 {
    font: 30px "Lato", sans-serif;
    font-weight: bold;
}

h2 {
    font: 24px "Lato", sans-serif;
    font-weight: bold;
}

h3 {
    font: 20px "Lato", sans-serif;
    font-weight: bold;
}

h4 {
    font: 18px "Lato", sans-serif;
    font-weight: bold;
}

h5 {
    font: 16px "Lato", sans-serif;
    font-weight: bold;
}

/* page sections */
.light-section {
    /* a section with light-coloured background and medium-coloured text */
    color: var(--colour-medium);
    background-color: var(--colour-light);
    padding-top: 50px;
    padding-bottom: 80px;
    padding-left: 80px;
    padding-right: 80px;
    text-align: justify;
}

.dark-section {
    /* a section with dark-coloured background and light-coloured text */
    color: var(--colour-light);
    background-color: var(--colour-dark);
    padding-top: 50px;
    padding-bottom: 80px;
    padding-left: 80px;
    padding-right: 80px;
    text-align: justify;
}

.img-section {
    /* a section with parallax-image background and dark-coloured text */
    position: absolute;
    left: 0;
    padding-top: 50px;
    padding-bottom: 80px;
    padding-left: 80px;
    padding-right: 80px;
    text-align: justify;
    color: var(--colour-dark);
}

.mt
{
    margin-top:1em;
}

.mb {
    margin-bottom: 1em;
}

/* image-section title descenders */
.img-descend-small {
    top: 10%;
}

.img-descend-medium {
    top: 20%;
}

.img-descend-large {
    top: 34%;
}

/* text colours*/
.text-dark {
    color: var(--colour-dark);
}

.text-meduim {
    color: var(--colour-medium);
}

.text-light {
    color: var(--colour-light);
}

/* boxed backgrounds */
.bg-dark {
    background-color: var(--colour-dark-transparent);
    padding: 1em;
}

.bg-medium {
    background-color: var(--colour-medium-transparent);
    padding: 1em;
}

.bg-light {
    background-color: var(--colour-light-transparent);
    padding: 1em;
}

/* misc */
.rounded {
    border-radius: 1em;
}

.no-overflow {
    overflow: hidden;
}

.centred {
    text-align: center;
}

.centred-logos {
    text-align: center;
    width: 100%;
    padding: 0
}

/* links */
a:link {
    color: var(--colour-dark);
}
a:visited {
    color: var(--colour-dark);
}
a:hover {
    color: var(--colour-dark);
}
a:active {
    color: var(--colour-dark);
}