* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Red Rose", cursive;
}


.container::before{
  content: '';
  background: linear-gradient(
    to right,
    rgba(25, 31, 49, 0.85),
    rgba(25, 31, 49,0.85)), 
    url("./assets/pexels-maxyne-barcel-10402282\ 1.png");
  /* background: url(./assets/pexels-maxyne-barcel-10402282\ 1.png); */
  background-size: cover;
  position:absolute;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}

/* ------------------------------ */
/* ---------- NAVBAR ------------ */
/* ------------------------------ */

.navbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50px;
  /* display: grid;
  grid-template-columns: 1fr 1fr 1fr; */
}


.list{
  display: flex;
}

.list-item{
  color: #FFC233;
  list-style: none;
  margin: 0 50px 0 50px;
  font-size: 20px;
}

.button-small{
  font-size: 25px;
  background-color: #FF505F;
  color: #FFFFFF;
  padding: 10px 40px;
}

/* ------------------------------ */
/* ---------- HERO ------------ */
/* ------------------------------ */


.hero{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.hero-heading{
  font-family: 'Dela Gothic One', cursive;
  color: #FFC233;
  font-size: 90px;
  width: 1000px;
}

.button-large{
  font-size: 25px;
  background-color: #FF505F;
  color: #FFFFFF;
  padding: 20px 60px;
  margin-top: 40px;
}

.bottom{
  position: absolute;
  bottom: 10px;
  right: 100px;
}


/* Mobile Responsiveness */

@media (max-width: 1120px){

.navbar{
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.list{
  margin: 3em 0;
}

.logo{
  height: 3em;
}

.list-item{
  font-size: 1em;
  margin: 0 1em;
}

.button-small{
  font-size: 1em;
}

.hero-heading{
  font-size: 2em;
  width: 500px;
}

.button-large{
  font-size: 1em;
}

.bottom img{
  height: 8em;
}

.bottom {
  position: static;
  margin-top: 3em;
}

}



@media (max-width: 510px){


.logo{
  height: 2em;
}

.list-item{
  font-size: 0.8em;
  margin: 0 1em;
}

.button-small{
  font-size: 0.8em;
}

.hero-heading{
  font-size: 1em;
  width: 300px;
}

.button-large{
  font-size: 0.8em;
}

.bottom img{
  height: 5em;
}


}