/* Mobile portrait orientation Styles for screens max width 455px wide or less */
  @media screen and (max-width: 450px),(orientation: portrait) {
    body {
      background-image: url(background.png);
      width: 100%;
      background-size: cover;
      height: 100vh;
      background-repeat: no-repeat;
      background-position: center;
       font-family:"Roboto", Verdana, Geneva, Tahoma, sans-serif;
  color: white;
      
    }


/*header styling*/
.header{
  padding-top: 30px;  
  text-align: center;
  align-items: center;
  justify-content: center;
  display: flex;
}


/*grid list for skills*/

.skills_gridlist{
    display: grid;
    grid-template-columns: 10rem 10rem;
    grid-gap: 5px;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
}

.skill{
    padding: 18px;
    font-size: 18px;
    color: white;
}

/* html logo styling*/
.html5 img{
    display: inline-block;
    width: 50px;
    height: auto;
    padding: 10px;
  }

/*animation for html5 logo*/
  .html5 img:hover {
    animation: scale, textglow;
    animation-duration:  1s, 1s;
    animation-iteration-count: infinite, infinite;
  }

/*css3 styling*/

.css3 img{
    display: inline-block;
    width: 50px;
    height: auto;
    padding: 20px;
}

/*css3 animation*/
.css3 img:hover {
    animation: scale, textglow;
    animation-duration:  1s, 1s;
    animation-iteration-count: infinite, infinite;
  }


/*javascript styling*/

.javascript img{
    display: inline-block;
    width: 50px;
    height: auto;
    padding: 10px;
}

/*javascript animation*/
.javascript img:hover {
    animation: scale, textglow;
    animation-duration:  1s, 1s;
    animation-iteration-count: infinite, infinite;
  }

/*problem solving styling*/

.problem-solving img{
    width: 110px;
    height: auto;
    display: inline-block;
    padding: 10px;
}

/*problem solving animation*/
.problem-solving img:hover {
    animation: scale, textglow;
    animation-duration:  1s, 1s;
    animation-iteration-count: infinite, infinite;
  }


/*responsive design styling*/

.responsivedesign img{
    width: 60px;
    height: auto;
    display: inline-block;
    padding: 10px;
}

/*responsive design animation*/
.responsivedesign img:hover, .skill:hover {
    animation: scale, textglow;
    animation-duration:  1s, 1s;
    animation-iteration-count: infinite, infinite;
  }


/*team collaboration styling*/
.team-collaboration img{
    width: 70px;
    height: auto;
    padding: 10px;
}

/*team collaboration animation*/
.team-collaboration img:hover,.skill:hover  {
    animation: scale, textglow;
    animation-duration:  1s, 1s;
    animation-iteration-count: infinite, infinite;
  }
  

  /*keyframes for scale animation*/

  @keyframes scale {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }

  /*keyframes for text animation*/
  @keyframes textglow {
    0% {
      color: white;
    }
    50% {
      color: rgb(54, 218, 185);
    }
    100% {
      color: white;
    }
  }



  /* NAV */

  nav {
  width: 100%;
  overflow:visible;
  display: flex;
  justify-content: center;
}

nav a{
width: 80px;
display: inline block;
text-decoration: none;
font-size: 17px;
font-family:"Roboto", Verdana, Geneva, Tahoma, sans-serif;
color: white;
text-align: center;
justify-content:space-evenly;
padding-bottom: 0px;
}

nav a:hover {
  border-bottom: 2px solid rgb(54, 218, 185);
  transition: 0.5s;
}

ul {
  padding: 5px 12px;
  margin: 0px 2px;
  list-style: none;
  text-align: center;
  justify-content: center;
}

li {
  float:left;
  font-family: "Comic Relief", system-ui;
  font-weight: 400;
  font-size: larger;
  text-align: center;
  justify-content: center;
  color: white;
}

  strong{
    font-style: italic;
    color:rgb(54, 218, 185);
  }

}

