/*This sheet contains CSS for the index.html, login.html, and contact.html*/

/*format for the body section*/
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-image: linear-gradient(rgb(201, 205, 239), rgb(34, 114, 255));
  }

/*format for header section*/
header {
    text-align: left;
    background-color: rgb(27,33,84);
    padding-top: 50px;
  padding-right: 20px;
  padding-bottom: 50px;
  padding-left: 30px;
  margin-bottom: 15px;
}

/*format for home button in header*/
#home {
    color: rgb(247, 247, 247);
    float: right;
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    font-family: sans-serif;
    font-size: large;
}

/*format for contact button in header*/
#contact {
    color: rgb(247, 247, 247);
    float: right;
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    font-family: sans-serif;
    font-size: large;
}

/*format for login button in header*/
#login {
    color: rgb(247, 247, 247);
    float: right;
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    font-family: sans-serif;
    font-size: large;
}

/*move anything related to search bar to the right*/
#search {
    float: right;
}

/*Code adapted from w3schools,(n.d.):*/

/*formats the user input area of the search bar*/
#search input[type=text] {
    padding: 6px;
    margin-top: 8px;
    margin-left: -90px;
    font-size: 17px;
    border: none;
  }

/*formats "Submit" button*/
.search-container button {
  float: right;
    padding: 6px 10px;
    margin-top: 8px;
    margin-right: 16px;
    background: #ddd;
    font-size: 17px;
    border: none;
    cursor: pointer;
  }

/*when hovering on submit button, background color changes*/
.search-container button:hover {
    background: rgb(155, 162, 224);
  }
/*when hovering on header buttons (such as login), background and text color changes*/
#headerItems a:hover {
    background-color: rgb(155, 162, 224);
    color: black;
  }

/*End of adapted code*/


/*formatting for homepage*/

/*subheader container formatting*/
.subheader {
    background-color: rgb(27,33,84);
    text-align: center;
    margin-left: 5px;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 20px;
  }

/*text in subheader formattings*/
.subheader a {
    color: rgb(247, 247, 247);
    display: inline-block;
    text-align: center;
    padding: 14px;
    padding-top: 20px;
    padding-bottom: 20px;
    text-decoration: none;
    font-size: 17px;
    font-family: sans-serif;
    font-size: large;
  }
/*when hovering on subheader buttons, background color changes*/
.subheader a:hover {
    background-color: rgb(155, 162, 224);
    color: black;
  }

/*formatting for left sidebar*/
.sidebarLeft {
    background-color: rgb(27,33,84);
    width: 200px;
    position: absolute;
    text-align: center;
    left: 0;
    padding: 10px;
    padding-bottom: 220px;
    margin-right: 10px;
    padding-top: 30px;
    border-radius: 40px;
    margin-left: 5px;
}
/*formatting for text in left sidebar*/
.sidebarLeft a {
  color: rgb(247, 247, 247);
  display: inline-block;
  text-align: center;
  padding: 14px;
  padding-right: 20px;
  padding-bottom: 20px;
  text-decoration: none;
  font-size: 17px;
  font-family: sans-serif;
  font-size: large;
}  
/*when hovering on left sidebar button, color changes*/
.sidebarLeft a:hover {
  color: rgb(34, 114, 255);
}
/*moves image to center*/
.images {
  margin-left: 235px;
}

/*code adapted from Juliver, 2022 */

/*fades in image when page loads*/
.fade-in { 
  animation: fadeIn 5s;
 }
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
 100% {left: 0;}
}

/*end of adapted code*/

/*formatting for introduction under image*/
.middleIntro {
  margin-left: 240px;
  margin-right: 205px;
  margin-bottom: 10px;
  border-radius: 40px;
}
/*formats text in middle container*/
.middleIntro a {
  color: rgb(255, 255, 255);
  display: inline-block;
  padding: 14px;
  padding-right: 20px;
  padding-bottom: 20px;
  font-size: 17px;
  font-family: sans-serif;
  font-size: large;
} 
/*formats header of middle container*/
#header {
  font-size: xx-large;
  font-weight: bold;
}
/*formats right sidebar*/
.sidebarRight {
  background-color: rgb(27,33,84);
  border-radius: 30px;
  width: 180px;
  position: absolute;
  right: 0;
  padding-top: 20px;
  padding-bottom: 20px;}

/*formats text in right sidebar*/
.sidebarRight a {
    color: rgb(247, 247, 247);
    margin-left: 7px;
    display: inline-block;
    text-align: center;
    padding: 50px;
    text-decoration: none;
    font-size: larger;
    font-weight: bold;
    font-family: sans-serif;
  } 
