body{
margin:0;
color:#5e5e5e; /*Color of the text*/
background-image:url('./images/bg.jpg');/*backgroung image of the body*/
background-size: cover; /*zoom the picture in to fit the page without repeating the image*/ }
body a {
    text-decoration: none; /*remove links underline in the whole body*/ 
    color:#470218; /*setting the link color in the page*/
}
ul{ padding:0;
    list-style: none;/*remove bullet points from each item*/}
.site-header {
background-color: rgba(0,0,0,0.5); /*color of the header is black with .5 opacity*/
position:fixed;
top:0; /*fixing the header in page top as you scroll*/
width:100%;
z-index:100;/*make the header on top of the animating components*/
}
.site-header a{
    color:whitesmoke; /*overriding the link font color in the body*/
}

.site-header-inner {
    width: 90%;
    margin: 0 auto; /*centering the header element in the middle*/
    display:flex;
    justify-content:space-between;/*seperating the nav and logo to far right and left respectively*/
    align-items:baseline; /*align nav and logo text on the same horizontal line  */
    flex-wrap:wrap;
}


.site-logo {  
    text-transform: uppercase;
    
    }
   
nav a:hover,.site-cta a:hover{
    color:#9c0535; /*change the color of the nav and cta link text when hovered*/
}

    nav ul li {
        display: inline; /*algining nav items in the same line*/
        margin-left: 0.5em;
        margin-right: 0.5em; /*give a space between the nave item*/       
    }
    
     
 .site-banner{
        width:100%;
        background-color:rgba(235, 218, 223,.8); /*adding color and opacity to the banner background*/
        border-radius: 0px 0px 62px 62px; /*giving round corners to the banner*/
        color:#470218;
        
    }
    .small-section{
        width: 88%;
        max-width: 1000px;  
        margin: 0 auto; /*algining contents in the middle of the page*/
        
    }
    .site-banner-inner{
        text-align: center;
        padding-top: 80px;
        padding-bottom: 20px;
        line-height: 150%;    
    }
    .site-banner-inner img{          /*styling personal image*/
        border: 7px solid white;
        border-radius: 20px;
        margin-top:30px
    }
    .site-banner-inner h1{
        font-size:400%;
    }
    .site-banner-inner p{
        font-size: 150%;
    }
    .main-content{    
        padding:50px 50px 50px 50px;
        background-color: whitesmoke;
        box-sizing: border-box;
        /*giving a shadow to the left and right of the main content section*/
        box-shadow:  12px 0 15px -4px rgba(179, 178, 175, 0.97), -12px 0 15px -4px rgba(179, 178, 175, 0.97);
    }
    .main-content h2{
        font-size:180%;
        letter-spacing: 2px;
    }
    .btn{    /*styling buttons in the page*/
        background-color:#c3c7ad;
        border-radius: 70px;
        padding:15PX 32PX;
        font-size:150%;
    }
  
    
        
    .site-cta{
        border-radius: 62px 62px 0px 0px;
        background-color:rgba(235, 218, 223,.8);
    }
    .inner-site-cta{     /* aligning "get in touch" button horizotally with social media list*/
        display: flex;
        flex-wrap: wrap; 
        justify-content:space-between;
        align-items: baseline; 
        align-content: space-between; 
        color:#470218;
        padding-top:15px;
        padding-bottom:15px;
        max-width: 1200px;  
        
    }
    .site-cta-item{ /*giving width to both the "get in touch" button and social media list*/ 
       padding:15px 0px;
        width:48%;
     }
    .site-cta h2{
        font-size:200%;
        ;
    }
     
    .site-cta-item li{
     font-weight: 500;
     text-transform: uppercase;
     display:flex;
     justify-content:flex-start;
     align-items:center; /*aligning social media text and image horizontally*/
     font-size:150%;
    } 
    .site-cta-item li a{
        margin-left:7px; /*separating social media text and image*/
    }
    .site-cta-item li:not(:last-child) {
        margin-bottom: 30px; /*give a space between social media links*/
    }
    
  
   
    footer{
        text-align: center;
        padding:1px 0px;
        background-color: #ebdadf;

    }
   
    @media screen and (max-width: 700px){
        .site-header-inner {  /*aliging header logo and nav items vertically when screem is small*/
            flex-direction: column;
            justify-content:center;
            align-items: center;
            padding-top:5px;
             padding-bottom:5px;
        }
        .site-header-inner ul{
            margin-top:7px;
            margin-bottom:7px;
        }
        .site-banner{
            border-radius:0px 0px 37px 37px;
        }
        
        .site-banner-inner{           /*adjusting padding for small screen*/   
            padding-top: 140px;
            padding-bottom: 35px;
            line-height: 150%

        }
        .site-banner-inner h1{
            font-size:250%;
        }
        .site-banner-inner p{
            font-size:100%;
        }
        .main-content{
            padding-top:50px;
            padding-bottom: 50px;          
            padding:50px 25px 50px 25px;
        }
        
        .btn{ /*make the button size smaller for small screen*/
            border-radius: 70px;
            padding: 15px 24px;
            font-size:100%;
        }
        .site-cta{
            border-radius:37px 37px 0px 0px;
        }
        .inner-site-cta{
            padding-top:5px;
             padding-bottom:5px;           
        }
       
        .site-cta-item:nth-child(n){ /*give cta items 100% width of the cta instead of 48%*/
            width:100%;           
        }
        .site-cta-item li{
            font-size:100%; /*make font size smaller in small screens*/
        }
    }
    
    
   
    .project-list li{   
        max-width:100%;
        display:flex;    /*aligning image of the blog and its paragraph horizontally*/
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        align-content: center;
        padding:15px 0px 15px 0px;
    }
    .project-list li:not(:last-child){
        border-bottom: 1px solid #dedcdc;}
    .project-list li img{
        width:300px;
        height: 200px;
        box-shadow: 0 1px 5px rgba(0,0,0,.05), 0 5px 30px rgba(0,0,0,.2);
        transition: transform .2s; /* Animation */}  
    .project-list li img:hover{
        transform: scale(1.1); /* zooming in projects images when hovering*/
            } 
   .project-paragraph{
        width: 470px;
    }