nav {
            /* WHOLE NAV BAR */
            padding-top: 2.5em;
            ;
        }

        nav a {
            /* APPLIES TO ALL LINKS IN THE NAV */
            font-family: "gelica", sans-serif;
font-weight: 400;
font-style: normal;
            font-size: .9em;
            text-align: center;
            color: #8F95D3;
			
            padding: 10px 25px;
            text-decoration: none;
            letter-spacing: 5px;
            margin: .5em;
            border-radius: 12px;
            display: inline-block;
            /* border: 1px red solid; */
        }

        /* unvisited and visited link */
        nav a:link,
        nav a:visited {
            background-color: #D3C4E3;
        }

        /* mouse over/active link */
        nav a:hover,
        nav a:active {
            background-color: #8F95D3;
  color: #D3C4E3;
        }

        /* ////////// HERO ///////// */

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

        /* The hero image */
        .hero-image {
            /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
            background-image: linear-gradient(rgba(143, 149, 211, 0.3),rgba(219, 177, 188, 0.5)), url(images/hero.jpg);
            /* YOU NEED TO CHANGE THE COLORS ABOVE TO MATCH YOUR SITE */
            /* If you do not want a color overlay then remove the gradient and use the code below .*/
/*             background-image: url(images/hero.jpg);  */

            /* Set a specific height */
            height: 100%;

            /* Position and center the image to scale nicely on all screens */
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            /* resizes image to fit any screen */
            position: relative;
        }

        /* Place text in the middle of the image */
        .hero-text {
            text-align: center;
            position: absolute;

            /* VERTICAL ALIGNMENT */
            top: 65%;
            /* HORIZONTAL ALIGNMENT */
            left: 50%;

            transform: translate(-50%, -50%);
            color: #ffffff;
        }

        h1 {
            /* TITLE */
            font-family: "gelica", sans-serif;
font-weight: 400;
font-style: normal;
			font-size: 5em;
            color: #004666;
            letter-spacing: 2px;
            margin: 0;
        }

        p {
            /* SMALL TEXT */
           font-family: "gelica", sans-serif;
font-weight: 400;
font-style: normal;
        }