#referenceimg {
    /* position: absolute; */
    background: black;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    position: absolute;
    opacity: 0.5;
}

#displayimg {
    position: absolute;
    background: darkslategray;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    z-index: 1;
}


#toolbar {
    background-color: rgba(255,255,255,0.6);
    position: absolute;
    display: flex;
    flex-wrap: wrap-reverse;
    height: auto;
    padding: 0.8%;

    /* center */
    /* display: flex; */
    /* position: relative; */
    justify-content: center;
    justify-self: center;
    align-items: center;

    /* styling */
    z-index: 10;
    bottom: 10vh;
    /* right: 3vw; */
    /* width: min-content; */
    border-radius: 20px;
}
#toolbar:hover {
    background-color: rgba(255,255,255,0.7);
}

.item {

    /* center */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    /* styling */
    background-color: rgba(255,255,255,0.5);
    cursor: pointer;
    height: 38px;
    width: auto;
    margin-left: 3px;
    margin-right: 3px;
    border-radius: 5px;
    border: 2px solid black;
}

.input {
    z-index: 2;
    opacity: 0;
    position: absolute;
    justify-self: center;
    cursor: pointer;
    width: 4em;
}

.sized {
    margin: 3px;
}

.num {
    opacity: 1;
    justify-self: center;
    cursor: pointer;
    width: 2.1em;
}

#undoR {
    background-color: rgba(255,255,255,0.5);
    animation: undoredo 0.3s 1 paused;
}
#redoU {
    background-color: rgba(255,255,255,0.5);
    animation: undoredo 0.3s 1 paused;
}
#fill {
    background-color: rgba(255,255,255,0.5);
    animation: undoredo 0.3s 1 paused;
}
@keyframes undoredo {
    0% {background-color:rgba(255,255,255,0.5);}
    20%{background-color:rgba(218, 11, 11, 0.5);}
    80%{background-color:rgba(218, 11, 11, 0.5);}
    100% {background-color:rgba(255,255,255,0.5);}
}

html {
    cursor: auto;
}