*{
   margin: 0;
   padding: 0;
}

/* START OF LANDING PAGE */
.landingPageAll{
   position: absolute;
    top: 50%;
    left: 50%;
    cursor: pointer;
    transform: translate(-50%, -50%) scale(.9);
    display: flex;
    flex-direction: column;
}

.logoLandingPage{
   width: 100px;
   height: auto;
   display: flex;
   justify-items: center;
   align-items: center;
   margin-left: 40%;
   margin-bottom: 60px;
}

.landingSearchBar{
   display: flex;
}

#landingPageSearch{
   width: 400px;
   height: 55px;
   outline: none;
   border:none;
   background-color: #b1c4ad;
   border-radius: 6px 0 0 6px;
   padding-left: 20px;
}

#landingPageBtn{
   width: 100px;
   height: 54px;
   padding: 15px;
   border-radius: 0 6px 6px 0;
   margin-left: 10px;
   background-color: rgb(255, 106, 0);
   color: white;
   font-family: 'Roboto Condensed', sans-serif;
   font-weight: 600;
   letter-spacing: 0.08em;
   border: none;
   cursor: pointer;
   text-transform: uppercase;
}

#landingPageBtn:hover{
   background-color: rgb(252, 131, 44);
   transition: .5s;
}  


/* Body */
body {
   background-color: rgb(247, 247, 247);
   letter-spacing: 0.1em;
   width: 100%;
 }
 
 /* Main Container */
 main {
   width: 100%;
 }
 
 /* START OF HEADER */
 header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: white;
   padding: 50px;
 }
 
 /* National Parks Logo */
 header img {
   height: 15vh;
   justify-content: flex-start;
   align-items: center;
   /* margin-left: 40px;
   margin-bottom: 25px; */
 }
 
 .navBar{
    display: flex;
    align-items: center;
    justify-content: flex-end;
 }

.recent-searches{
   color: rgb(255, 255, 255);
   font-family: 'Roboto Condensed', sans-serif;
   font-weight: 400px;
   text-transform: capitalize;
   letter-spacing: 0.2em;
   color: rgb(255, 106, 0);
   border-top-style: hidden;
   border-right-style: hidden;
   border-left-style: hidden;
   border-bottom-style: solid;
   background-color: transparent;
   outline: 0;
   border-color: rgb(255, 106, 0);
   border-width: .2rem;
   text-transform: capitalize;
   width: 15%;
   margin-left: 10px;
}

.list-searches{
   color: rgb(255, 255, 255);
   font-family: 'Roboto Condensed', sans-serif;
   font-weight: 400px;
   text-transform: capitalize;
   letter-spacing: 0.2em;
   color: rgb(255, 255, 255);
   border-top-style: hidden;
   border-right-style: hidden;
   border-left-style: hidden;
   border-bottom-style: solid;
   background-color: rgb(146, 172, 94);
   outline: 0;
   border-color: rgb(159, 89, 39);
   border-width: .2rem;
   text-transform: capitalize;
   width: 20%;
   margin-left: 20px;
}

a {
   width: 100%;
   height: 20px;
   color: rgb(62, 103, 69);
   text-decoration: none;
   margin-left: 50px;
   font-family: 'Work Sans', sans-serif;
   font-weight: 600;
   display: inline-block;
}

a:hover{
   color: rgb(255, 106, 0);
   transition: .5s;
}

.searchForm{
   width: 300px;
   display: flex;
   justify-content: flex-end;
   align-items: center;
   height: 70px;
   padding: 20px;
   margin-right: 30px;
}

.searchBar button{
   background: rgb(255, 106, 0);
   color: rgb(255, 106, 0);
   border: none;
   cursor: pointer;
   height: 40px;
   width: 40px;
   margin-bottom: 20px;
}

.results{
   background: white;
   color: black;
}

.fa.fa-search {
   color: rgb(255, 106, 0);
   
}

.fa.fa-search::before{
   height: 70px;
   width: 70px;
}

.fa.fa-search::after{
   height: 70px;
   width: 70px;
}

.searchBtn {
   /* display: none; */
   background: rgb(255, 106, 0);
   border-radius: 0px 3px 3px 0;
   border: none;
   cursor: pointer;
   height: 40px;
   width: 39px;
   margin-bottom: 20px;
}

.fa.fa-search{
   color:rgb(255, 255, 255);
}

input[type="text"]{
   color:rgb(255, 106, 0);
   font-family: 'Roboto Condensed', sans-serif;
   letter-spacing: 0.2em;
}

