:root{
    --head-text:"Poppins", sans-serif;
    --white-color:#fff;
    --white-opaque:rgba(255, 255, 255, 0.9);
    --dark-color:  rgb(26, 77, 46);
    --light-opaque: rgba(186, 205, 146, 0.5);
    --light-color: #bacd92;
    --cancel-color:rgb(21, 48, 25);
}

/* fonts */

.header-font{
  font-family: var(--head-text);
  font-weight: 800;
  color:var(--dark-color);
}

.upper{
  text-transform: uppercase;
}

.capitalize{
  text-transform: capitalize;
}

/* sizing for icons */
i{
  font-size: x-large;
}


/* -------------------------------------------main buttons styling */
.btn{
  color:var(--white-color);
  background-color: var(--dark-color);
  font-family: var(--head-text);
  font-size: 1.3rem;
  font-weight: 800;
}

.btn:hover{
  color: var(--dark-color);
  background-color: var(--white-color);
}

.cancel-btn{
  background-color: var(--cancel-color);
  color:var(--light-color);
  font-family: var(--head-text);
  font-size: 1.3rem;
  font-weight: 800;
  margin-right: 5px;
  margin-left: 5px;
}

.cancel-btn:hover{
  background-color: var(--light-color);
  color:var(--cancel-color);
}


/*------------------------------------------------- navbar styles ----------------------------------------*/

nav{
    background-color: var(--white-opaque);
    height: 6rem;
    position: fixed;
    z-index: 1;
}

.logo{
    height:5rem;
    width:5rem;
    margin-left: 1rem;
    box-shadow: 0 30px 40px rgba(0,0,0,.1);
    position: relative;
    border-radius: 10px;
    top:9%;
  }

  /* navbar links positioning */

.ul-margin{
    margin-top: 1rem;
}

.nav-text{
   text-transform: uppercase;
   font-size: 20px;
   color: var(--dark-color);
   text-shadow: 5px 5px 5px rgba(0,0,0,0.2);
}

.mob-menu{
    color:var(--dark-color);
    margin-top: 1rem;
}

.active{
  background-color: var(--light-color);
}

.hero{
    background-image: url("../images/hero-image.webp");
    width:100%;
    height:500px;
    background-size: 100% 100%;
    background-position: center center;
    animation: shrink 5s;
}

/* animation for hero image on load */
@keyframes shrink {
  0% {
    background-size: 100% 100%;
  }
  100% {
    background-size: 110% 110%;
  }
}

/* covers hero image with theme color */

.opaque{
    background-color: rgba(26, 77, 46, 0.5);;
    height: 500px;
    width: 100%;
    position: inherit;
}

.hero-about{
  height:52%;
  width:45%;
  font-family: var(--head-text);
  background-color: rgba(186, 205, 146, 0.2);
  color:var(--white-color);
  position:relative;
  left:20px;
  bottom:280px;
  border-radius: 2px;
  border:outset 2px #000;
  box-shadow: 10px 10px 10px rgb(0 0 0 / 0.8);
}

.hero-about h2{
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 5px 5px 5px rgba(0,0,0,0.4);
}

.hero-about p{
  font-weight: 600;
  font-size: 1.2rem;
  color:var(--dark-color);
  background-color: rgba(186, 205, 146, 0.2);
  padding:20px 20px 10px;
  text-align: justify;
}


/* styles for flash messages */
#flashes{
  position: absolute;
  top:20px;
  left:10%;
  height:60px;
  width:60%;
  font-family: var(--head-text);
  font-weight: 800;
  text-transform: capitalize;
  color:var(--dark-color);
  z-index: 5;
}


/*------------------------------------------------------- trips page ----------------------------------------------------*/

/* styles for href link for sign in on hero paragraph */
.par-sign-in{
  color:var(--dark-color)
}

.par-sign-in:hover{
  color:var(--white-color)
}


.search-box{
  position: absolute;
  top:100px;
  left:20px;
  border-radius: 10px;
  width:45%;
  height:60px;
  background-color: var(--light-opaque);
}

.input-search{
  color: var(--dark-color);
  position: relative;
  top:-30px;
}

.search-btn{
  background-color: transparent;
  height:45px;
  width:45px;
  border-radius: 5px;
  border:none;
  color:var(--dark-color);
  position: relative;
  top:-15px;
  left:25%;
}


.search-btn:hover{
  color:var(--white-color)
}


.reset-btn{
  display: block;
  background-color: var(--dark-color);
  height:45px;
  padding: 8px;
  font-size: 1.5rem;
  font-family: var(--head-text);
  font-weight: 600;
  width:45px;
  color:var(--white-color);
  position: relative;
  top:-65px;
  left:90%;
  border-radius: 5px;
}

