html, body {
  font-family: 'Lato', sans-serif;
  margin: 0;
  font-weight: 333;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* #################### */
/* TOP NAVIGATION BAR */

header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
}

nav {
  background-color: #f3beb8; /* add colour to nav bar */
  overflow: hidden;
}

nav li {
  display: inline;
  margin: 0;
  padding: 2 2em;
}

nav ul {
  list-style-type: none; /*removes bullets*/
  margin: 0; /*removes browser defaults*/
  padding: 0.55em;

}

nav li a {
  color: #204156;
  text-decoration: none;
  padding: 2em 2em; /*match both button sizes */
  width: 11em;
}

.active {
  padding: 2em 2em; /*match both button sizes */
  background-color: #ec9589;
}

nav li a:hover {
  padding: 2em 2em; /*match both button sizes */
  background-color: aqua;
}

/* #################### */
/*MAIN PAGE*/

.home {
  display: grid; /*makes it a grid container*/
  gap: 1em 1em; /*gaps between rows and columns*/
  padding: 10.1em 9em 1em 9em; /* white edge around container*/
  grid-template-columns: 1fr 1fr 1fr; /*no of columns taking up equal fraction*/
  place-content: start center; /*align vertically top left and horizontally in center*/
}

.home img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  /* transition: .5s ease; */
}

/* .home-img-name {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;

} */

.home img:hover {
  opacity: 0.77;
}

/* .home-img-name:hover {
  opacity: 1;
} */


/* #################### */
/* FOOTER */

footer {
  position: fixed;
  width: 100%;
  z-index: 1;
  bottom: 0;
  color: #ec9589;
  text-align: center;
}

/* #################### */
/*BACK BUTTON*/

.back-button {
  display: inline-block;
  color: #ec9589;
  /* margin-top: 9.1em; match home minus 1 for button */
  /* margin-left: 9em; line up with image container */
  margin-bottom: 1em;
}

.back-button:link {
  text-decoration: none;
}

.back-button:visited {
  text-decoration: none;
}

.back-button:hover {
  text-decoration: underline;
  background-color: aqua;
  cursor: pointer;
}

/* #################### */
/*INDIVIDUAL CREATION PAGES*/

/* #################### */
/*INDIVIDUAL CREATION DESCRIPTION*/

.individual-creation-description {
  display: block;
  margin: 0em 9em 1em 9.2em;
  padding-left: 1em;
  text-align: left;
  border-left-style: solid;
  border-left-color: #f3beb8;
}

.individual-creation-credits {
  display: block;
  margin: 1em 9em;
}

/* .individual-creation-name {
 /* use when ready to add names */

/* #################### */
/*INDIVIDUAL CREATION IMAGES*/

.creation {
  display: grid; /*makes it a grid container*/
  gap: 1em 1em; /*gaps between rows and columns*/
  padding: 0em 9em; /* white edge around container*/
  grid-template-columns: 1fr 1fr; /*no of columns taking up equal fraction*/
  place-content: start center; /*align vertically top left and horizontally in center*/
}

.creation img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* #################### */
/* CONTACT PAGE */

.contact-dets {
  display: block;
  /* margin: 11em; */
  text-align: center;
}

.button {
    background-color: #f3beb8;
    border: 2px solid #f3beb8;
    /* color: #ec9589; */
    padding: 0.55em 1em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    /* font-size: 11px; */
    transition-duration: 0.4s;
}

.button:hover {
  background-color: #ec9589;
  color: white;
  border-color: #ec9589;
}

.email-box {
  background-color: white;
  border: 2px solid #f3beb8;
  padding: 0.55em 1em;
  outline: #ec9589;
}

input[type=email]:focus {
  border: 2px solid #ec9589;
}

.signup-successful-greeting {
  font-weight: bold;
  color: #ec9589;
  /* border-style: solid;
  border-width: 0.11em;
  border-color: #ec9589; */
  
}

/* #################### */
/* RESPONSIVE*/

 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 480px) {
  .home {
    grid-template-columns: 1fr;
    padding: 3.7em 0 1em 0;
  }
  .back-button {
    visibility: hidden;
    margin: 2.7em 0 0 0;
  }
  .individual-creation-description {
    margin: 0 0.55em;
  }
  .individual-creation-credits {
    margin-left: 0.55em;
    margin-right: 0.55em;
  }
  .creation {
    grid-template-columns: 1fr;
    padding: 0 0 1em 0;
  }
  .contact-dets {
    /* margin: 11em auto; */
    padding: 4.4em 1em 8.8em 1em;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 480px) {
  .home {
    grid-template-columns: 1fr;
    padding: 5.7em 3em 1em 3em;
  }
  .back-button {
    visibility: hidden;
    margin: 3.7em 0 0 0;
  }
  .individual-creation-description {
    margin: 0 0.55em;
  }
  .individual-creation-credits {
    margin-left: 0.55em;
    margin-right: 0.55em;
  }
  .creation {
    grid-template-columns: 1fr;
    padding: 0.77em 0 1em 0;
  }
   .contact-dets {
    padding: 5.7em 3em 8.8em 3em;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .home {
    grid-template-columns: 1fr 1fr;
    padding: 5.7em 3em 1em 3em;
  }
  .back-button {
    visibility: visible;
    margin: 4.7em 0 1em 0;
  }
  .individual-creation-description {
    margin: 0 0.55em;
  }
  .individual-creation-credits {
    margin-left: 0.55em;
    margin-right: 0.55em;
  }
  .creation {
    grid-template-columns: 1fr 1fr;
    padding: 0.77em 0 1em 0;
  }
  .contact-dets {
    padding: 5.7em 3em 8.8em 3em;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 1024px) {
  .home {
    grid-template-columns: 1fr 1fr 1fr;
    padding: 8.7em 6em 1em 6em;
  }
  .back-button {
    visibility: visible;
    margin: 6.7em 0 1em 6em;
  }
  .individual-creation-description {
    margin: 0 6em;
  }
  .individual-creation-credits {
    margin-left: 6em;
    margin-right: 6em;
  }
  .creation {
    grid-template-columns: 1fr 1fr;
    padding: 0.77em 6em 1em 6em;
  }
  .contact-dets {
    padding: 8.7em 6em 8.8em 6em;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1600px) {
  .home {
    grid-template-columns: 1fr 1fr 1fr;
    padding: 11.7em 9em 1em 9em;
  }
  .back-button {
    margin: 8.7em 9em 1em 9em;
  }
  .individual-creation-description {
    margin: 0 9em;
  }
  .individual-creation-credits {
    margin-left: 9em;
    margin-right: 9em;
  }
  .creation {
    grid-template-columns: 1fr 1fr;
    padding: 0.77em 9em 1em 9em;
  }
  .contact-dets {
    padding: 11.7em 9em 8.8em 9em;
  }
}