@import url("https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap");

/*Body styling*/
body {
  font-family: "playfair display", serif;
  color: whitesmoke;
  background-color: rgb(55, 56, 56);
  min-height: 100vh;
  border-bottom: 50px;
  margin: 0;
  padding: 0;
}
/*Adjust position of h1 heading*/
h1 {
  padding-left: 20px;
  margin-bottom: 0;
}

/*adds an underline to h3 headings*/
h3 {
  text-decoration: underline;
}

/*Creates flex container and sets it width*/
.logo-nav-container {
  display: flex;
  width: 100%;
}

/*Styles logo*/
.logo {
  display: inline-flex;
  color: whitesmoke;
  letter-spacing: 4px;
  font-weight: 200;
  font-family: "playfair display", serif;
  flex-grow: 1;
  text-transform: uppercase;
}
/*Navigation styling*/
.nav-menu {
  letter-spacing: 1px;

  display: inline-flex;
  justify-content: right;
}

/*removes underlind from links and sets color to white*/
a {
  text-decoration: none;
  color: whitesmoke;
}

/*Adds color when navigation links are hovered over*/
a:hover {
  background-color: rgb(169, 96, 7);
}

/*active link code taken from love running project - adds underline to page user is currently in*/

.active-link {
  border-bottom: 1px solid whitesmoke;
}

/*styling navigation links*/

.nav-menu li {
  list-style-type: none;
  font-size: 110%;
  font-weight: 600;
  color: whitesmoke;
  padding-left: 5px;
  padding-right: 5px;
  display: inline-flex;
  justify-content: right;
}

/*h2 heading styling*/
h2 {
  font-weight: 300;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/*Hero image styling*/
#hero-image {
  background: url("../images/hero-image.jpg") no-repeat center center;
  height: 450px;
  width: 100%;
  background-size: cover;
  opacity: 0.9;
}
/*hero image text styling*/
#hero-image p {
  letter-spacing: 1px;
  padding-top: 100px;
  padding-left: 140px;
  font-size: 180%;
}
/*create flex container and add sizing*/
.about-benefits-container {
  display: flex;
  width: 95%;
  justify-content: center;
  padding-bottom: 50px;
}
/*consistant styling for the about section and the beneifts section*/
.about .benefits {
  border: 20rem;
  padding-left: 50px;
  width: 100%;
  margin: 20rem auto;
}
/*styling for the h3 header of the benefits section*/
.benefits h3 {
  margin-left: 80px;
  text-decoration: underline;
}
/*styling for the unordered list section of the benefits section*/
.benefits ul {
  padding-inline-start: 5rem;
}
/*styling for the list items of the benefits section*/
.benefits li {
  display: list-item;
  list-style-type: none;
  padding-left: 5px;
  padding-right: 5px;
  justify-content: right;
}
/*styling for several features to readjust for mobile device*/
@media screen and (max-width: 1000px) {
  .about-benefits-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
  }

  .about,
  .benefits {
    width: 88%;
    margin: 1rem auto;
  }

  #hero-image p {
    padding-top: 50px;
    padding-left: 10px;
    font-size: 2vh;
  }

.benefits h3 {
  margin-left: 0px;
}

  form {
    padding-left: 70px;
  }

  .logo {
    font-size: 3vw;
  }

  .nav-menu {
    font-size: 2vw;
  }

  .benefits ul {
    padding-inline-start: 0;
  }
}
/*styling for form on contact page*/
.form {
  display: flex;
  justify-content: center;
  max-width: 100%;
  padding-bottom: 70px;
}
/*styling to make textarea field on form wider on contact page*/
.form textarea {
  max-width: 80%;
}

/*code to style footer and footer icons, and to make footer sticky taken from https://www.w3schools.com/howto/howto_css_fixed_footer.asp*/
#footer {
  background: black;
  padding: 20px;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  color: white;
  text-align: center;
}

#footer ul {
  margin: 0;
  border: 0;
  padding: 0;
}

#footer li {
  margin: 0 2rem;
}
/*Create flex container for footer*/
.footer-container {
  display: flex;
  width: 100%;
}
/*format position of icons on footer*/
.footer-container ul {
  display: flex;
  width: 100%;
  list-style: none;
  justify-content: center;
}
/*style footer elements*/
.facebook,
.insta,
.twitter,
.youtube {
  color: whitesmoke;
  letter-spacing: 4px;
  font-weight: 300;
  font-family: "playfair display", serif;
}
/*styling table on timetable page*/
table {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  background-color: gray;
}
/*styling paragraph text under timetable*/
#more-info p {
    text-align: center;
    background-color: rgb(169, 96, 7);
}
/*adjust size of table on mobile device*/
@media only screen and (max-width: 560px) {
  #table {
    width: 90%;
    overflow-x: auto;
    margin: 1rem auto;
  }
}

/*Add table border - table border code from W3Schools - https://www.w3schools.com/html/html_table_borders.asp*/
table,
th,
td {
  border: 1px solid whitesmoke;
}