/* By adding the colours to the root document for the stylesheet. new variables have been created. */

:root {

  --c: #F5F5DC;
  --g: #2E7D32;
  --b: #6D4C41;

}


/* Required fonts, this code adds in the fonts.*/

@font-face {
  font-family: lato;
  src: url(font/Lato/Lato-Regular.ttf);
}

@font-face {
  font-family: latobold;
  src: url(font/Lato/Lato-Bold.ttf);
}

@font-face {
  font-family: roboto;
  src: url(font/Roboto/Roboto-Regular.ttf);
}

@font-face {
  font-family: robotobold;
  src: url(font/Roboto/Roboto-Bold.ttf);
}

/* Overall foundation for text and background. */
body, html {
  
  background-color: var(--c);
  text-align: center;
  height: 100%
  
  }

h1 {

  font-family: lato;
  color: var(--g);
  font-size: 45px;

}


h2, h3 {

  font-family: lato;
  color: var(--b);
  font-size: 22px;

}

p {
  
  font-family: roboto;
  color: var(--b);
  font-size: 20px;

}

strong { 

  font-family: robotobold;
  font-size: 25px;
  color: var(--b)
}

h1 strong {
  
  font-size: 50px;
  font-family: latobold;
  color: var(--g)
}


/* Navigation bar */

@media (min-width: 750px) {
.navbar ul {
  
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: var(--g);
  display: flex;
  border-radius: 10px;

  }


.navbar li a {
  
  display: block;
  margin-left: 150px;
  padding: 50px 16px;
  font-size: 20px;
  text-decoration: none;
  color: var(--c)


}

.navbar ul li a:hover {

  color: var(--b);
  transition: 0.3s;

  }

/* Icons for toggle menu and logo for the navigation bar*/

#logo {
  
  float: left;
  width: 100px;
  height: 10
  0px;

}

#toggle {

  float: right;
  visibility: hidden;

}

#togglemenu {

  background-color: var(--g);
  display: flex;
  visibility: hidden;

}

#togglemenu li a {

  color: var(--c);
  display: block;
  font-size: 20px;
  text-decoration: none;
  visibility: hidden;


}

/* Footer with contacts copyright and social media included. */

.footer {

  position: flex;
  text-align: center;
  padding: 50px;
  margin: -8px;
  background-color: var(--g);

}


.socials {

  float: left;
  font-size: 20px;

}

.contact {

  float: right;
  color: var(--b);
  font-weight: bold;

  }

/* Hero image for index. */

.hero {
  
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("hero/hero.png");
  height: 70%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: block;
  padding: 300px;
  border-radius: 10px;

}

.hero-writing h1 button {

  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--c);
  
  }
  
}

/* Paragraph and image on the right of home page */


.home {

  padding-bottom: 200px;
  text-align: left;


}

.home img {
  
  float: right;
  margin: 60px;
  width: 500px;
  height: 700px;

}


/* Form for booking page */

form {

  background-color: var(--g);
  padding: 20px;

}

form label {

  color: var(--b);
  font-size: 20px;
  font-family: latobold

}

form input {

  font-family: lato;
  margin: 10px;
  height: 50px;
  width: 200px;

}

form select {

  height: 50px;
  width: 200px;

}

input[type="checkbox"] {

  width: 20px;
  height: 20px;


}

input[type="checkbox"]:checked {

  background-color: lightgreen;
  border: 1px solid lightgreen;

}

input[type="submit"]:hover {

  transition: 0.3s;
  background-color: lightgreen;

}


/* Events list for listing events */

.events {

  position: block;
  font-weight: bold;

}

/* Profile cards for partners */

.card {

  display: block;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 450px;
  margin: auto;
  padding: auto;

  
}

.title {
  color: var(--b);
  font-size: 18px;
}


/* Organising images */

.commune {
  background-color: var(--b);
  overflow: auto;
  white-space: nowrap;
  padding: 10px;
}

.commune img {
  padding: 10px;
  height: 500px;
  width: 600px;
}


/* Collage */
.collage {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
 
.collage img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  margin: 10px;
  }



/* Book a table button, a shortcut call to action */

#bookhome, #bookmenu {

  font-family: Latobold, sans-serif;
  background-color: var(--g);
  color: var(--c);
  text-decoration: none;
  border-radius: 20px;
  width: 230px;
  height: 100px;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  text-align: center;

}

#combutton, #partbutton {

  font-family: Latobold, sans-serif;
  background-color: var(--g);
  color: var(--c);
  text-decoration: none;
  border-radius: 20px;
  width: 1250px;
  height: 100px;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  text-align: center;

}


#bookhome:hover, #bookmenu:hover, #combutton:hover, #partbutton:hover {

  background-color: var(--c);
  color: var(--b)

}

.menupart {

  flex-direction: column;
  justify-content: center;

}


/* Mobile Layout */


@media (max-width: 750px) {

  .navbar ul {
  
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: var(--g);
  display: flex;
  border-radius: 10px;

  }


.navbar li a {
  
  display: none;
  font-size: 20px;
  text-decoration: none;
  color: var(--c);


}

.navbar ul li a:hover {

  color: var(--b)

  }


#logo {
  
  float: left;
  width: 100px;
  height: 100px;

}

#toggle {

  font-size: 100px;
  background: none;
  border: none;
  color: var(--c);
  float: right;
  position: block;

}

#toggle:hover {

  color: var(--b);
  transition: 0.3s;

}

#togglemenu {

  background-color: var(--g);
  display: none;
  padding: 20px;
  text-decoration: none;

}

#togglemenu li a {

  color: var(--c);
  display: flex;
  font-size: 20px;
  text-decoration: none;
  margin: 40px;


}

#togglemenu li a:hover {

  color: var(--b);
  transition: 0.3s;

  }



footer {

  position: flex;
  text-align: center;
  background-color: var(--g);
  padding: 50px;
  margin: -8px;

}


.contact {
  color: var(--b);
  font-weight: bold;

  }


.hero {
  
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("hero/hero.png");
  height: 30%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: block;
  
  border-radius: 10px;

}

.hero-writing h1 button {

  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--c);
  
  }

.home {


  text-align: center;

}

.home img {
  float: center;
  width: 250px;
  height: 400px;

  }

.commune {
  background-color: var(--b);
  overflow: auto;
  white-space: nowrap;
  padding: 10px;
  width: 320px;
  margin: auto;
}

.commune img {
  padding: 10px;
  height: 200px;
  width: 300px;
}

.collage {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
 
.collage img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  margin: 10px;
  }

#bookmenu {

  font-family: Latobold, sans-serif;
  background-color: var(--g);
  color: var(--c);
  text-decoration: none;
  border-radius: 20px;
  width: 125px;
  height: 75px;
  font-size: 10px;
  font-weight: bold;
  transition: 0.3s;

}

#bookmenu, h1 {

  font-size: 30px;

}

#combutton, #partbutton {

  font-family: Latobold, sans-serif;
  background-color: var(--g);
  color: var(--c);
  text-decoration: none;
  border-radius: 20px;
  width: 390px;
  height: 100px;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  text-align: center;

}

h1 strong {
  
  font-size: 35px;
  font-family: latobold;
  color: var(--g)
}

#bookhome {

  font-family: Latobold, sans-serif;
  background-color: var(--g);
  color: var(--c);
  text-decoration: none;
  border-radius: 20px;
  width: 130px;
  height: 50px;
  font-size: 15px;
  font-weight: bold;
  transition: 0.3s;
  text-align: center;

}


}