/*Mobile screen styles for landscape orientation*/
@media screen and (max-width: 1000px) and (orientation: landscape) {
  body {
      background-image: url(background.png);
      width: 120%;
      background-size: cover;
      height: 300vh;
      background-repeat: no-repeat;
      background-position: center;
      font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
      color: rgb(255, 255, 255);
  }

  /*h1 & p element styling */
  .header{
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;    /* Centers vertically */          /* Example height for visibility, adjust as needed */
  width: 100%;
  padding: 5px;
  }

.paragraph{
  display: flex;
  justify-content: center;
  align-items: center;    /* Centers vertically */          /* Example height for visibility, adjust as needed */
  width: 100%;
  text-align: center;
  font-size: 13px;
  padding: 5px;
}

/*span element styling for telephone number*/
.tele{
  display: flex;
  justify-content: center;
  align-items: center;    /* Centers vertically */          /* Example height for visibility, adjust as needed */
  width: 100%;
  text-align: center;
  font-size: 13px;
  padding: 5px;
}

.tele img{
  padding-right: 5px;
}

  /*strong ME color */
  strong{
    color: rgb(54, 218, 185);
    font-style: italic;
    padding-left: 8px;
  }

  
  /*form element styling*/
  form{
    padding-left: 20px;
    display: flex;
    width: 320px;
    max-width: 350px;
    margin: 0px auto;
  }

  /*fieldset border*/
  fieldset {
    border: none;
  }


  /*form labels*/
  label {
    display: block;
    padding-top: 15px;
    padding-bottom: 5px;
    padding-right: 10px;
  }

  /*input and textarea styling*/
  input[type="text"],textarea {
    display: block;
    width: 280px;
    padding: 5px;
    max-width: 300px;
    margin: 0 auto;
    background-color: rgba(55, 131, 99, 0.322);
    color: white;
  }

  
  /*placeholder color text */
  ::placeholder{
    color: white;
    font-family:Verdana, Geneva, Tahoma, sans-serif
  }

/*submit button styling */
input[type="submit"] {
  display: block;
  padding: 10px;
  width: 50%;
  max-width: 60%;
  min-width: 40%;
  background-color: white;
  font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
  color: black;
  font-size: medium;
  margin: 15px auto;
}

/*styling hover input*/
input:hover,textarea:hover{
  border: 2px solid white;
  transition: 0.3s;
}

/*styling focused input*/
input:focus,textarea:focus{
  border: 2px solid rgb(54, 218, 185);
  transition: 0.3s;
  outline: none;
}

  /* 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 screen styles for portrait orientation*/
/* Styles for screens 450px 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;
      font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
      color: rgb(255, 255, 255);

    }
  
  /*h1 & p element styling */
  .header{
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;    /* Centers vertically */          /* Example height for visibility, adjust as needed */
  width: 100%;
  padding: 5px;
  }

.paragraph{
  display: flex;
  justify-content: center;
  align-items: center;    /* Centers vertically */          /* Example height for visibility, adjust as needed */
  width: 100%;
  text-align: center;
  font-size: 13px;
  padding: 5px;
}
  

/*span element styling for telephone number*/
.tele{
  display: flex;
  justify-content: center;
  align-items: center;    /* Centers vertically */          /* Example height for visibility, adjust as needed */
  width: 100%;
  text-align: center;
  font-size: 13px;
  padding: 5px;
}

.tele img{
  padding-right: 5px;
}

  /*strong ME color */
  strong{
    color: rgb(54, 218, 185);
    font-style: italic;
    padding-left: 8px;
  }

  /*form element styling*/
  form{
    padding-left: 20px;
    display: inline-block;
    width: 320px;
    max-width: 350px;
    margin: 0px auto;
  }

  /*fieldset border*/
  fieldset {
    border: none;
  }


  /*form labels*/
  label {
    display: block;
    padding-top: 15px;
    padding-bottom: 5px;
    padding-right: 10px;
  }

  /*input and textarea styling*/
  input[type="text"],textarea {
    display: block;
    width: 280px;
    padding: 5px;
    max-width: 300px;
    margin: 0 auto;
    background-color: rgba(55, 131, 99, 0.322);
    color: white;
  }

  /*placeholder color text */
  ::placeholder{
    color: white;
    font-family:Verdana, Geneva, Tahoma, sans-serif
  }

/*submit button styling */
input[type="submit"] {
  display: block;
  padding: 10px;
  width: 50%;
  max-width: 60%;
  min-width: 40%;
  background-color: white;
  font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
  color: black;
  font-size: medium;
  margin: 15px auto;
}

/*styling hover input*/
input:hover,textarea:hover{
  border: 2px solid white;
  transition: 0.3s;
}

/*styling focused input*/
input:focus,textarea:focus{
  border: 2px solid rgb(54, 218, 185);
  transition: 0.3s;
  outline: none;
}

 /* 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 Screen Orientation*/
@media screen and (min-width: 1040px){
  body {
      background-image: url(background.png);
      width: 100%;
      background-size: cover;
      height: 150vh;
      background-repeat: no-repeat;
      background-position: center;
      font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
      color: rgb(255, 255, 255);
  }

  /*h1 & p element styling */
  .header{
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;    /* Centers vertically */          /* Example height for visibility, adjust as needed */
  width: 100%;
  padding: 5px;
  }

.paragraph{
  display: flex;
  justify-content: center;
  align-items: center;    /* Centers vertically */          /* Example height for visibility, adjust as needed */
  width: 100%;
  text-align: center;
  font-size: 13px;
  padding: 5px;
  word-wrap: normal;
}

/*span element styling for telephone number*/
.tele{
  display: flex;
  justify-content: center;
  align-items: center;    /* Centers vertically */          /* Example height for visibility, adjust as needed */
  width: 100%;
  text-align: center;
  font-size: 13px;
  padding: 5px;
}

.tele img{
  padding-right: 5px;
}

  /*strong ME color */
  strong{
    color: rgb(54, 218, 185);
    font-style: italic;
    padding-left: 8px;
  }

  
  /*form element styling*/
  form{
    display: flex;
    width: 320px;
    max-width: 350px;
    margin: 0px auto;
  }

  /*fieldset border*/
  fieldset {
    border: none;
  }


  /*form labels*/
  label {
    display: block;
    padding-top: 15px;
    padding-bottom: 5px;
    padding-right: 10px;
  }

  /*input and textarea styling*/
  input[type="text"],textarea {
    display: flex;
    width: 280px;
    padding: 5px;
    max-width: 300px;
    margin: 0 auto;
    background-color: rgba(55, 131, 99, 0.322);
    color: white;
  }

  
  /*placeholder color text */
  ::placeholder{
    color: white;
    font-family:Verdana, Geneva, Tahoma, sans-serif
  }

/*submit button styling */
input[type="submit"] {
  display: flex;
  padding: 10px;
  width: 50%;
  max-width: 60%;
  min-width: 40%;
  background-color: white;
  font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
  color: black;
  font-size: medium;
  margin: 15px auto;
}

/*styling hover input*/
input:hover,textarea:hover{
  border: 2px solid white;
  transition: 0.3s;
}

/*styling focused input*/
input:focus,textarea:focus{
  border: 2px solid rgb(54, 218, 185);
  transition: 0.3s;
  outline: none;
}

  /* NAV */

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

nav a{
width: 80px;
display: inline block;
text-decoration: none;
font-size: 22px;
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;
}

}