html {
  
}

body {
  background-image: url("../img/background.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin: 0;
}

#website {
  width: 1200px;
  margin: auto;
 display: grid;
 
 grid-template-areas:
 "header header header"
 "badges badges badges"
 "nav dialogue dialogue"
 "nav content content"
 "blurb content content"
 "blurb content content";
 
 grid-template-rows: 100px 150px auto;
 grid-template-columns: 300px auto;
 grid-row-gap: 20px;
 column-gap: 20px;
}

header {
    grid-area: header;
  background-color: #FFDCCD;
  border-style: solid;
  border-color: #98654D;
  border-width: 5px;
 height: 100px;
}

badges {
    grid-area: badges;
  background-color: #FFDCCD;
  border-style: solid;
  border-color: #98654D;
  border-width: 5px;
  height:150px;
}

nav {
    grid-area: nav;
  background-color: #FFDCCD;
  border-style: solid;
  border-color: #98654D;
  border-width: 5px;
  height: 600px;
  width: 300px;
}

dialogue {
    grid-area: dialogue;
  background-color: #FFDCCD;
  border-style: solid;
  border-color: #98654D;
  border-width: 5px;
  height:300px;
}

blurb {
    grid-area: blurb;
  background-color: #FFDCCD;
  border-style: solid;
  border-color: #98654D;
  border-width: 5px;
  height: 600px;
  width: 300px;
}

content {
    grid-area: content;
  background-color: #FFDCCD;
  border-style: solid;
  border-color: #98654D;
  border-width: 5px;
  height: 900px;
}