.reset-btn:hover{
  background-color: var(--white-color);
  color:var(--dark-color)
}

/* styles for back to top page researched from w3s */

#scroll-btn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  font-family: var(--head-text);
  text-transform: uppercase;
  font-weight: 800;
  border: none;
  outline: none;
  background-color: var(--dark-color);
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#scroll-btn:hover {
  background-color: var(--light-color);
  color:var(--dark-color)
}

/* -----------------------------------------styles for trip display boxes */

.trip-header{
  background-color: var(--white-color);
  color: var(--dark-color);
  font-family: var(--head-text);
  height:260px;
  text-align: center;
  border:solid var(--white-color) 3px;
  margin-bottom: 12px;
  border-radius: 5px;
  box-shadow: 10px 10px 10px rgba(26, 77, 46, 0.8);
}

.trip-header h3{
  font-weight: 800;
  text-transform: uppercase;
  color:var(--dark-color);
  font-size: 2rem;
  text-shadow: 5px 5px 5px rgba(0,0,0,0.2);
}

/* override materilaize */

.collapsible-header {
  display:block;
}



.trip-header p{
  font-family: var(--head-text);
  font-weight: 600;
  text-transform: capitalize;
}

.trip-header-region{
  font-size: 1.3rem;
}

.trip-content{
  background-color: var(--white-color);
  text-align: center;
  border:solid var(--white-color) 3px;
  margin-bottom: 12px;
  border-radius: 5px;
  box-shadow: 10px 10px 10px rgba(26, 77, 46, 0.8);
}

.trip-content-head{
  color: var(--white-color);
  font-family: var(--head-text);
  font-weight: 800;
  text-transform: uppercase;
  text-shadow: 5px 5px 5px rgba(0,0,0,0.2);
}

.review-stars{
  position: relative;
  left:0%;
  height:20px;
}

.review-stars i{
  font-size: 1.2rem;
  margin-right: 0px;
}

.dark{
  background-color: var(--dark-color);
  color:var(--white-color)
}

.light{
  background-color: var(--white-color);
  color: var(--dark-color)
}

.date-stamp, .date-stamp-user{
  position: relative;
  bottom:15px;
  left:33%;
  font-size: 0.8rem;
  font-family: var(--head-text);
  font-weight: 600;
}

.date-stamp-user{
  width:130px;
  height:25px;
  padding:5px;
  border-radius: 2px;
}

.trip-body{
  height:50%;
  padding:30px;
  margin-bottom: 10px;
  position: relative;
  left:15%;
  width:70%;
  border-radius: 5px;
  font-family: var(--head-text);
  box-shadow:5px 5px 5px rgba(0,0,0,0.2);
}

.trip-body{
  font-weight: 800;
  font-size: 36px;
}

/* sub headers */

.sub-header{
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.5rem;
}

.sub-header .dark{
  color:var(--white-color)
}

.sub-header .light{
  color:var(--dark-color)
}


.address{
  font-weight: 600;
  font-size: 1.2rem;
}


.display-block{
  height:50%;
  padding:30px;
  margin-bottom: 10px;
  position: relative;
  left:5%;
  width:90%;
  border-radius: 5px;
  box-shadow:5px 5px 5px rgba(0,0,0,0.2);
}

.description{
  font-size: 1.2rem;
  font-family: var(--head-text);
  font-weight: 700;
  text-align: justify;
}

.post-code{
  text-transform: uppercase;
}
/* styles for trip website links */
.web-btn{
  margin-top: 20px;
  font-family: var(--head-text);
  font-weight: 800;
  font-size: 1.2rem;
}

.web-btn:hover{
  background-color: var(--white-color);
  color: var(--dark-color);
}


/* styles for delete conformation message (activated with javascript) */
.delete{
  font-family: var(--head-text);
  font-size: 1.3rem;
  padding:10px;
}


/* styles for message displayed for no results search */
.empty-search{
  background-color:#f0f0f0;
  color: var(--dark-color);
  height:120px;
  width:720px;
  font-family: var(--head-text);
  font-weight: 600;
  padding:30px;
  border-radius: 5px;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.2);;
}

.empty-search a{
  color: var(--dark-color);
  text-decoration: underline;
}

.empty-search a:hover{
  font-size: 3.2rem;
}


/* hides main delete function (becomes visible with javascript) */
.delete-confirm{
  display: none;
}

/*---------------------------------------------------------- filter section */

/* hides search bar for filter search */
.hide{
  display: none;
}

.filters-section{
  position: absolute;
  left:2%;
}