input::placeholder {
   color:rgb(255, 106, 0);
   font-family: 'Roboto Condensed', sans-serif;
   text-transform: capitalize;
   letter-spacing: 0.2em;
}

.searchBar {
   color: rgb(255, 255, 255);
   border-top-style: hidden;
   border-right-style: hidden;
   border-left-style: hidden;
   border-bottom-style: solid;
   background-color: transparent;
   outline: 0;
   border-color: rgb(255, 106, 0);
   border-width: .2rem;
   text-transform: capitalize;
   width: 80%;
}

input::placeholder {
   color:rgb(255, 106, 0);
   font-family: 'Roboto Condensed', sans-serif;
   text-transform: capitalize;
   letter-spacing: 0.2em;
}

/* section {
  display: flexbox;
  grid-auto-rows: max-content;
} */

 /* START OF PARK BIO & IMAGE SECTION */
 .parkBio {
   width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   box-sizing: border-box;
   margin-bottom: 25px;
   padding: 35px 45px 35px 35px;
}

.parkBio .hide{
   display: none;
}
 
.parkClassified {
   display: flex;
   flex-direction: column;
   width: 45%;
   margin: 20px;
 }

.nameGrouped{
   display:flex;
   font-family: 'Roboto Condensed', sans-serif;
   font-size: 60px;
   text-transform: capitalize;
   margin-bottom: 20px;
}

.namePark {
   font-weight: 800;
   color:rgb(62, 103, 69);
   font-size: 1.2em;
}

.parkDesignation{
   margin-left: 12px;
   color: rgb(185, 185, 185);
   font-size: 1.2em;
   font-weight: 200;
}

.parkState{
   margin-bottom: 10px;
   color: rgb(255, 106, 0);
   font-family: 'Work Sans', sans-serif;
   font-size: 1.3em;
   font-weight: 600;
}

.locationClassified {
   display: flex;
   font-family: 'Work Sans', sans-serif;
   margin-bottom: 55px;
   color: rgb(185, 185, 185);
}

.lat{
   margin-left: 10px;
}

.lon{
   margin-left: 10px;
}

.parkDesc{
   margin-bottom: 25px;
   font-family: 'Work Sans', sans-serif;
   color:rgb(59, 63, 57);
   line-height: 2;
}

.park-images{
   width: 50%;
   height: auto;
   box-shadow: 7px 5px 20px 8px rgb(199, 199, 199);
   border-radius: 5px;
}



/* START OF PARK PRICES */
.pricesContainer{
   width: fit-content;
   height: auto;
   background-color: rgb(255, 255, 255);
   border-radius: 5px;
   box-shadow: 7px 8px 30px 8px rgb(209, 209, 209);
   margin: 0 35px 55px 35px;
   padding: 55px;
}

.entranceFeesTitle{
   font-size: 30px;
   margin-bottom: 10px;
   font-family: 'Roboto Condensed', sans-serif;
   color:rgb(62, 103, 69);
   font-weight: 600;
}

.pTitleDesc {
   font-family: 'Work Sans', sans-serif;
   color: rgb(255, 106, 0);
   font-weight: 600;
   margin-bottom: 5px;
   font-size: 1rem;
}

.parkPrices {
   display: flex;
   flex-direction: column;
   color:rgb(62, 103, 69);
   font-size: .75rem;
}

.pFeeCost{
   font-family: 'Work Sans', sans-serif;
   font-weight: 600;
   margin-bottom: 20px;
   font-size: .9rem;
   color: rgb(185, 185, 185);
}

.pFeeDesc{
   font-family: 'Work Sans', sans-serif;
   color:rgb(59, 63, 57);
   margin-bottom: 25px;
   font-size: 1rem;
}

/*  START OF 5 DAY WEATHER FORCAST */
.park5DayWeather {
   margin: 20px;
}

.park5DayWeather {
   width: 99%;
   display: flex;
   flex: 1 1;
   margin: auto;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
 }

.weatherCardContainers{
   width: 100%;
   height: 340px;
   display: flex;
   flex-direction: column;
   align-items: space-between;
   justify-content: space-between;
   background-color: white;
   padding: 30px;
   border-radius: 5px;
   box-shadow: 7px 8px 30px 8px rgb(209, 209, 209);
   margin: 0 25px 0 25px;
}

.weatherCardContainers:hover{
   border: 1.5px solid rgb(255, 106, 0);
   transition: .6s;
}

