html{ 
    background-color: lightgray;
}

h2 {
    text-align: center;
}

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 20px 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;
}