/* This document is for all css code that will customize my website stylistically */

/* RESET AUTO SETTINGS */
* {
  margin: 0;
  padding: 0;
}

/*-----------------------------------------------------------------------------------------------------------------------*/

/* BODY SECTION */
/* this section will hold the CSS for any body code (customization of body text font, font size, color, etc.) */
body {
  font-family: "Lora", serif;
  font-style: normal;
  background-color: #3d3825;
  color: #f0edce;
}
/* WELCOME TO */
.welcome_text {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
  text-align: center;
  font-size: 70px;
  letter-spacing: 5px;
  padding-bottom: 20px;
}
/* SUMMIT RETREAT */
h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
  letter-spacing: 10px;
  text-align: center;
  font-size: 25px;
}
/* INTRO PARAGRAPH */
p {
  text-align: center;
  font-size: 20px;
}

/* H1 SECTION */
/* only one H1 per page. Bold, big and legible */
/* YOUR PEAK GETAWAY. */

.headertext {
  z-index: 5;
}

.headertext h1 {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
  line-height: 110%;
  font-size: 100px;
  color: #ffffff;
}

/*-----------------------------------------------------------------------------------------------------------------------*/

/* HEADER PICTURE SECTION */
/* This will be the first thing users see when they click on the website so the settings for this are so important!!!! */
.headerpic {
  background: url(../Images/sr_headerpic.jpg);
  position: relative;
  height: 100vh;
  /*display: flex;
  flex-direction: column; */

  /* moving the h1 child element to the bottom left */
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding-left: 50px;
  padding-bottom: 75px;
}

/* green overlay on top of headerpic */
.headeroverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(91, 120, 53, 0.6);
  z-index: 1;
}

/*-----------------------------------------------------------------------------------------------------------------------*/

/* NAVIGATION BAR SECTION */
/* inactive links for show */
.navbar {
  position: absolute;
  top: -45px;
  margin-left: -70px;
  width: 100%;
  display: flex;

  align-items: center;
  z-index: 10; /* this way, it sits above the background just the way I designed it in the mockups */
}

.navlinks {
  display: flex;
  gap: 70px;
  list-style: none;
  margin-top: -65px;
  padding: 0;
}

.navlinks a {
  text-decoration: none;
  color: #ffffff;
  font-family: "Lora", serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 8px;
}

/* when mouse hovers over the navigation items */
.navlinks a:hover {
  color: #3d3825;
  border-bottom: #3e5700 solid;
}

/*-----------------------------------------------------------------------------------------------------------------------*/

/* LOGO SECTION */
/* WHITE SR LOGO */
.logo {
  top: -10px;
  left: -10px;
}

/*-----------------------------------------------------------------------------------------------------------------------*/
/* FIRST SECTION OF THE PAGE | WELCOME SECTION */
/* this is the container that holds the circle image row and the text that sits below it */
.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 20px;
}

.imagerow {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 40px;
}

.imagerow img {
  object-fit: cover;
  border-radius: 50%;
}

/*-----------------------------------------------------------------------------------------------------------------------*/

/* BLACKBERRY MOUNTAIN SECTION */

/* section */
.resort1 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  max-width: 1200px;
  margin: 60px auto;
  padding: 20px;
}

/* section text */
.resort1_text {
  flex: 1;
  text-align: center;
}

/* h2 */
.resort1_h2 {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 5px;
  font-size: 25px;
  display: block;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 2px #f0edce solid;
  margin: 0 auto 20px auto;
}

/* section paragraph */
.resort1_text p {
  font-size: 16px;
  line-height: 1.8;
  text-align: left;
  max-width: 600px;
  margin: 0 auto;
}

/* section image */
.resort1_image {
  flex: 1;
}

.resort1_image img {
  width: 100%;
  height: auto;
}

/*-----------------------------------------------------------------------------------------------------------------------*/

/* JACKSON HOLE SECTION */

/* section */
.resort2 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  max-width: 1200px;
  margin: 60px auto;
  padding: 20px;
}

/* section text */
.resort2_text {
  flex: 1;
  text-align: center;
}

/* h2 */
.resort2_h2 {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 5px;
  font-size: 25px;
  display: block;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 2px #f0edce solid;
  margin: 0 auto 20px auto;
}

/* section paragraph */
.resort2_text p {
  font-size: 16px;
  line-height: 1.8;
  text-align: left;
  max-width: 600px;
  margin: 0 auto;
}

/* section image */
.resort2_image {
  flex: 1;
}

/* section image */
.resort2_image img {
  width: 100%;
  height: auto;
}

/*-----------------------------------------------------------------------------------------------------------------------*/

/* MAMMOTH MOUNTAIN SECTION */

/* section */
.resort3 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  max-width: 1200px;
  margin: 60px auto;
  padding: 20px;
}

/* section text */
.resort3_text {
  flex: 1;
  text-align: center;
}

/* h2 */
.resort3_h2 {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 5px;
  font-size: 25px;
  display: block;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 2px #f0edce solid;
  margin: 0 auto 20px auto;
}

/* section paragraph */
.resort3_text p {
  font-size: 16px;
  line-height: 1.8;
  text-align: left;
  max-width: 600px;
  margin: 0 auto;
}

/* section image */
.resort3_image {
  flex: 1;
}

.resort3_image img {
  width: 100%;
  height: auto;
}

/*-----------------------------------------------------------------------------------------------------------------------*/

/* FOOTER SECTION */

.footer {
  width: 100%;
  text-align: center;
  position: relative;
}

/* footer pic container */
.footerpic {
  width: 100%;
  position: relative;
}

/* this code will edit the actual image, not just the container */
.mountainpic {
  width: 100%;
  height: auto;
  display: block;
}

/* light green overlay on top of image */
.footerpic_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(91, 120, 53, 0.6);
  z-index: 1;
}

/* footer content = the book with us button */
.footer_content {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -180px;
  margin-top: -25px;
  z-index: 2;
}

/* book with us button design */
.bwu {
  padding: 30px 80px;
  background-color: #3e5700;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  text-align: center;
  font-size: 30px;
  border-radius: 60px;
  color: #f0edce;
  border: none;
  letter-spacing: 3px;
  text-decoration-line: none;
}

/* when your mouse hovers over the button */
.bwu:hover {
  background-color: #3d3825;
  color: #f0edce;
}

/*-----------------------------------------------------------------------------------------------------------------------*/
/* MEDIA QUERIES */
/* Tablet size/Ipads max-size 1024px */