/* Styles for screens max width 1000px wide or less mobile landscape orientation */
  @media screen and (max-width: 1000px),(orientation: landscape) {
    body {
      background-image: url(background.png);
      width: 100%;
      background-size: cover;
      height: 240vh;
      background-repeat: no-repeat;
      background-position: center;
    }

/*intro styling */

 .intro_proj{
  text-align: center;
  align-items: center;
  font-family:"Roboto", Verdana, Geneva, Tahoma, sans-serif;
  color: white;
  padding-bottom: 20px;
 }

 /*recipe project styling*/

 .project_recipe{
  display: block;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-family:"Roboto", Verdana, Geneva, Tahoma, sans-serif;
  color: white;
  font-size: 15px;
  background-image: radial-gradient(rgb(63, 66, 66),rgb(106, 167, 154),rgb(13, 63, 34));
  border-radius: 15px;
  width: 250px;
  padding: 10px;
  margin: 10px auto;
 }

  .project_transaction{
  display: block;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-family:"Roboto", Verdana, Geneva, Tahoma, sans-serif;
  color: white;
  font-size: 15px;
  background-image: radial-gradient(rgb(63, 66, 66),rgb(106, 167, 154),rgb(13, 63, 34));
  border-radius: 15px;
  width: 250px;
  padding: 10px;
  margin: 40px auto;
 }

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

  /* 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;
}
}




/* 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: 150vh;
      background-repeat: no-repeat;
      background-position: center;
    }
  
/*intro styling */

 .intro_proj{
  text-align: center;
  align-items: center;
  font-family:"Roboto", Verdana, Geneva, Tahoma, sans-serif;
  color: white;
  padding-bottom: 20px;
 }

 /*recipe project styling*/

 .project_recipe{
  display: block;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-family:"Roboto", Verdana, Geneva, Tahoma, sans-serif;
  color: white;
  font-size: 15px;
  background-image: radial-gradient(rgb(63, 66, 66),rgb(106, 167, 154),rgb(13, 63, 34));
  border-radius: 15px;
  width: 250px;
  padding: 10px;
  margin: 10px auto;
 }

  .project_transaction{
  display: block;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-family:"Roboto", Verdana, Geneva, Tahoma, sans-serif;
  color: white;
  font-size: 15px;
  background-image: radial-gradient(rgb(63, 66, 66),rgb(106, 167, 154),rgb(13, 63, 34));
  border-radius: 15px;
  width: 250px;
  padding: 10px;
  margin: 40px auto;
 }


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

  /* 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;
}
}



/* Desktop orientation */
  @media screen and (min-width: 1040px){
    body {
      background-image: url(background.png);
      width: 100%;
      background-size: cover;
      height: 120vh;
      background-repeat: no-repeat;
      background-position: center;
    }
  
/*intro styling */

 .intro_proj{
  text-align: center;
  align-items: center;
  font-family:"Roboto", Verdana, Geneva, Tahoma, sans-serif;
  color: white;
  padding-bottom: 20px;
 }

 /*recipe project styling*/

 .project_recipe{
  display: block;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-family:"Roboto", Verdana, Geneva, Tahoma, sans-serif;
  color: white;
  font-size: 20px;
  background-image: radial-gradient(rgb(63, 66, 66),rgb(106, 167, 154),rgb(13, 63, 34));
  border-radius: 15px;
  width: 350px;
  padding: 10px;
  margin: 10px auto;
 }

  .project_transaction{
  display: block;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-family:"Roboto", Verdana, Geneva, Tahoma, sans-serif;
  color: white;
  font-size: 20px;
  background-image: radial-gradient(rgb(63, 66, 66),rgb(106, 167, 154),rgb(13, 63, 34));
  border-radius: 15px;
  width: 350px;
  padding: 10px;
  margin: 40px auto;
 }


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

  /* 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;
}
}