/*when hovering on sidebar buttons, color changes*/
.sidebarRight a:hover {
    color: rgb(34, 114, 255);
  }
/*formats "More" section container*/
.moreSection {
    background-color: rgb(27,33,84);
    width: 180px;
    position: absolute;
    right: 0;
    padding-top: 10px;
    padding-bottom: 20px;
    margin-top: -250px;
    border-radius: 30px;
    margin-left: 10px;
  }
/*formats text in "More" section*/
.moreSection a {
      color: rgb(247, 247, 247);
      margin-left: 7px;
      display: inline-block;
      text-align: center;
      padding: 30px;
      text-decoration: none;
      font-size: larger;
      font-weight: bold;
      padding-bottom: 57px;
      font-family: sans-serif;
    }
/*formats header of "More" section*/
.moreSection p{
      color: rgb(247, 247, 247);
      margin-left: 7px;
      display: inline-block;
      text-align: center;
      text-decoration: none;
      font-size: x-large;
      font-weight: bolder;
      padding-left: 7px;
    }
/*when hovering on buttons in "More" section, background changes*/
.moreSection a:hover {
      color: rgb(34, 114, 255);
    }


/*formatting for login page*/

/*formats login introduction text*/
.introLogin {
  background-color: rgb(27,33,84);
  color: white;
  font-weight: bolder;
  font-size: xx-large;
  text-align: center;
  font-family: sans-serif;
  padding: 20px;
}

/*background image for login page*/
.loginimg {
  background-image: url(loginbg.jpeg);
  background-repeat: no-repeat;
  background-size: cover;
}

/*code adapted from w3Schools*/

/*formats input boxes*/
.input {
width: 100%;
padding: 12px;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
}

/*formats submit button*/
input[type=submit] {
background-color: rgb(34, 114, 255);
color: rgb(255, 255, 255);
font-weight: bold;
border-radius: 30px;
}

/*formats container and text color*/
.loginContainer {
  color: white;
  background-color: rgb(35, 42, 105);
  padding-top: 80px;
  padding-bottom: 80px;
  padding-left: 150px;
  padding-right: 150px;
  margin-left: 25%;
  margin-right: 25%;
}
/*End of adapted code*/


/*formatting for contact page*/

/*background image for contact page*/
.contactimg {
  background-image: url(contactbg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

/*formats text and background color of intro container*/
.contactIntro {
  background-color: rgb(27,33,84);
  color: white;
  font-weight: bold;
  font-size: x-large;
  text-align: center;
  font-family: sans-serif;
  padding: 20px;
  margin-left: 70px;
  margin-right: 70px;
}

/*formats contact form container*/
.contactContainer {
  background-color: rgb(42, 48, 97);
  padding-top: 80px;
  padding-bottom: 80px;
  padding-left:20px;
  padding-right: 20px;
  margin-left: 30%;
  margin-right: 30%;
  color: white;
}

/*formats contact form input boxes*/
input[type=text], select {
  box-sizing: border-box;
  width: 100%; 
  padding: 12px; 
  border: 1px solid rgb(0, 0, 0); 
  margin-top: 10px;
  margin-bottom: 20px;
  resize: vertical;
}

/*specifically for the "Query" box to make it bigger than the other boxes*/
.query {
  box-sizing: border-box;
  width: 100%; 
  padding: 12px; 
  border: 1px solid rgb(0, 0, 0); 
  margin-top: 10px;
  margin-bottom: 20px;
  resize: vertical;
  height: 200px;

}

/*References

Danor. (n.d.). Burj Khalifa Dubai City. Pixabay. Retrieved March 26, 2023, from https://pixabay.com/photos/burj-khalifa-dubai-city-night-7005738/. 
sharonang. (n.d.). Night View Evening. Pixabay. Retrieved March 26, 2023, from https://pixabay.com/photos/night-view-evening-pray-muslim-3185810/.
Juviler, J. (2022, June 7). How to add a CSS fade-in transition animation to text, Images, scroll & hover. HubSpot Blog. Retrieved March 15, 2023, from https://blog.hubspot.com/website/css-fade-in#:~:text=In%20the%20CSS%2C%20use%20the,creates%20the%20fade%2Din%20effect.
W3Schools. (n.d.). How to - password validation. How To Create a Password Validation Form. Retrieved March 3, 2023, from https://www.w3schools.com/howto/howto_js_password_validation.asp
W3Schools. (n.d.). How to - search bar. How To Create a Search Bar. Retrieved February 27, 2023, from https://www.w3schools.com/howto/howto_css_searchbar.asp*/