*{

    padding:0px;
    margin:0px;
    box-sizing:border-box;   
}

.body_id{

    height:100%;
    width:100%; 
}  
 
 
.containergrid{
  
  height:100vh;
  width:100%;                  
  display:grid; 
  grid-template-areas: 
   "header"
   "maincontent"
   "footer";
   grid-template-columns: 1fr; 
   grid-template-rows: 0.15fr 1.75fr 0.1fr;
   grid-gap:10px;
   background-image:url(images/mainbackground.jpg);
   background-size:cover;
   background-position:center;
   
}
    



.header{

    background-color:#1c3b7a;
    grid-area:header;
    position:relative;
    position: sticky;
    top:0px;
    left:0px;  
    z-index: 1; 
    
  
}


.maincontent{

 
    background-image:linear-gradient(0deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%);   
    opacity:0.3; 
    position: relative;  
    grid-area: maincontent;
    margin: 0px 7px 0px 7px;
  /*  overflow: hidden;       hides the circles svg too */    

}

.footer{

    grid-area: footer;
    text-align: center;
    background-color: #111a3c;
 
 }

.navbar{

    height:100%;
    width:100%; 
    position:relative;

}

.nav-side svg{

    position:absolute;
    top:23px;
    left:11px;

}   

.name{ margin-top: 2em;}


.logo{

    position:absolute;
    right:21px;
    top:7px;
    height:3.5rem;
    width:3.5rem;
    border-radius:50%;
}


.main-men{
 
   text-align: center;

}


.main-men li{

list-style:none;
display: inline-block;
 margin: 3px 5% 3px 3px;
  line-height: 80%;   
}


.main-men li a{

        font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman';
        display:block; 
        color: #f2f2f2;
        text-align: center;
        padding:25px;
        text-decoration: none;
        font-size: 27px;
        font-weight: bold;
        cursor: pointer;
        letter-spacing: 1.5px;
        text-shadow:0 0 5px #3f3e3e, 0 0 25px #3f3e3e, 0 0 50px #3f3e3e, 0 0 200px #3f3e3e; /*0 0 5px #e9879c, 0 0 25px #e9879c, 0 0 50px #e9879c, 0 0 200px #e9879c; */

}  

.main-men li a:hover{

        background-color: #6e788d57;
        color:rgba(255, 255, 255, 0.973);
        font-weight: bold;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman';
        border-radius:11%;
        border-color: #ac4b4b;

}

.side-nav{

        height:100vh;
        width:0px;  
        position:fixed;
        z-index: 1;
        top: 0px;
        left: 0px;
        background-color: #111;
        opacity: 0.9;
        padding-top:3em;
        overflow-x: hidden;
        transition: 0.5ms;
        
} 

.side-nav .close-btn{


        text-decoration: none;
        color: #ac4b4b;
        position:absolute;                 /* the position of the close sign inside side menu*/
        top:0px;
        right: 22px;
        font-size:35px;
        margin-left: 51px;

}



.side-nav a:hover{

        color:rgb(158, 230, 116);
        font-size: 31px;
}
.side-nav .close-btn:hover{

        color:rgb(158, 230, 116);
        font-size: 39px;
}

.sidemen{
    
   list-style:none;
   margin-top:3px;
   margin-bottom: 35px;

}

.sidemen li{
       
    display:block;
        
     }

.sidemen li a {

        text-decoration: none;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 25px;
        display: block;
        padding: 15px 10px 10px 31px;
        color: cornsilk;
        transition:0.5s;

    }  

.sidemen li a i{
    
        float: left;
        padding-right:31px;
       
    }
 
    
.sociallist{

        list-style: none;
        text-align: center;
        margin-top:15px;
        margin-left: -21px;
     
    
 }
    
.sociallist li{

        padding-top:3px;
        
        display:inline-block;
     /* outline: double 2px white;  */
        margin-left:3px;
        color: #7adbec;
    }

.sociallist li a{

        text-decoration: none;
        font-size:31px;
        margin:11px 0px 0px 5px;
      
    }
    
 .fa-brands{
       
        color: #7adbec;
        width:100%;
    }

    
.line{

        height:20px;
        
}   
    
.sociallist2{

    list-style: none;
    text-align: center;
    margin-top: 15em;
    
 

}

.sociallist2 li{
    
    padding-right: 10px;
    display:inline-block;
}
.sociallist2 li a{

    text-decoration: none;
    font-size: 15px;
    background-color:#f2f2f2;


}

.sociallist2 .fa-brands{

    color: gray;
}

 

 /*------------  main content ------------  */
 
 .c4{
     
    fill:blue;   
    stroke:black; 
    stroke-width:3px;

 }

 .c3{
     
    fill:red;    
    stroke:black;    
    stroke-width:3px;
 }

 .c2{

    fill:white; 
    stroke:black;    
    stroke-width:3px;
 }

 .c1{

    fill:black;
    stroke:black;    
    stroke-width:3px;
 }


.text1{

    position: absolute;
    left:19%; 
    top:27%;
    font-size: 3.8rem;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman';
    letter-spacing:7px;
    

     
    
}

.text1 em{

       text-shadow:0px 2px whitesmoke;
       background: #111;
       color:rgb(241, 252, 251);
       font-style:normal;
       font-size: 3.9rem;
       font-family:Cambria, Cochin;
       border-radius: 15% 15%; 

}

.text1::before {

  content:'HI,';
  background-color:red;
  letter-spacing: 1px;
 

}

