/* USE YOUR OWN ADOBE OR GOOGLE FONT HERE */
         
    
           /* ////////// NAV LINKS /////////*/
    
        nav {
         /* WHOLE NAV BAR */
            padding-top: 2.5em;
                ;
            }
    
            nav a {
                /* APPLIES TO ALL LINKS IN THE NAV */
                font-family: "adorn-smooth-engraved", sans-serif;
                font-size: .9em;
                text-align: center;
                color: #ffffff;
                padding: 10px 25px;
                letter-spacing: 1.5px;
                text-decoration: none;
                margin: .5em;
                border-radius: 50px;
                display: inline-block;
                /* border: 1px red solid; */
            }
    
            /* unvisited and visited link */
            nav a:link,
            nav a:visited {
                background-color: #7a7a7a;
            }
    
            /* mouse over/active link */
            nav a:hover,
            nav a:active {
                color: #ffffff;
                background-color: #418840;
            }
    
            /* ////////// 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(210, 254, 181, 0.3), rgba(13, 9, 0, 0.5)), url(Images/krausheroimage.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/kittens.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: 70%;
                /* HORIZONTAL ALIGNMENT */
                left: 50%;
    
                transform: translate(-50%, -50%);
                color: #dcdcdc;
            }
    
            h1 {
                /* TITLE */
                font-family: "portofino", sans-serif;
                font-size: 5em;
                color: #f0f0f0;
                letter-spacing: 2px;
                margin: 0;
            }
    
            p {
                /* SMALL TEXT */
                font-family: "adorn-smooth-engraved", sans-serif;
                font-weight: 400;
                font-size: 1em;
            }