/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

*{
  font-family: Garamond, "Times New Roman", serif;
}

body{
  background: url("Background.png") no-repeat fixed;
  background-size: 100% 100%;
  padding-left: 18%;
  padding-right: 18%;
}

h1 {text-align: center;}

.container{
  min-height: 100vh;
  display: grid;
  grid-template-areas:
    "hd hd"
    "sd ar"
    "ft ft";
  grid-template-columns: 1fr 6fr;
  grid-template-rows: auto 1fr auto;
  margin: 0;
  padding:0;
}

.container div{
  overflow: hidden;
}

body{margin:0;}

.header{
  grid-area: hd;
  background-color: black;
  color: #099105;
  height: 150px;
  align-content: center;
}

.hbutton {
  grid-area: hd;
  background: transparent;
  text-decoration: none;
}

.sidebar{
  grid-area: sd;
  background-color: black;
}

.article{
  grid-area: ar;
  background-color: #e5dbb9;
}

.article p{
  text-indent: 30px;
  padding-left: 40px;
  padding-right: 40px;
}

.footer{
  margin-top: auto;
  grid-area: ft;
  background-color: black;
  height: 150px;
  align-content: center;
}

.button {
  background-color: #099105;
  color: black;
  padding: 14px 25px;
  text-align: center;
  width: 75px;
  text-decoration: none;
  display: inline-block;
  margin-left: -16%;
  margin-right: auto;
}

.button:hover, .button:active {
  background-color: #8ae54d;
}

.header:hover, .header:active {
  color: #8ae54d;
}

/*Dynamic Property*/
@media (max-width: 500px){
 .container{
   grid-template-columns: 1fr;
   grid-template-rows: auto minmax(3rem, auto) 1fr auto;
   grid-template-areas:
     "hd"
     "sd"
     "ar"
     "ft"
 }
}