body {
  font-family: 'Comic Sans MS', 'Comic Sans', monospace; /* I like comic sans */
  text-align: center;
  margin: auto;
  box-sizing: border-box;
  background-color: rgb(38, 68, 95);
  word-wrap: break-word;
}

/* Below is my grid stuff, I made it mobile responsive first*/
/* Contains everything on my page */
.container {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 1fr auto auto;
  grid-template-areas:
    'header'
    'page-content';
  gap: 1rem;
  background-color: rgb(38, 68, 95);
}

/* CSS for header class */
.header {
  grid-area: 'header';
  background-color: rgb(49, 49, 49);
  background-image: url(/images/header-background.jpg);
  padding: 2rem;
  box-shadow: 1rem 1.5rem 2rem -2rem black;
  border-bottom: 1px solid black;
}

/* CSS for main page stuff */
.page-content {
  margin: 1rem 2rem 0 2rem;
  background-color: rgb(233, 233, 233);
  display: grid;
  grid-template-rows: 1fr;
  padding: 2rem;
  box-shadow: 0 0 1rem black;
}

.important {
  border: 2px solid red;
  padding: 1rem;
  margin-bottom: 2rem;
  background-color: rgb(255, 228, 225);
}

/* Stylizing for my articles*/
.article-format {
  margin-top: 2rem;
  display: grid;
  border-radius: 0.5rem;
  border: 2px solid rgb(24, 24, 24);
  grid-template-columns: auto;
  grid-template-rows: 2fr;
  grid-template-areas:
    'a-header'
    'a-text'
    'a-button';
}

/* Footer CSS */
footer {
  margin: 0 2rem 1rem 2rem; /* It goes up right down left */
  background-color: rgb(233, 233, 233);
  display: grid;
  grid-template-rows: 1fr;
  padding: 0.5rem;
  box-shadow: 0 0 1rem black;
}

/* Below is the css for grid area declaration */
.article-header {
  grid-area: a-header;
}

.article-text {
  grid-area: a-text;
  margin: 1rem;
}

.article-button {
  grid-area: a-button;
}

.home {
  grid-area: home;
}

.tech-blog {
  grid-area: tech-blog;
}

.hs-blog {
  grid-area: hs-blog;
}

/* Logo in the header */
/* Will change eventually */
.logo {
  width: auto;
  height: 6rem;
  grid-area: logo;
  margin: 1rem auto;
  display: block;
}

/* Code for the image examples on CSS concept page */
.css-examples {
  border: 2px solid black;
  height: 10rem;
  width: auto;
  margin: auto;
}

/* Below is the css for my buttons */
.button {
  box-sizing: border-box;
  text-align: center;
  display: block;
  border-radius: 0.5rem;
  margin: 2rem auto;
  text-decoration: none;
  min-width: 9rem;
  max-width: 30%;
  justify-self: center;
  background-color: rgb(51, 51, 51);
  color: white;
  border: 2px solid rgb(24, 24, 24);
  line-height: 1rem;
  padding: 1.2rem;
}

/* Shows that user is hovering over buttons*/
.button:hover {
  text-decoration: underline black;
  background-color: rgb(102, 102, 102);
  color: black;
}

/* Simple styling for examples on CSS Concepts page*/
.code-example {
  border: 1px solid black;
  border-radius: 7px;
  color: rgb(233, 233, 233);
  background-color: rgb(49, 49, 49);
  padding: 0px 5px 0px 5px;
  margin: 2px;
}

/* Table stuff */
table {
  display: table;
}
table,
th,
td {
  margin: auto;
  background-color: rgba(109, 109, 109, 0.438);
  border: 2px solid black;
  border-collapse: collapse;
  text-align: left;
  padding: 5px;
}

#table_list {
  margin: 1px;
  padding-left: 1.2rem;
}

#table_list_text {
  margin: 0;
}

/* The code below helps contain the headers/text/list in the center away from the sides*/
li,
p,
h2,
h3 {
  margin: 1.2rem;
  text-wrap: 1rem;
}

#ignore-the-space {
  /* Lets me block stuff out */
  margin: 0;
}

/* Id for image on main page */
#funnypic {
  margin: auto;
}

/* Id for Te Houtaewa image icon */
#TH-image {
  height: auto;
  width: 14rem;
  margin: auto;
  margin-top: 9rem;
}

/* Id for CSS Box Modle image icon */
#CBM-image {
  border-radius: 1rem;
  height: auto;
  width: 13rem;
  margin: auto;
  margin-top: 9rem;
}

#JSD-image {
  height: auto;
  width: 13rem;
  margin: 9rem auto 1rem;
}

#JSB-example {
  display: block;
  margin: auto;
}

/*--------------------------------------------------*/
/* Tablet view of webpage*/
@media only screen and (min-width: 48rem) {
  .container {
    grid-template-columns: auto;
    grid-template-rows: 0.3fr auto;
  }

  .header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 'logo home tech-blog hs-blog';
    align-items: center;
    justify-content: right;
    line-height: 0.5rem;
  }

  .button {
    margin-right: 1rem;
    min-width: none;
  }

  .logo {
    width: 14rem;
  }

  #TH-image {
    width: 16rem;
    margin-top: 5rem;
  }

  #CBM-image {
    width: 14rem;
    margin-top: 5rem;
  }

  #JSD-image {
    width: 13rem;
    margin: 5rem auto 1rem;
  }

  .page-content {
    margin: 3rem 5rem 0 5rem;
  }

  footer {
    margin: 1rem 5rem;
  }

  .article-button {
    grid-area: a-button;
    margin: 1rem;
  }
}

/*--------------------------------------------------*/
/* Desktop view of webpage*/
/* Need one for smaller laptop*/
@media only screen and (min-width: 64rem) {
  .header {
    grid-template-columns: 2fr 0.5fr 0.5fr 0.5fr;
  }
  .logo {
    width: auto;
    height: 9rem;
    margin: 1rem;
  }
  .page-content {
    margin: 5rem 12rem 0 12rem;
  }

  footer {
    margin: 1rem 12rem;
  }

  .article-format {
    margin: auto 10rem 3rem 10rem;
  }

  .article-button {
    grid-area: a-button;
    margin: 1rem;
  }

  #TH-image {
    width: 15rem;
    margin-top: 4rem;
    margin-bottom: 2rem;
  }

  #CBM-image {
    width: 14rem;
    margin-top: 5rem;
    margin-bottom: 2rem;
  }

  #JSD-image {
    margin: 5rem auto 2rem;
  }

  .center {
    text-align: center;
    list-style-position: inside;
  }

  li,
  p,
  h2,
  h3 {
    margin: 1.2rem 5rem;
    text-wrap: 1rem;
  }
}