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

:root {
  --primary: #ddd;
  --box1: #e3e8d7;
  --box2:#2986bf;
  --box-back:rgb(246, 244, 226);
  --dark: #333;
  --light: #fff;
  --main-radius: 12px;
  --main-border: #3c0404 2px solid outset;
  --main-padding: 0.6rem;
  --main-radius: 10px;
  --boxes-radius: 18px;
  --shadow: 0 1px 5px rgba(104,104,104,0.8);
  --padding-top: 2rem;
  --margin-top: 1rem;
  --border-style: outset;
}

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

body {
  position: relative;
  min-height: 100vh;
  line-height: 1.4;
  margin-left: 35px;
  margin-right: 35px;
  background: url(../images/brown.jpg);
  padding-bottom: 100px;
}

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

.parent {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 12px;
  margin: 0 auto;
  grid-template-areas: "top top top top top top" "header header header header header header" "nav nav nav nav nav nav" "box1 box2 box3 box4 box5 box6" "main main main main main main" "footer footer footer footer footer footer";
}

header {
  grid-area: header;
  margin: auto;
  padding: 15px;
}

header h1 {
  font-size: 35px;
}

header p {
  font-size: 18px;
}

nav {
  grid-area: nav;
  margin-bottom: 15px;
}

#top {
  grid-area: top;
  background-image: url(../images/healy530.jpg);
  background-repeat: repeat;
  border: #000000 1px solid;
  height: 2rem;
}

.top-bar {
  grid-area: top-bar;
  border: #000000 3px solid;
  border-top: 5px solid rgb(121, 135, 156);
  height: 55px;
}

/* Begin main area */
main {
  grid-area: main;
  margin-bottom: 2rem;
  padding: 18px;
  min-height: 200px;
  background-color: #dcdcdc;
  border: #161918 0.2rem outset;
  border-radius: var(--main-radius);
}

#box1 {
  grid-area: box1;
  border: #000000 2px solid;
  padding-top: 1 rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  margin-bottom: 2rem;
  height: auto;
  border-radius: var(--boxes-radius);
}

#box2 {
  grid-area: box2;
  border: #333 2px solid;
  padding: 0.5rem;
  max-height: 18rem;
  text-align: center;
}

#box3 {
  grid-area: box3;
  border: #333 2px solid;
  padding: 0.5rem;
  max-height: 18rem;
  text-align: center;
}

#box4 {
  grid-area: box4;
  border: #080101 2px solid;
  padding: 0.5rem;
  max-height: 18rem;
  text-align: center;
}

#box5 {
  grid-area: box5;
  padding: 0.5rem;
  border: #333 2px solid;
  max-height: 18rem;
  text-align: center;
}

#box6 {
  grid-area: box6;
  padding: 0.5rem;
  border: #0c0202 2px solid;
  max-height: 20rem;
  text-align: center;
}

/* 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: "header header" "nav nav" "box1 box2" "box3 box4" "box5 box6" "main main" "footer footer";
  }
  #top {
    display: none;
  }
}
@media screen and (max-width: 528px) {
  .parent {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "nav" "box1" "box2" "box3" "box4" "box5" "box6" "main" "footer";
  }
  #top {
    display: none;
  }
  .footer {
    height: 8rem;
  }
}/*# sourceMappingURL=template.css.map */