html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #333;
    color: #ddd;
}

canvas {
    border: 1px solid black;
    z-index: 0;
}

.beastieImage {
    max-width: 2rem;
}

.beastieImageInputWrapper {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: .5rem;
}

.content {
    display: flex;
    flex-direction: column;
    max-width: 375px;
}

.game {
    position: relative;
}

.settings {
    background-color: rgba(33, 33, 33, .95);
    bottom: 0;
    left: 0;
    opacity: 0;
    padding: 0 1rem 1rem;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity ease 0.3s;
    z-index: 1;
}

.settings.showSettings {
    opacity: 1;
}

.settingsBeastie {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.settingsBeastie label {
    padding: .5rem;
}

.settingsFooter {
    margin: 1rem;
    text-align: right;
}

.toggleSettings {
    background-color: rgba(33, 33, 33, .9);
    border: 1px solid rgba(33, 33, 33, .9);
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 5px;
    z-index: 2;
}