html {
    background-color: orange;
}

img {
    height: 400px;
    width: 616px;
}

ol {
    color: blue;
    text-decoration: underline;
}

.grid-container {
    display: grid;
    grid-template-areas:
    'header header header header'
    'haunted haunted message message'
    'haunted haunted message message'
    'pumpkin pumpkin about about'
    'pumpkin pumpkin about about'
    'footer footer footer footer';
}

.header {
    grid-area: header;
    text-align: center;
    background-color: lightgoldenrodyellow;
}

.haunted {
    grid-area: haunted;
    background-color: orangered;
}

.message {
    grid-area: message;
    background-color: yellow;
}

.pumpkin {
    grid-area: pumpkin;
    background-color: orangered;
}

.about {
    grid-area: about;
    background-color: yellow;
}

.footer {
    grid-area: footer;
    text-align: center;
    background-color: lightgoldenrodyellow;
}

.grid-item {
    background-color: rgba(239, 154, 49, 0.8);
    border: 2px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 20px;
    text-align: center;
  }

hr {
    border-bottom: 5px solid rgb(0, 0, 0);
}

h1 {
    text-align: center;
    font-style: italic;
    text-decoration: underline;
}

h3 {
    text-align: center;
}

p {
    margin-left: 7px;
    font-size: 20px;
}

body {
    margin:0;
}

nav {
    border-bottom: 3px solid black;
    height: auto;
}

.checkbox {
    position: absolute;
    display:block;
    height: 32px;
    width: 40px;
    top:7px;
    right:7px;
    z-index:5;
    opacity:0;
    cursor:pointer;
}

.HamburgerLines {
    margin-left:7px;
    padding-top:7px;
    display:inline-block;
    animation: fadeIn 0.2s;
    position: absolute;
    top: 0px;
    right: 7px;
}

.HamburgerLine {
    background:black;
    width: 40px;
    margin: 7px 0;
    height: 6px;
    height: 6px;
    display:block;
}

.HamburgerLine:nth-child(1) {
    margin:0;
}

.Xlines{
    margin-left:7px;
    padding-top:20px;
    display:block;
    animation: fadeIn 0.2s;
    position: absolute;
    top: 0px;
    right: 7px;
}

.Xline {
    background:black;
    width: 40px;
    height: 6px;
    display:block;
}

.Xline:nth-child(1) {
    transform:rotate(45deg)
}

.Xline:nth-child(2) {
    transform:rotate(-45deg) translateY(-4px) translateX(4px);
}

.hamburgerMenu {
    margin-top: 20px;
}

.hamburgerMenu li{
    animation: fadeIn 0.2s;
    list-style:none;
    padding: 0 0 10px 10px;
    text-align: right;
}

.hamburgerMenu li:nth-child(1) {
    padding-top:30px;
}

input[type="checkbox"]:checked ~ .HamburgerLines {
    display:none;
}

input[type="checkbox"]:not(:checked)~ .hamburgerMenu {
display:none;
}

input[type="checkbox"]:not(:checked) ~ .Xlines{
    display:none;
}

.hamburgerMenu a,
.hamburgerMenu a:visited,
.hamburgerMenu a:hover {
    color: inherit;
    text-decoration: none;
}