html,
body
{
    margin: 0;
    padding: 0;
    height: 100%;
}

.main-container
{
    width: 100%;
    min-height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;

    background-color: DimGray;
    text-align: center;

}

img
{
    width: 100%;
    min-height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;

    position: absolute;
    top: 0;
    left: 0;

    display: none;
    object-fit: cover;
}

h1,
span.footer
{
    color: rgba(255, 255, 255, 0.67); /* white text, 80% opacity */
    font-family: 'Bowlby One SC', cursive;
    position: absolute;
    left: 3%;
    -webkit-text-stroke: 1px dimgray;

    color: rgba(0, 0, 0, 0.15); /* white text, 80% opacity */
    -webkit-text-stroke: 1px whitesmoke;
}
h1
{
    font-size: 1.6em;
    text-transform: uppercase;
}
span.footer
{
    font-size: 1.1em;
    bottom: 2%;
}

@media all and (min-width: 991px) {
    h1
    {
        font-size: 2.5em;
    }
}
@media all and (max-width: 767px) {
    h1
    {
        font-size: 1.5em;
    }
}