.filter-btn, .filter-reset{
  color:var(--dark-color);
  background-color: var(--white-color);
  font-family: var(--head-text);
  font-size: 1.3rem;
  font-weight: 800;
  margin:7px;
  border:none;
  cursor: pointer;
}

.filter-btn:hover{
  color:#000;
  text-decoration: underline;
}

.filter-reset{
  color:#000;
}

.filter-reset:hover{
  background-color: var(--dark-color);
  color:var(--white-color);
  font-size: 1rem;
}

/* overrides materialize default blue button color */
button:focus {
  background-color:var(--white-color);
}


/* ---------------------------------------------Sign up and sign in pages---------------------------------------- */

/* alternitive styles for sign in and sign up and add trip pages hero and opaque classes */
.small-hero{
  background-image: url("../images/hero-image.webp");
  width:100%;
  height:100vh;
  background-size: 100% 100%;
  background-position: center center;
  animation: shrink 5s;
}

.small-opaque{
  background-color: rgba(26, 77, 46, 0.5);;
  height: 100vh;
  width: 100%;
  position: inherit;
}

/* animation for hero image on load */
@keyframes shrink {
0% {
  background-size: 100% 100%;
}
100% {
  background-size: 110% 110%;
}
}

.register-login{
  position:absolute;
  top:13%;
  width:100%;
}

h3{
  font-size: 3rem;
  color:var(--white-color)
}


/* styles for main sign in / sign up form */
.card-style{
  background-color: var(--light-opaque);
  color: var(--dark-color);
}


/* overriding materialize generic form input colours */

input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]),
input[type=number]:not(.browser-default):focus:not([readonly]),
input[type=search]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
  border-bottom: rgb(26, 77, 46);;
  box-shadow: 0 1px 0 0 rgb(26, 77, 46);
}


input[type=text]:not(.browser-default):focus:not([readonly])+label,
input[type=password]:not(.browser-default):focus:not([readonly])+label,
input[type=email]:not(.browser-default):focus:not([readonly])+label,
input[type=number]:not(.browser-default):focus:not([readonly])+label,
input[type=search]:not(.browser-default):focus:not([readonly])+label,
textarea.materialize-textarea:focus:not([readonly])+label {
  color: var(--dark-color);
  
}

.input-field>label{
  color:var(--dark-color);
  font-family:var(--head-text);
  font-weight: 700;
  font-size: 1.2rem;
  margin-left: 2rem;
}

input:focus{
  color:var(--dark-color);
  font-family: var(--head-text);
  font-weight: 800;
  font-size: 1.2rem;
}

.submit-button{
  color:var(--light-color)
}


.account-confirm{
  position: absolute;
  bottom:-30%;
  width:40%;
  right:30%;
  color: var(--white-color);
  font-family: var(--head-text);
  font-weight: 700;
  background-color: var(--dark-color);
}

.account-confirm a{
  color: var(--dark-color);
  background-color: var(--white-color);
}

.account-confirm a:hover{
  color: var(--white-color);
  background-color: var(--dark-color);
}



/* -------------------------------------------------------add-trips page ---------------------------------- */

/*  ---------------------------------------override materialize styles */

.dropdown-content {
  background-color: var(--white-color);
}

.select-dropdown{
  color:var(--dark-color);
  font-family: var(--head-text);
  font-weight: 700;
}

.select-wrapper input.select-dropdown:focus {
  border-bottom: 1px solid var(--white-color)
}

.select-dropdown li.disabled,.select-dropdown li.disabled>span,.select-dropdown li.optgroup {
  color: var(--dark-color);
  background-color: transparent
}

.dropdown-content li>a,.dropdown-content li>span {
  color: var(--dark-color);
  font-family: var(--head-text);
  font-weight: 600;
  font-size: 1.2rem;
}

/* checkbox styles */

[type="checkbox"]:checked+span:not(.lever):before {
  top: -4px;
  left: -5px;
  width: 0;
  height: 0;
  border-top: 0px solid transparent;
  border-left: 0px solid transparent;
  border-right: 0px solid var(--white-color);
  border-bottom: 0px solid var(--white-color);
}



/* ------------------------------------------------------------users page---------------------- */

.users-card-style{
  background-color: var(--dark-color);
  border:solid 2px rgba(186, 205, 146, 0.7);
  box-shadow: 0 30px 40px rgba(26, 77, 46, 0.6);
}

.card .card-title{
  font-family: var(--head-text);
  text-transform: uppercase;
  font-weight: 800;
  text-shadow: 5px 5px 5px rgba(0,0,0,0.2);
}

.card p{
  font-family: var(--head-text);
  font-weight: 700;
  font-size: 1.2rem;
}

.card .card-action{
  background-color: rgb(186, 205, 146);
}

