/*This sheet contains CSS for the about.html and faq.html*/

/*format for the body section*/
body {
  display: block;
    margin: 0;
    background-image: linear-gradient(rgb(201, 205, 239), rgb(34, 114, 255));
  }

/*format for header section*/
header {
  display: block;
    text-align: left;
    background-color: rgb(27,33,84);
    padding-top: 50px;
  padding-right: 30px;
  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 {
  display: block;
    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;
    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*/

/*formats text in founder section*/
.founder {
  padding: 30px;
  display: block;
  text-align: justify;
  float: right;
  margin-left: 50%;
  margin-right: 10%;
  margin-top: -40%;
  font-family: sans-serif;
  font-size: larger;
}

/*formats size and border of founder image*/
.founderimg {
  display: block;
  width: 420px;
  border-radius: 20px;
}

/*formats both the image and caption*/
.founderfig {
  display: block;
  margin-left: 10%;
  font-size: smaller;
  font-family: 'Courier New', Courier, monospace;
  text-decoration: rgb(174, 215, 198);
}

/*formats text and image's container*/
.foundercontainer {
  background-color: rgb(147, 187, 255);
  padding: 20px;
  margin-top: -1.2%;
}

/*formats text and image's container*/
.govcontainer {
  background-color: rgb(167, 181, 221);
}

/*formats text in government section*/
.gov {
  padding: 30px;
  display: block;
  text-align: justify;
  margin-right: 50%;
  margin-left: 10%;
  margin-bottom: -200%;
  font-family: sans-serif;
  font-size: larger;
}

/*formats size and border of government image*/
.govimg {
  display: block;
  width: 630px;
  border-radius: 20px;
}

/*formats both the image and caption*/
.govfig {
  float: right;
  margin-top: 8%;
  display: block;
  margin-left: 10%;
  font-size: smaller;
  font-family: 'Courier New', Courier, monospace;
}

/*code adapted from Juliver, 2022 */

/*animates both containers to fade in when the page loads*/
.fade-in { 
  animation: fadeIn 5s;
 }
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
 100% {left: 0;}
}
/*end of adapted code*/

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

/*formats containers & text for the faq questions and answers*/
.q {
  background-color: white;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 10%;
  margin-right: 10%;
  padding: 30px;
  font-family: sans-serif;
  font-size: 23px;
  font-weight: bolder;
  border-radius: 10px;
}

/*formats color for answer*/
.read-more-target {
  color: rgb(0, 47, 128);
}

/*code adapted from Mikiewicz, n.d.*/

/*hides display of checkbox*/
.read-more-state {
  display: none;
}

/*answer text is transparent and hidden before pressing button*/
.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
}

/*when checking that the show more button is pressed, the text is shown again*/
.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

/*if answer text is not shown, button says show more*/
.read-more-state ~ .read-more-trigger:before {
  content: 'Show more';
}

/*if answer text shows, button says show less*/
.read-more-state:checked ~ .read-more-trigger:before {
  content: 'Show less';
}

/*formats the show more/less button*/
.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  padding: 0 .5em;
  color: rgb(0, 47, 128);
  font-size: .9em;
  line-height: 2;
  border: 1px solid #ddd;
  border-radius: .25em;
}
/*end of adapted code*/

/*References

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.
muneebfarman. (n.d.). Dubai Marina Emirates. Pixabay. Retrieved March 26, 2023, from https://pixabay.com/photos/dubai-dubai-marina-emirates-gulf-1227538/. 
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*/