.pDate{
   text-align: center;
   font-size: 1.3rem;
   color: white;
   font-family: 'Roboto Condensed', sans-serif;
   font-weight: 600;
   color:rgb(62, 103, 69);
   line-height: 1.2em;
}

.pDesc{
   text-align: center;
   font-family: 'Work Sans', sans-serif;
   font-size: .75rem;
   color: rgb(255, 106, 0);;
   margin-bottom: 10px;
}

/* humidity, temp, wind (div) */
.divGauge{
   display: flex;
   justify-content: space-between;
   color: rgb(185, 185, 185);
   font-family: 'Roboto Condensed', sans-serif;
   font-weight: 800;
   font-size: .65em;
   margin-bottom: 10px;
}

/* START OF FOOTER */
.footer-text{
   text-align: center;
   margin: 30px;
   font-family: 'Roboto Condensed', sans-serif;
   font-weight: 600;
   font-size: .5em;
   color:rgb(62, 103, 69);
}

/* START OF MODAL */
#signup{
   border: none;
   font-family: 'Roboto Condensed', sans-serif;
   color: white;
   background-color: rgb(255, 106, 0);;
}

#signup:hover{
   border: none;
   background-color: white;
   color: rgb(255, 106, 0);;
   border: solid 1.5px rgb(255, 106, 0);;
   transition: .5s;
}

/* START OF MEDIA QUERY */

/* landing page media queries */

@media (min-width: 320px) and (max-width: 480px) {
   .landingSearchBar {
      width: 70%;
      margin: auto;
      
   }

   #landingPageBtn {
      width: 40%;
      margin-left: 5px;
   }
}

/* modile screen widths */
@media (min-width: 320px) and (max-width: 480px){
header{
   width: 100%;
   display: flex;
   flex-direction: column;
   padding: 40px 20px 10px 20px;
}

.Logo{
   margin-bottom: 40px;
}

.navBar{
   justify-content: center;
   margin-bottom: 40px;
}

.navBar a{
   margin: 0 20px 0 20px;
   justify-content: center;
}

.searchForm{
   width: 90%;
   justify-content: center;
   height: 70px;
   margin-right: 30px;
}

.searchBar.fa.fa-search{
   font-size: 20px;
   font-family: 'Work Sans', sans-serif;
}

.fa.fa-search::before{
   width: 30px;
}

.recent-searches{
   display: none;
}

.parkBio{
   width: 100%;
   display: flex;
   flex-direction: column;
   padding: 15px;
}

.parkClassified{
   width: 100%;
}

.nameGrouped{
   width: 100%;
   font-size: 2.2em;
   display: flex;
   justify-content: flex-start;
}

.parkDesignation{
   display: flex;
   margin-left: 5px;
}

.park-images{
   width: 480px;
   height: auto;
}

.lat{
   margin-left: 0;
}

.parkDesc{
   display: flex;
   justify-content: center;
   margin-right: 30px;
}

.park5DayWeather{
   display: flex;
   flex-direction: column;
   width: 100%;
   height: fit-content;
}

.weatherCardContainers{
   width: 400px;
   height: 340px;
   padding: 50px;
   margin-bottom: 30px;
}

.weatherCardContainers img{
width: 150px;
height: 150px;
margin-left: 23%;
}

.pDesc{
   font-weight: 600; 
   margin-bottom: 30px;
}

.divGauge{
   font-size: 15px;
}
}
/* tablet screen widths */
@media (min-width: 481px) and (max-width: 786px){
   body{
      width: 100%;
      margin: 0;
   }
   
   header{
      width: 100%;
   }
   
   .recent-searches{
      display: none;
   }

   .parkBio{
      width: 100%;
      display: flex;
      flex-direction: column;
   }

   .parkClassified{
      width: 100%;
      margin: 0;
   }

   .locationClassified{
      margin-bottom: 40px;
   }

   .parkDesc{
      width: 100%;
      margin-bottom: 40px;
   }

   .nameGrouped{
      font-size: 40px;
   }

   .park-images{
      width: 100%;
   }

   .park5DayWeather{
      width: fit-content;  
      margin: 10px 30px 10px 30px;

   }

   .weatherCardContainers{
      width: 80%;
      margin: 5px;
      padding: 30px;
   }

   .pDate{
      font-size: 10px;
   }

   .divGauge{
      display: flex; 
      flex-direction: column;
      justify-items: center;
   }
}

/* large scree widths */
@media (min-width: 769px) and (max-width: 1024px){
   
}