*{
    box-sizing: border-box;
}

/* ## VARIABLES ## */

:root {

    --parallax-height: 700px; /* PARALLAX HEIGHT */
    --parallax-height-small: 400px; /* PARALLAX HEIGHT */
    --bgcolor-title: rgb(60,170,100,0.3); /* BG COLOR OF TITLE SECTION */
    --text-space-bg-color: rgb(244,242,233,1); /* BG COLOR OF TEXT SPACE */

}


/* ## GENERAL STYLING ## */

body {
  margin: 0px;
  font-family: sans-serif;
}

.parallax_1 h1 {
  color: black;
  font-size: 4rem;
  font-family: serif;
  font-weight: normal;
  text-align: center;
  padding: 4rem 1rem 1rem 1rem;
  margin: 0px;
}

.parallax h2 {
  color: white;
  font-size: 3rem;
  font-weight: normal;
  text-align: center;
  padding: 4rem 1rem 1rem 1rem;
  margin: 0px;
}

.text-space {
    min-height: 300px;
    background-color: var(--text-space-bg-color);
    text-align: center;
    padding: 2rem;
}

.text-space p {
  font-size: 1.25rem;
  line-height:150%;
  display: block;
  padding: 1rem;
  margin: 0px;
  color: rgb(80,80,80);
}

.text-space ul {
  margin: 0px;
}

.text-space li {
  padding: 1rem;
  color: rgb(80,80,80);
  list-style-type: none;
  font-size: 1.5rem;
}

.text-space a {
  font-size: 1.5rem;
  padding: 2rem;
  color: rgb(80,80,80);
  text-decoration: none;
}

.text-space a:hover{
    color: rgb(0,0,0);
}

.parallax_1 {

    text-align: center;
    background-color: var(--bgcolor-title);
    height: 700px;

}

.parallax_1 img{
    width:300px;
}

.parallax_2 {
  background-image: url('../images/index_images/index_dining_room.jpg');
  height: var(--parallax-height); 
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.parallax_3 {
  background-image: url('../images/index_images/index_farmstay.jpg');
  height: var(--parallax-height); 
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}


.parallax_4 {
  background-image: url('../images/index_images/index_wine.jpg');
  height: var(--parallax-height); 
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}


.parallax_5 {
  background-image: url('../images/index_images/index_vinegar.jpg');
  height: var(--parallax-height); 
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}


.parallax_6 {
  background-image: url('../images/index_images/index_farm.jpg');
  height: var(--parallax-height); 
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}


.parallax_7 {
  background-image: url('../images/index_images/index_book.jpg');
  height: var(--parallax-height); 
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.parallax_8 {
  background-image: url('../images/index_images/index_solar.jpg');
  height: var(--parallax-height); 
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}



.menu_wrapper {
    display: grid;
    gap: 0rem;
    padding-top: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-auto-rows: minmax(1rem, auto);
}

.menu_cell {
    border: 0px solid black;
  
}

.menu_cell a {
  font-size: 1.5rem;
  padding: 1rem;
  color: rgb(80,80,80);
  text-decoration: none;
}

.menu_cell a:hover {
    color: rgb(0,0,0);
}

@media (width < 950px) {

    .parallax_1 h1 {
      font-size: 3rem;
      padding: 1rem 1rem 1rem 1rem;
    }

    .parallax_1 {
        height: 850px;
    }

    .parallax_1 img {
        width:130px;
    }

    .parallax_2 {
      height: var(--parallax-height-small); 
    }

    .parallax_3 {
      height: var(--parallax-height-small); 
    }

    .parallax_4 {
      height: var(--parallax-height-small); 
    }

    .parallax_5 {
      height: var(--parallax-height-small); 
    }

    .parallax_6 {
      height: var(--parallax-height-small); 
    }

    .parallax_7 {
      height: var(--parallax-height-small); 
    }

    .parallax_8 {
      height: var(--parallax-height-small); 
    }

    .menu_wrapper {
        display: grid;
        gap: 0rem;
        padding-top: 1rem;
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(1rem, auto);
    }

    .menu_cell {
        padding: 5px;
        font-size: 2rem;
    }

}