.text2{
    
    position: absolute;
    left:22%;
    top:47%;
    width:max-content;
    font-family:'goldman';
    font-size: 3.7rem;
    color:rgb(19, 11, 11);  
    background-color:white; 
    border-radius: 5% 5%;
    letter-spacing:9px;
    font-weight:bold;
    outline: double 5px rgb(12, 12, 12); 
    text-shadow: 7px 7px 10px #383535d8;
}

.text2 em{

     font-style:normal;
}
 
  
 /*------------------------  about me button------------- */
.aboutme{

    height:3rem;
    width:10rem;    /* width:0px;  */
    border-radius:7px;
    background-color:rgb(34, 11, 11);
    position: absolute;
    top:59%;
    left:35%;
    /* display: none;
    overflow-x:hidden; */

}
 .aboutme a{

    font-size:2em;
    font-family: 'Times New Roman';
    color:#e7e7e7;
    text-decoration: none;

 }

 /*-----------------------------------------------------------*/

.svgcircle{

 height:100%;
 width:100%;   

}


.footer p{

    margin :1.5em;
    color:#f2f2f2;
    letter-spacing: 1px;
    font-family:Arial;
    font-size: 12px;
 
 }

 .footer a{
 
   text-decoration: none;
   padding-left:1em;
   font-size:1em;
   font-family:Arial;
   color:#f2f2f2;
 }
 


.footer p em{
    
    font-style: normal;
    font-weight:normal;
    font-size: larger;
    margin-top:1.5em;
     
}

 
 
 /* -------------animation Part -------------- */  

   .text2::before, .text2::after{

    content: "";
    position: absolute;
    top:0px;
    bottom:0px;
    right:0px;
    left:0px;
}

.text2::before{
     
    background-color:white;  
    animation: typewriter 3s steps(14) 1s forwards; /* doubled the steps b/se they are capital letters */ 
}

 
.text2::after{
   
  width:0.35rem;
  background:black;
  animation: typewriter 3s steps(14) 1s forwards, blink 750ms steps(14) infinite;

}   
            
@keyframes typewriter{


        to{
           left:100%;
        }
}


@keyframes blink {

    to{

        background:transparent;    
    }
    
}
           




 /*-------------- Media Query --------------------  */


 @media  (max-width:1570px) {
     
.text1 {transform: translate(-0.35em, 0.35em); position:absolute; left:17%;}
.text2 {transform: translate(-0.35em, 0.35em);position:absolute; left:21%;}  
}



 @media (max-width:1350px) {
 
    /*.text2{display:none;}*/ 
    
    .text1::before{ font-size:1.7em;}
    .text1{position:absolute;  top:12%;  left:11%;}
    .text1 em{background:none; font-size:2.3em; color:rgb(71, 19, 30); text-shadow: 0 0 5px #eeb8c4, 0 0 25px #eeb8c4, 0 0 50px #eeb8c4, 0 0 200px #eeb8c4;}
    .text2::before, .text2::after{display: none;}
    .text2{background:transparent;letter-spacing:7px; font-size:7rem; color:url(images/background3.jpg); font-family:'Monoton', cursive; position:absolute; top:50%;  left:12%; outline: none;}
    .text2 em{color:white; text-shadow:0 0 5px #ff96ad, 0 0 25px #ff96ad, 0 0 50px #ff96ad, 0 0 200px #ff96ad;}
    .containergrid{background-image:url(images/brick.jpg); background-size:cover;}
    .maincontent{background-color:#3e7773; opacity:0.7;}
   

}
 

@media only screen and (orientation:landscape) and (max-width:895px) {  
    .text2{display:none;} 
    
    .containergrid{
    
        display:grid; 
        grid-template-columns:1fr;
        grid-template-areas: 
        "header"
        "maincontent"
        "footer";
        grid-template-rows: 0.5fr 1.7fr 0.1fr;   
        grid-gap:10px; 

       }      
}    

 
@media (max-width:870px) {
    
        .main-men{display:none;}
        .text2{font-size:3.5em; font-family:Cambria, Cochin, Georgia; text-shadow: 2px 2px rgb(32, 18, 18);}
        .text2 em{font-family:Cambria, Cochin, Georgia; color:black; text-shadow: 2px 2px rgb(32, 18, 18);}
        .text1{position:absolute;top:25%; left:5%; font-size: 1.7em;}
        .text1 em{color:red; text-shadow:3px 3px rgb(1, 1, 1);}
        .text1::before{font-size:1.8em;} 
        .containergrid{background-image:url(images/back3.jpg);}  
        .maincontent{opacity:0.7;}
        .logo{top:5px;} 
        .nav-side{top:7px;} 
        
      
}
   
@media (max-width:730px) {

    .logo{top:7px;} 
    .containergrid{
    
        display:grid; 
        grid-template-columns:1fr;
        grid-template-areas: 
        "header"
        "maincontent"
        "footer";
        grid-template-rows: 0.2fr 1.7fr 0.1fr;   
        grid-gap:10px; 

       } 
     
}
@media  (max-width:450px) {
    
    .text1{font-size: 1.5em;}  
    .text2{display:none;} 
    .text1 em{background:transparent;}
   /* .logo {padding-top: 2px;}  */
    .maincontent{opacity:0.7;}

    .containergrid{
        display:grid; 
        grid-template-columns:1fr;
        grid-template-areas: 
        "header"
         "maincontent"
         "footer";
        grid-template-rows: 0.2fr 1.7fr 0.1fr;  
        grid-gap:10px; 

       }  
    
}


@media  (max-width:400px) {
   
    .text1{display:none;}  
    .logo{height:3.3rem; width:3.3rem;} 
   
}


@media  (max-width:130px) {

    .logo{display:none;}  
    .containergrid{background-image:none;}
    
}