/* End of Mobile portrait orientation Styles for screens max width 455px wide or less */




/*Start Mobile Landscape orientation max width: 1000px wide*/
  @media screen and (max-width: 1000px) and (orientation: landscape) {
    body {
      background-image: url(background.png);
      width: 100%;
      background-size: cover;
      height: 180vh;
      background-repeat: no-repeat;
      background-position: center;
       font-family:"Roboto", Verdana, Geneva, Tahoma, sans-serif;
  color: white;
    }
     
  
/*header styling*/
.header{
    text-align: center;
  align-items: center;
  justify-content: center;
  display: flex;
}


/*grid list for skills*/

.skills_gridlist{
    display: grid;
    grid-template-columns: 10rem 10rem;
    grid-gap: 5px;
    padding: 5px;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.skill{
    padding: 18px;
    font-size: 18px;
    color: white;
}

/* html logo styling*/
.html5 img{
    display: inline-block;
    width: 50px;
    height: auto;
    padding: 10px;
  }

/*animation for html5 logo*/
  .html5 img:hover {
    animation: scale, textglow;
    animation-duration:  1s, 1s;
    animation-iteration-count: infinite, infinite;
  }

/*css3 styling*/

.css3 img{
    display: inline-block;
    width: 50px;
    height: auto;
    padding: 20px;
}

/*css3 animation*/
.css3 img:hover {
    animation: scale, textglow;
    animation-duration:  1s, 1s;
    animation-iteration-count: infinite, infinite;
  }


/*javascript styling*/

.javascript img{
    display: inline-block;
    width: 50px;
    height: auto;
    padding: 10px;
}

/*javascript animation*/
.javascript img:hover {
    animation: scale, textglow;
    animation-duration:  1s, 1s;
    animation-iteration-count: infinite, infinite;
  }

/*problem solving styling*/

.problem-solving img{
    width: 110px;
    height: auto;
    display: inline-block;
    padding: 10px;
}

/*problem solving animation*/
.problem-solving img:hover {
    animation: scale, textglow;
    animation-duration:  1s, 1s;
    animation-iteration-count: infinite, infinite;
  }


/*responsive design styling*/

.responsivedesign img{
    width: 60px;
    height: auto;
    display: inline-block;
    padding: 10px;
}

/*responsive design animation*/
.responsivedesign img:hover, .skill:hover {
    animation: scale, textglow;
    animation-duration:  1s, 1s;
    animation-iteration-count: infinite, infinite;
  }


/*team collaboration styling*/
.team-collaboration img{
    width: 70px;
    height: auto;
    padding: 10px;
}

/*team collaboration animation*/
.team-collaboration img:hover,.skill:hover  {
    animation: scale, textglow;
    animation-duration:  1s, 1s;
    animation-iteration-count: infinite, infinite;
  }
  

  /*keyframes for scale animation*/

  @keyframes scale {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }

  /*keyframes for text animation*/
  @keyframes textglow {
    0% {
      color: white;
    }
    50% {
      color: rgb(54, 218, 185);
    }
    100% {
      color: white;
    }
  }



  /* NAV */

  nav {
  width: 100%;
  overflow:visible;
  display: flex;
  justify-content: center;
}

nav a{
width: 80px;
display: inline block;
text-decoration: none;
font-size: 17px;
font-family:"Roboto", Verdana, Geneva, Tahoma, sans-serif;
color: white;
text-align: center;
justify-content:space-evenly;
padding-bottom: 0px;
}

nav a:hover {
  border-bottom: 2px solid rgb(54, 218, 185);
  transition: 0.5s;
}

ul {
  padding: 5px 12px;
  margin: 0px 2px;
  list-style: none;
  text-align: center;
  justify-content: center;
}

li {
  float:left;
  font-family: "Comic Relief", system-ui;
  font-weight: 400;
  font-size: larger;
  text-align: center;
  justify-content: center;
  color: white;
}

  strong{
    font-style: italic;
    color:rgb(54, 218, 185);
  }


}




/* Desktop Styling */
  @media screen and (min-width: 1040px){
    body {
      background-image: url(background.png);
      width: 100%;
      background-size: cover;
      height: 130vh;
      background-repeat: no-repeat;
      background-position: center;
       font-family:"Roboto", Verdana, Geneva, Tahoma, sans-serif;
  color: white;
      
    }


/*header styling*/
.header{
  padding-top: 30px;  
  text-align: center;
  align-items: center;
  justify-content: center;
  display: flex;
}


/*grid list for skills*/

.skills_gridlist{
    display: grid;
    grid-template-columns: 10rem 10rem;
    grid-gap: 5px;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
}

.skill{
    padding: 18px;
    font-size: 18px;
    color: white;
}

/* html logo styling*/
.html5 img{
    display: inline-block;
    width: 50px;
    height: auto;
    padding: 10px;
  }

/*animation for html5 logo*/
  .html5 img:hover {
    animation: scale, textglow;
    animation-duration:  1s, 1s;
    animation-iteration-count: infinite, infinite;
  }

/*css3 styling*/

.css3 img{
    display: inline-block;
    width: 50px;
    height: auto;
    padding: 20px;
}

/*css3 animation*/
.css3 img:hover {
    animation: scale, textglow;
    animation-duration:  1s, 1s;
    animation-iteration-count: infinite, infinite;
  }


/*javascript styling*/

.javascript img{
    display: inline-block;
    width: 50px;
    height: auto;
    padding: 10px;
}

/*javascript animation*/
.javascript img:hover {
    animation: scale, textglow;
    animation-duration:  1s, 1s;
    animation-iteration-count: infinite, infinite;
  }

/*problem solving styling*/

.problem-solving img{
    width: 110px;
    height: auto;
    display: inline-block;
    padding: 10px;
}

/*problem solving animation*/
.problem-solving img:hover {
    animation: scale, textglow;
    animation-duration:  1s, 1s;
    animation-iteration-count: infinite, infinite;
  }


/*responsive design styling*/

.responsivedesign img{
    width: 60px;
    height: auto;
    display: inline-block;
    padding: 10px;
}

/*responsive design animation*/
.responsivedesign img:hover, .skill:hover {
    animation: scale, textglow;
    animation-duration:  1s, 1s;
    animation-iteration-count: infinite, infinite;
  }


/*team collaboration styling*/
.team-collaboration img{
    width: 70px;
    height: auto;
    padding: 10px;
}

/*team collaboration animation*/
.team-collaboration img:hover,.skill:hover  {
    animation: scale, textglow;
    animation-duration:  1s, 1s;
    animation-iteration-count: infinite, infinite;
  }
  

  /*keyframes for scale animation*/

  @keyframes scale {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }

  /*keyframes for text animation*/
  @keyframes textglow {
    0% {
      color: white;
    }
    50% {
      color: rgb(54, 218, 185);
    }
    100% {
      color: white;
    }
  }



  /* NAV */

  nav {
  width: 100%;
  overflow:visible;
  display: flex;
  justify-content: center;
}

nav a{
width: 80px;
display: inline block;
text-decoration: none;
font-size: 20px;
font-family:"Roboto", Verdana, Geneva, Tahoma, sans-serif;
color: white;
text-align: center;
justify-content:space-evenly;
padding-bottom: 0px;
}

nav a:hover {
  border-bottom: 2px solid rgb(54, 218, 185);
  transition: 0.5s;
}

ul {
  padding: 5px 12px;
  margin: 0px 2px;
  list-style: none;
  text-align: center;
  justify-content: center;
}

li {
  float:left;
  font-family: "Comic Relief", system-ui;
  font-weight: 400;
  font-size: larger;
  text-align: center;
  justify-content: center;
  color: white;
}

  strong{
    font-style: italic;
    color:rgb(54, 218, 185);
  }

}