body {
    text-align: center;
    color: rgb(186,	186, 186); /* TODO */

    /* Background image styling */
    /* https://css-tricks.com/perfect-full-page-background-image/, but expanded to allow for fallback color */
    background-color: rgb(35, 35, 35);
    background-image: url("/img/homepage-background-SfW-jpeg-80-40prcnt.webp");
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* Serving different sized background images */
@media only screen and (max-width: 780px) { /* Small Screens */

}


/* --- FONTS --- */
@font-face {
    font-family: 'Centaur';
    src: url('/font/centaur-webfont.woff2') format('woff2'),
    url('/font/centaur-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
/* Set root font size */
html {
    font-size: 2vh;
}
div#main {
    font-family: 'Centaur', Times, serif;
    font-size: 2.75rem;
    font-weight: bold;
}
/* Stretch text vertically */
div#main > p, h1, h2 { /* https://www.w3docs.com/snippets/css/how-to-stretch-a-text-with-css.html */
    transform: scale(1, 1.62);
    -webkit-transform: scale(1, 1.62);
    -moz-transform: scale(1, 1.62);
    -o-transform: scale(1, 1.62);
    /*transform-origin: 0% 70%;*/
}

h1 {
    padding-top: 1rem;
    padding-bottom: 0.5rem;
    font-size: 4rem;
    /*font-size: 9vh;*/
    font-weight: bold;
}

h2 {
    font-size: 1.3rem;
    font-weight: normal;
    text-transform: uppercase;
    font-weight: bold;
}


h1, h2 {
    margin: 0;
}

a {
    text-decoration: none;
    color: lightgray; /* TODO */
}

#main {

    width: 100%;
    position: absolute;
    top: max(45%, 10rem); /* TODO, this prevents the main content form hitting the title, but the rem amount will need to be adjusted based on the final font size of the title*/
    left: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

a:hover {
    color: #868686;
}

svg:hover {
    fill: #868686;
}

.fixed-bottom {
    font-size: 2.25rem;
    position: fixed;
    right: 0;
    bottom: 1rem;
    left: 1rem;
    z-index: 1030;

    text-align: left;

    /*fill: rgb(186,	186, 186);*/
}