/******* El Dorado Bees Helaman2  ******/
* {
  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: 25rem;
  --margin-bottom:3rem;
}

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

body {
  position: relative;
  min-height: 100vh;
  line-height: 1.4;
  margin-left: 5px;
  margin-right: 5px;
  background: url(../images/brown.jpg);
  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: 1rem 7rem auto;
  gap: 10px 2rem;
  margin: 0 auto;
  grid-template-areas: "extra extra extra extra extra extra" "header header header nav nav nav" "box1 main main main main main" "box2 main main main main main" "box3 main main main main main" "box4 main main main main main" "footer footer footer footer footer footer";
}

#extra {
  grid-area: extra;
  border: #7f6082 1px outset;
  height: 2rem;
  margin-bottom: 20px;
}

header {
  grid-area: header;
  margin: auto;
  padding: 5px;
  height: 15rem;
  margin-bottom: 1rem;
  justify-content: left;
}

header h1 {
  font-size: 35px;
}

header p {
  font-size: 18px;
}

nav {
  grid-area: nav;
  margin-top: 2rem;
  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);
}

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

#box5 {
  grid-area: box5;
  background: var(--box1);
  border: 2px solid #fff;
  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;
  text-align: center;
  padding: 0.5rem 0.2rem;
  box-shadow: var(--shadow);
  height: var(--box-height);
  margin-bottom: var(--margin-bottom);
}

/* Begin Footer Css */
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 7rem;
  margin-top: 6rem;
  right: 0;
  left: 0;
  border-radius: 15px;
  background-color: #AAAAAA;
  border-top: rgb(64, 22, 62) 3px solid;
  border-bottom: #3b1f3e 3px ridge;
  border-left: #002f70 2px outset;
  border-right: #3b1f3e 2px outset;
  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" "main main" "footer footer";
  }
  #extra {
    display: none;
  }
}
@media screen and (max-width: 528px) {
  .parent {
    grid-template-columns: 1fr;
    grid-template-areas: "nav" "header" "main" "box1" "box2" "box3" "box4" "footer";
  }
  footer {
    height: 12rem;
  }
  #extra {
    display: none;
  }
}/*# sourceMappingURL=template.css.map */