* {
    margin: 0px;
    padding: 20px;
    box-sizing: border-box;
    
}
html {
    scroll-behavior: smooth;
    width: 100; overflow:auto
}

body{
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(0, 0, 0);
    background-color: rgb(206, 240, 252);
    line-height: 40px;
}

header{
    width: 100%;
    height: 100px;
    background-color: rgb(255, 221, 252);
    box-shadow: 2px 10px 10px rgb(112, 181, 202);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
   
    
}

header img{
    margin-left: 50px;
    margin-top: -53px;
    width: 60%;
}

.header{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

}
main{
    background-color:none
}

main{
    padding: 20px;
    padding-left: 160px;
    /* for 4 position top right bottom left */
    padding: 30px 20px 20px 20px;
    /* combined left and right */

}

main article p {
    max-width: 50ch;
}

nav ul li {
    display: inline-block;

}

    
#banner{
    background-image: url(../img/bannerimage.png); 
    background-size: cover;
    width: 100%;
    height: 30vh;
    background-position: center;
    box-shadow: 2px 10px 10px rgb(112, 181, 202);
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    
}

#interest{
    background-color: rgb(193, 238, 226);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 20px;
    text-align:center;
    border-radius: 200px;
    box-shadow: 2px 10px 10px rgb(112, 181, 202);
    color: rgb(0, 0, 0);
    
}

#interest figure img{
    width: 100%;
}

#interest h2{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 2.5em;
}

.h1{
    text-align: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 1.5em;
    
}

#aboutme{
    text-align: center;
    background-color: rgb(193, 238, 226);
    box-shadow: 2px 10px 10px rgb(112, 181, 202);
    border-radius: 200px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.container figcaption{
    background-color: white;
    border-radius: 50px;
    box-shadow:  2px 2px 10px rgb(162, 199, 188);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-ser
}

footer{
    padding: 20px;
    text-align: center;
    background-color: rgb(193, 238, 226);
    border-radius: 200px;
    box-shadow: 2px 10px 10px rgb(112, 181, 202);
}

footer img :nth-child(3) {
    position: relative;
    top: -8px;
}