/* css to layout*/
*{
    padding: 0;
    margin: 0;
    }
    
    header{
        background-image:url("images/IMG_5346.jpeg");
    height: 100%;
    }
    header nav ul{
    display: flex;
    margin-left: 80%;
    }
    
    header nav ul li{
    padding-left: 10%;
    }

    .homelink h1{
        a{color:black;
        text-decoration: none;}
    }
    
    section{
    height: 100%;
    border: 1px solid grey;
    display: flex;
    justify-content: center;
    align-items: center;
    }
    
    .Container{
    margin-top: 10%
    }
    
    .Container img{
    height: 100%;
    }
    
    .Container h2{
    margin-top: 3%;
    }
    
    footer {
    line-height: 40px;
    display: flex;
    justify-content: center;
    }

    /* css to individual elements*/

    *{
        padding: 0;
        margin: 0;
        }
        
        header{
        height: 45px;
        }
        header nav ul{
        display: flex;
        margin-left: 70%;
        list-style: none;
        }
        
        header nav ul li{
        padding-left: 10%;
        }
        
        header a{
        text-decoration: none;
        color: brown;
        
        }
        
        section#navigation{
            height:60px;
            list-style-type: none;
            display: inline, center;
            width: 100%;
        }
        section#navigation ul{
            display: flex;
            list-style: none;
            width: 100%;
        }
        section#navigation ul li{
            list-style: none;
            padding-left: 10%;
        }
        section#navigation ul li a{
            text-decoration: none;
            color: brown;
        }
        
        section{
        height: 60vh;
        border: 1px solid grey;
        display: flex;
        justify-content: center;
        align-items: center;
        }
        
        
        .Container img{
        height: 300px;
        border-radius: 50%;
        margin-left:30px; 
        }
        
        .Container h1{
            margin-top: 2%;
            font-size: 2rem;
            margin-left:10%;
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            }
            

        .Container h2{
        margin-top: 2%;
        font-size: 3em;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        }
        .Container p, ul{
        margin-top: 2%;
        font-size: 1.5rem;
        margin-left:10%;
        }
        .Container dl{
            margin: top 2%;
            font-size: 1.5rem;
            font-weight: bold;
            margin-left: 5%;
        }
        .Container dt{
            margin:top 2%;
            font-size:1.5rem;
            font-weight:bold;
            margin-left:5%;
            a{color:rgb(14, 14, 30);}
        }
        .container dt, dd{
            margin-top: 1%;
            font-size:1.4rem;
            font-weight:lighter;
            margin-left: 7%;
        }
        footer {
        line-height: 10px;
        display: flex;
        justify-content: center;
        font-size: 1rem;
        }


        
    /* css to background color and style */

    #intro {
        background-image: url(/images/IMG_4106.jpeg);
        background-size:contain;
        background-repeat:no-repeat;
        background-position-x:center;
        background-blend-mode:lighten;
        opacity:0.8;

        }
        #about{
        background-color: rgb(187, 236, 227);
        background-size:auto;
        height:fit-content;
        }
        #contact{
        background-color: rgb(188, 240, 236);
        background-size: auto;
        height:fit-content
        }