.container{
    position: relative;
    width: 320px;
    height: 480px;
    float: left;
}

.animation-canvas{
    width: 320px;
    height: 480px;
    image-rendering: pixelated;
    border-style: solid;
    border-width: 2px;
    border-color: black;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}

.drawing{
    z-index: 1;
}

.pixel{
    z-index: 2;
    pointer-events: none;
}

.selection{
    padding-bottom: 20px;
    display: grid;
    place-items: center;
}

.content{
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 20px;
}

.animation-selection{
    height: 30px;
    width: 100px;
    border-radius: 5px 5px 5px 5px;
}

.vertical-container{
   display: grid;
   place-items: center;
   grid-template-columns: 320px;
   row-gap: 10px;
   height: min-content;
}

.vertical-container div{
  text-align: center;
}

.modifier{
    position: relative;
    font-weight: bold;
}

input[type=range], label{
    display: block;
}

.slider{
    width: 250px;
}

.color-box{
    width: 20px;
    height: 20px;
    float: left;
    border-style: solid;
    border-width: 1px;
}

input[type=color] {
    width: 26px;
    height: 26px;
    border: none;
    outline: none;
    padding: 0px;
    float: left;
}

input::-webkit-color-swatch {
    border: none;
}

.color-select > div{
    display: block;
}

.section-label {
    font-weight: bold;
    word-wrap: break-word;
}

.selection-label > input {
    vertical-align: middle;
}

.toolbar {
    display: block;
}

.toolbar > input{
    display: grid;
    float : left;
}