/* general settings */
*, ::after, ::before {
    box-sizing: border-box;
  }

  html {
    height:100%;
    width:100%;
    margin:0px;
    zoom: 1;
  }

  body {
    height:100%;
    width:100%;
    background-color:#f8fcfd; 
    color:#28334AFF;
  }

  .container-fluid{
    padding:0px;
  }
/* end of general style  */


/* navbar  */
  .navbar {
    padding: 5px 45px;
    font-weight: bold;
    background-color: #8ABAD3FF!important;
  }
  .navbar-brand{
      padding:0px
  }

  .navbar-brand img {
      width:60px;
      height:50px;
  }

  #contact-icon {
    margin:0px !important;
    padding:0px;
  }

  .navbar-light .navbar-toggler-icon {
    background-image: url("../pics/html-coding-5.png");
    padding:0px;
    font-size: 1.5rem;
  }

  .navbar-light .navbar-toggler {
    border:none;
    padding:0px;
  }

  .nav-link {
    padding:8px 15px;
  }

  #navbarTogglerDemo03 ul{
    margin-top:0 !important;
  }

  .navbar-nav .nav-link:hover{
    color:white!important;
  }

  .contact-icon {
    margin-top:10px;
    margin-left:10px;
    height:32px;
    width:32px;
    float:right !important;
  }


  /* conatct icons will disapear in small screens as we have conatct me page anyway */
  @media screen and (max-width:767px) {
    #contact-icon {
      display:none;
    }
  
    .navbar-brand img {
      width:50px;
      height:40px;
    }
    .navbar-brand img {
      display:none

    }
  }

/* end of navbar style  */



/* main content */
  main {
    position:relative;
    text-align:center;
  }

  .align-self-center {
    margin:auto;
  }

  main h1 {
    font-size: 6em;
    font-weight: 750;
  }
  main h2 {
    font-size:2em;
  }

  .greeting {
    margin-top:13%;
  }

  span.highlight-font {
    color: #D44638;
  }

  #intro {
    margin:15px 0px;
    font-size: 1em;
    font-weight: lighter;
    font-family: 'Sriracha', cursive,Times, 'Times New Roman', serif;
  }

  #intro:hover {
    font-size: 1.2em;
    background-color: rgb(250,250,253,0.3);
  }

  p img {
    height:1.1em;
    width:1.1em;
  }

  /* resizing main content for diffrent screens */
    @media screen and (max-width:768px) {
      main h1 {
        font-size: 5em;
        font-weight: 750;
      }
     
    }

    @media screen and (max-width:576px){
      .greeting {
        margin-top:35%;
      }
      #intro {
        margin:30px 20px 0px;
        font-size: 16px;
        pointer-events: none;
        text-align: justify;
      }

      main h1 {
        font-size: 4em;
      }
      main h2 {
        font-size: 1.2em;
      }
    }
/* end of main content style  */