*{

box-sizing: border-box;

}

body{
background-color: #A9A9A9;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}

header{
background-color: #3b3b3b;
overflow: hidden;
}


footer{
  clear: both;
background-color: #3b3b3b;
color: #D3D3D3;
padding: 32px;
text-align: center;
width: 100%;
}

h1{
    color: #1A1A1A;
 float: left;
}


nav a {
background-color: #3b3b3b;
float: left;
text-align: center;
font-size: 17px;
padding: 30px 20px;
text-decoration: none;
width: 100%;
color: #222222;

}

nav a:hover {
background-color: #D3D3D3;
color: #3b3b3b;



}

body{
    color: #222222;
    font-family: Arial, Helvetica, sans-serif;
    margin:0;
    font-size: 16px;
}


input[id="sandwhich_checkbox"]:not(:checked) + nav{
    display: none;
}

#sandwhich_checkbox{
display: none;
}

a{
font-size: 20px;
align-content: center;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: #222222 ;
padding: 10px;


}
a:hover{
 color: #d3d3d3;

}

  #sandwhich_image {
    background-color: white;
    display: block;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    width: 10%;
  }
  

@media only screen and (min-width: 768px) {
    

 input[id="sandwhich_checkbox"]:not(:checked) + nav{
     display: block;
}



  

        #sandwhich_image {
          display: none;
        }


        h1 {
          text-align: left;
          width: 390px;
        }
  

        nav {
          float: right;
        }
  
        nav a {
          width: auto;
        }
}