body{
    margin:0;
}

.container{
    padding: 2%;
    max-width: 960px;
    margin: auto;
}

.piece{
    width: 98%;
    margin: 1%;
    font-family: "bodoni 72 oldstyle", sans-serif;
}

.portfolio {
    width: 100%;
}

.lightbox{
    display: none;
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
}

.lightbox img {
    max-width: 90%;
    max-height: 80%;
    margin-top: 2%;    
}

.lightbox:target {
    display: block;
    outline: none;
}

#pagenav{
    width: 100%;
    background: #a2e0cd;    
}

#pagenav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#pagenav ul li{
    display: inline-block;
    padding: 10px;
    color: dimgray;
    box-sizing:border-box;
}

#pagenav ul li a {
    color: inherit;
    text-decoration: none;
    padding: 11px 10px 11px 10px;
}

#pagenav ul li:hover {
    background-color: #eaeda8;
    color: black;
}

#pagenav label, #hamburger {
    display: none;
}

@media screen and (min-width:600px) {
 
    .piece{
        width:30%;
        float: left;
    }
       
}

@media screen and (max-width: 525px){
    #pagenav label {
        display: inline-block;
        color: #000;
        background: #eaeda8;
        font-style: normal;
        font-size: 1.2rem;
        padding: 10px;
    } 
    
    #pagenav ul li {
        display: block;
        border-top: 1px solid #d1f0e7;
    }   
    
    #pagenav ul {
        display: none;
    } 
  
    #pagenav input:checked ~ ul {
        display: block;
    }
    
    
}