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

:root {
  --primary: #ddd;
  --box1: #e3e8d7;
  --dark: #333;
  --light: #fff;
  --shadow: 0 1px 5px rgba(104,104,104,0.8);
  --box-height: 18rem;
  --margin-bottom:3rem;
}

html {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--dark);
}

body {
  position: relative;
  min-height: 100vh;
  width: 80vw;
  margin: 0 auto;
  line-height: 1.4;
  padding-bottom: 100px;
}

img {
  max-width: 100%;
  height: auto;
}

.btn {
  background: var(--dark);
  color: var(--light);
  padding: 0.6rem 1.3rem;
}

.parent {
  display: grid;
  background: url(../images/brown.jpg);
  grid-template-columns: repeat 6 fr1;
  grid-template-rows: auto;
  gap: 3px 1rem;
  margin: 0 auto;
  grid-template-areas: "extra extra extra extra extra extra" "header header header header header header" "nav nav nav nav nav nav" "box1 main main main main box4" "box2 main main main main box5" "box3 main main main main box6" "footer footer footer footer footer footer";
}

#extra {
  grid-area: extra;
  border: #3b1f3e 2px outset;
  height: 2rem;
  margin-bottom: 20px;
}

header {
  grid-area: header;
  margin: auto;
  padding: 5px;
  margin-bottom: 0.1rem;
  justify-content: center;
}

header h1 {
  font-size: 35px;
}

header p {
  font-size: 18px;
}

nav {
  grid-area: nav;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: none;
}

/* Begin main area */
main {
  grid-area: main;
  padding: 18px;
  background-color: #dcdcdc;
  border: medium solid #CEAB58;
  border-radius: 10px;
  margin-bottom: 3rem;
}

#box1 {
  grid-area: box1;
  background: var(--primary);
  text-align: center;
  padding: 1rem 0.5rem 1.8rem 0.3rem;
  box-shadow: var(--shadow);
}

#box2 {
  grid-area: box2;
  background: var(--primary);
  text-align: center;
  padding: 1rem 0.5rem 1.8rem 0.3rem;
  box-shadow: var(--shadow);
}

#box3 {
  grid-area: box3;
  background: var(--primary);
  text-align: center;
  padding: 1rem 0.5rem 1.8rem 0.3rem;
  box-shadow: var(--shadow);
  margin-bottom: var(--margin-bottom);
}

#box4 {
  grid-area: box4;
  background: var(--primary);
  text-align: center;
  padding: 1rem 0.5rem 1.8rem 0.3rem;
  box-shadow: var(--shadow);
}

#box5 {
  grid-area: box5;
  background: var(--box1);
  border: 2px solid #fff;
  text-align: center;
  padding: 0.5rem 0.2rem;
  box-shadow: var(--shadow);
}

#box6 {
  grid-area: box6;
  background: var(--box1);
  border: 2px solid #fff;
  text-align: center;
  padding: 0.5rem 0.2rem;
  box-shadow: var(--shadow);
  margin-bottom: var(--margin-bottom);
}

/* Begin Footer Css */
.footer {
  grid-area: footer;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 5rem;
  right: 0;
  left: 0;
  color: #060606;
  background-color: #EDDDBA;
  border: #0a0a0a 0.2rem outset;
  border-radius: var(--main-radius);
  text-align: center;
}

.copyright {
  text-align: center;
}

.footer-right {
  text-align: right;
  padding-right: 15px;
}

@media screen and (max-width: 864px) {
  .parent {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "nav nav" "header header" "box1 box2" "box3 box4" "box5 box6" "main main" "footer footer";
  }
  #extra {
    display: none;
  }
}
@media screen and (max-width: 528px) {
  .parent {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "nav" "header" "main" "main" "main" "box1" "box2" "box3" "box4" "box5" "box6" "footer";
  }
  body {
    width: 100vw;
  }
  .parent {
    width: 100vw;
  }
  footer {
    height: 12rem;
  }
  #extra {
    display: none;
  }
}/*# sourceMappingURL=template.css.map */