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

:root {
  --primary: #ddd;
  --box1: #bec7a7;
  --box2:#9abbe4;
  --border-radius:10px;
  --dark: #333;
  --light: #fff;
  --shadow: 0 1px 5px rgba(59, 40, 40, 1.8);
  --box-height: 20rem;
  --margin-bottom:2rem;
}

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

body {
  position: relative;
  min-height: 100vh;
  background-color: #1f1a0f;
  line-height: 1.4;
  width: 90vw;
  margin: auto;
  padding-bottom: 100px;
}

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

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

.parent {
  display: grid;
  grid-template-columns: repeat 6 fr1;
  grid-template-rows: 2rem 4rem auto;
  background-image: url(../images/brown.jpg);
  gap: 10px 1rem;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
  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" "box7 main main main main box8";
}

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

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

header h1 {
  font-size: 35px;
}

header p {
  font-size: 18px;
}

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

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

#box1 {
  grid-area: box1;
  background: var(--box1);
  border: 2px solid #fff;
  border-radius: 10px;
  text-align: center;
  padding-top: 3px;
  box-shadow: var(--shadow);
  height: var(--box-height);
}

#box2 {
  grid-area: box2;
  background: var(--box1);
  border: 2px solid #fff;
  border-radius: var(--border-radius);
  text-align: center;
  padding: 1rem 0.5rem 1.8rem 0.3rem;
  box-shadow: var(--shadow);
  height: var(--box-height);
}

#box3 {
  grid-area: box3;
  background: var(--box1);
  border: 2px solid #fff;
  border-radius: 10px;
  text-align: center;
  padding: 1rem 0.5rem 1.8rem 0.3rem;
  box-shadow: var(--shadow);
  height: var(--box-height);
}

#box4 {
  grid-area: box4;
  background: var(--box1);
  border: 2px solid #fff;
  border-radius: 10px;
  text-align: center;
  padding: 1rem 0.5rem 1.8rem 0.3rem;
  box-shadow: var(--shadow);
  height: var(--box-height);
}

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

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

/* 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 box5" "box2 box5" "box3 box6" "box4 box7" "main main" "footer footer";
  }
  #extra {
    display: none;
  }
}
@media screen and (max-width: 528px) {
  .parent {
    grid-template-columns: 1fr;
    grid-template-areas: "nav" "header" "main" "main" "box1" "box2" "box3" "box4" "box5" "box6" "box7" "box8" "footer";
    padding-left: 2px;
    padding-right: 2px;
  }
  .footer {
    height: 10rem;
    margin-top: 5rem;
  }
  #extra {
    display: none;
  }
  Body {
    width: 100%;
  }
}/*# sourceMappingURL=template.css.map */