#canvas {
    background-color: grey;
}

#gif {
    position: absolute;
}

.hidden {
    display: none;
}

#maskcanvas {
    z-index: 10;
    /*    position: absolute; */
}

#guides {
    position: absolute;
}

.guide {
    max-width: 50px;
    border: 2px solid black;
}

.currentmask {
    border: 2px solid seagreen;
}

.guide:hover {
    border: 2px solid indianred;
}

.header {
    font-family: 'Bungee Shade', cursive;
    font-size: 36px;
    color: darkolivegreen;
    background-color: palegreen;
    margin-bottom: 10px;
    padding-left: 10px;

}

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

#contentarea div {
    /* padding-top: 8px;
    padding-left: 10px;
    padding-bottom: 20px;
    */
    font-size: 2em;
    font-family: 'Arial';
}

#contentarea input {
    height: 30px;
    width: 480px;
    font-size: 24px;
    margin-bottom: 12px;
}

#contentarea button {
    height: 36px;
    font-size: 24px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 10px;
}

#contentarea button:hover {
    border: 2px solid cornflowerblue;
}

#instructions {
    background-color: lightblue;
    padding: 10px;
    text-align: center;
    padding-bottom: 30px;
}

#contentarea ul {
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    list-style-type: none;
}

#cutinstructions {
    background-color: lightgoldenrodyellow;
}

#contentarea li {
    font-size: 16px;
}

td {
    font-size: 10px;
    vertical-align: bottom;
}

#contentarea #error {
    font-size: 24px;
    color: red;
    padding-bottom: 10px;
}

.examples {
    text-align: center;
    padding: 10px;
}

.examples img {
    max-height: 70px;
}
.footer {
    padding: 10px;
    background-color: palegreen;
    font-size: 12px;
    color: darkolivegreen;
    font-family: 'Arial';
    text-align: center;
}