body {
    background-image: url(background_gallery.gif);
    background-repeat: no-repeat;
    background-size: 100%;
}
.parent {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid: 
    'in in nav nav'
    'ar ar ar ar'
    'ar ar ar ar' ;
}

.box {
outline-style: dashed;
outline-width: 15% ;
outline-color: rgb(255, 213, 220);
background-color: rgba(255, 244, 246, 0.719);
color: rgb(255, 171, 185);
margin: 1%;
border-radius: 5%;
padding: 5px ;
}

#instructions {
     grid-area: in;
}

#art {
    grid-area: ar;
}

#nav { 
    grid-area: nav;
    text-align: center;
    display: grid;
    grid-template-columns: auto; }


.button:hover {
transform: rotate(5deg);
transition: transform 0.2s;
transition-timing-function: ease-out;
cursor: pointer;
}

h1 {
text-align: center;
color: rgba(255, 204, 63, 0.925);
}
h2{
text-align: center;
color: rgba(255, 204, 63, 0.925);
}

.drawing {
    display: none;
}

.small {
    width: 10%;
    height: 10%;
    max-width: 800px;
    max-height: 800px;
    padding: 5px;
}