.push{
  position: relative;
  top:200px;
}

.card-btn{
  font-size: 1rem;
}

.user-search{
  position: relative;
  left:50%;
  top:35px;
}

/*------------------------------------- styles for error page-------------------------- */

.error-background{
  position: relative;
  left: 10%;
  background-color: var(--light-opaque);
  width:80%;
  border-radius: 5px;
}

.error-home-link{
  position: relative;
  left:40%;
  width:20%;
  height:20%;
  border-radius: 10px;
}

/* --------------------------------------------------------media queries -------------------------------------*/

/* media queries for trips page tablet */

/* resize for tablets in landscape */
@media (max-width:1200px){
  .hero-about h2{
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 5px 5px 5px rgba(0,0,0,0.4);
    font-size: 1.9rem;
  }
  
  .hero-about p{
    font-weight: 600;
    font-size: 1.2rem;
    color:var(--dark-color);
    background-color: rgba(186, 205, 146, 0.1);
    padding:10px;
    text-align: justify;
  }
}

/* resize for tablets in portrait */

@media (max-width:900px){

  #flashes h4{
    font-size: 1.3rem;
  }

  .hero-about{
    height:45%;
    width:40%;
  }
  
  .hero-about h2{
    font-weight: 700;
    font-size: 1.8rem;
  }
  
  .hero-about p{
    font-size: 1rem;
    padding:10px;
  }

  .trip-body{
    left:5%;
    width:90%;
    font-weight: 700;
    font-size: 28px;
    text-transform: uppercase;
  }

  .display-block{
  height:50%;
  padding:0;
  margin-bottom: 10px;
  position: relative;
  left:5%;
  width:92%;
  border-radius: 5px;
  box-shadow:5px 5px 5px rgba(0,0,0,0.2);
}

.description{
  font-size: 1rem;
  font-family: var(--head-text);
  font-weight: 500;
  text-align: justify;
}

  
  .filters-section .sub-header{
    font-size: 1.3rem;
    font-weight: 800;
  }
  
  
  .filter-btn{
    font-size: 1.1rem;
    font-weight: 700;
    margin:6px;
  }
  
  .date-stamp{
    position: relative;
    bottom:-6px;
    left:0;
    font-size: 0.6rem;
    font-family: var(--head-text);
    font-weight: 600;
  }
  
  /* sign up and sign in pages */

  .small-hero{
    height:50vh;
  }

  .small-opaque{
    height:50vh;
  }
  
  .account-confirm{
    position: absolute;
    top:750px;
    width:80%;
    left:10%;
    height:60px;
  }

  /*------------------------ error-page-styles */

  .error-background{
    position: relative;
    left: 10%;
    background-color: var(--light-opaque);
    width:80%;
    border-radius: 5px;
    font-size: 1.3rem;
  }
  
  .error-home-link{
    width:18%;
    height:18%;
  }
  
}


/* media queries for trips page mobile */

@media (max-width:430px) {

  #flashes h4{
    font-size: 1rem;
  }

  #scroll-btn{
    width:50px;
    height:20px;
    font-size: 0.5rem;
    padding:0;
  }

  .hero{
    height:30vh;
  }

  .opaque{
    height: 30vh;
  }

  .hero-about{
    top:10px;
    left:15%;
    height:100%;
    width:70%;
  }
  
  .hero-about h2{
    font-size: 1.5rem;
    color:var(--dark-color)
  }

  .display-section{
    position: relative;
    top:300px;
  }

  .filters-section{
    display: none;
  }

  .search-box{
    position: absolute;
    width:90%;
    top:130px;
  }

  .search-btn{
    position: absolute;
    top:12px;
    left:75%;
  }
  
  .reset-btn{
    height:30px;
    padding: 5px;
    font-size: 1.3rem;
    width:30px;
    position: absolute;
    top:15px;
    left:85%;
  }

  .trip-body{
    left:5%;
    width:90%;
    font-weight: 600;
    font-size: 20px;
    text-transform: uppercase;
  }

  /* sign up and sign in pages */

  .account-confirm{
    top:750px;
    width:90%;
    height:60px;
    left:5%;
  } 


  /*------------------------ error-page-styles */

  .error-background{
    position: relative;
    left: 10%;
    background-color: var(--light-opaque);
    width:80%;
    border-radius: 2px;
    font-size: 1rem;
  }
  
  .error-home-link{
    width:12%;
    height:12%;
  }
  
  
}

@media (max-width:320px){
  nav{
    position: static;
  }

  .hero-about{
    top:5px;
    left:10%;
    height:220px;
    width:80%;
  }
  
  .hero-about h2{
    font-size: 1.2rem;
    color:var(--dark-color)
  }
}