/* basic body html set up */

        body {
            background: unset;
            background-color: hsl(0, 0%, 95%);
            padding: 0;
            margin: 0;
        }

/* setup up the expanding background */
        
        div.main-background {
            /*min-height: 100vh;*/

            height: 720px;
            background-repeat: no-repeat;
            background-image: url('images/who-care-block.png');
            background-image: url('images/who-care-block-wide.bmp');
            
        }

        div.main-background {
            /*
            background-size: 400px 500px;
            background-size: 100% auto;
            */

            background-image: url('images/who-care-block-wide.bmp');

            background-position:center;
            border: 1px solid black;

            background-size: auto 100%;
            
        }







/* mobile */

div.main-background {
    
    background-image: url('images/who-care-block-wide.bmp');
    background-image: url('images/who-care-block.png');

    height: 500px;

}

nav ul li a {
    font-size: 12pt;
}

/* /mobile */


@media only screen and (min-width: 500px) {


    div.main-background {

        height: 620px; /* needed to fit background in */
    }

}

@media only screen and (min-width: 620px) {


    div.main-background {
        background-image: url('images/who-care-landscape.png');
        height: 510px;
        border: 2px solid blue;
    }

    nav ul li a {
        font-size: 14pt;
    }

}





@media only screen and (min-width: 900px) {

    div.main-background {
        height: 700px;
        border: 2px solid green;
    }

    nav ul li a {
        font-size: 15pt;
    }

}


@media only screen and (min-width: 900px) {
    div.main-background {
        height: 700px;
        border: 2px solid green;
    }
}



@media only screen and (min-width: 1100px) {

    div.main-background {
        height: 700px;
        border: 2px solid cyan;
    }

    nav ul li a {
        font-size: 16pt;
    }

}


@media only screen and (min-width: 1250px) {

    div.main-background {
        border: 2px solid blue;
        height: 800px;
    }

}

@media only screen and (min-width: 1350px) {

    div.main-background {
        border: 2px solid green;
        height: 900px;
    }

}

/* add in more steps here */


@media only screen and (min-width: 1450px) {

    div.main-background {
        border: 2px solid cyan;
        height: 1100px;
    }

}

div.main-background {
    border: none;
}


/* setup up the expanding background */



/* set up the content colours */

        div.content {
            color: hsl(0, 0%, 10%);
            background-color: hsl(0, 0%, 90%);
        }

/* set up the content colours */

/* ------------------------------------------------------------ */

/* the new :) */

body {
    font-family: 'Franklin Gothic Medium', Tahoma, sans-serif;
}

section, p, footer {
    font-family: Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Arial, sans-serif;
}

section, p, footer, h1, h2, h3, h4, h5, h6 {
    font-family: Tahoma, sans-serif;
}




div.nav-holder-desktop {
    margin: 0;
    padding: 0;
    position: absolute;
}

/* mobile settings */
div.nav-holder-desktop {
    top: 10px;
    right: 25px;
}



nav.top-nav {

}



nav {

    display: flex;

}

nav ul {

    list-style: none;

}

nav ul li {
    list-style-type:none;
    display: inline-block;
}

nav ul li a {
    color: hsl(0, 0%, 100%);
    text-decoration: none;
    font-weight: bold;
}

/* mobile */

nav ul li {
    padding-left: 0.9em;
}

/* /mobile */

@media only screen and (min-width: 500px)
{
    nav ul li {
        padding-left: 1.5em;
    }
}

@media only screen and (min-width: 600px) {

    div.nav-holder-desktop {
        top: 10px;
        right: 50px;
    }


}




@media only screen and (min-width: 1450px) {
    nav ul li {
        padding-left: 3em;
    }

    nav ul li a {
        font-size: 19pt;
    }

}



nav ul li a.secondary {
    /*
    color: hsl(81, 100%, 50%);
    color: hsl(188, 100%, 59%);
    color: hsl(188, 100%, 43%);
        */
}

nav ul li a:hover {

    transition-duration: 0.2s;

    /*
    color: hsl(200, 50%, 100%);
    */
    color: hsl(81, 100%, 50%); /* lime secondary */
    color: hsl(173, 100%, 75%); /* turqoise */
    color: hsl(188, 100%, 59%);
    color: hsl(188, 100%, 43%);

        color: hsl(188, 80%, 40%);

        color: hsl(188, 50%, 50%);

}

/* other branding lime */

/*   looks like hsl(81, 100%, 50%);   */




/* ------------------------------------------------------------ */

/*
nav.home-top {

    position: absolute;

    right: 20px;
    top: 8px;

    
}

nav.home-top a {
    text-decoration: none;
    font-family: Tahoma;
}
*/

/* ----------------------- main content container ------------------------------  */


div.default-content-container {
            padding: 0.5em 0.8em;
            background-color: hsl(0, 0%, 95%);
}

div.default-content-container, footer {
            margin: 0 auto;
            max-width: 940px;
}





/* ----------------------- /main content container ------------------------------  */

main a, footer a {
    text-decoration: none;
    color: hsl(188, 90%, 30%);
}

footer a {
    color: hsl(0, 0%, 5%);
    text-decoration: none;
}















main {
        line-height: 1.5;
    }


/*mobile */

    main {
        font-size: 12pt;
    }

    main p {
        font-size: 12pt;
    }

/*mobile */

@media only screen and (min-width: 500px)
{


    main {
        font-size: 12pt;
    }

    main p {
        font-size: 12pt;

    }

}

footer {
    /*
    border: 1px solid black;
    */

    background-color: black;
    color: white;
}

footer p {

}

footer div.footer-text {
    padding: 30px 20px;
    padding-bottom: 20px;
}

footer {
    display: none;
}