html {
    font-family: "Courier New", Courier, monospace;
}

body {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    overflow: auto;
    background-color: white;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-content: center;
}

canvas {
    display: block;
    margin: auto;
    /* Force canvas to render with gpu */
    transform: translateZ(0);
    padding: 1em;
}

main {
    display: flex;
    justify-content: center;
    align-content: center;
    z-index: -1;
}

.buttons-container {
    position: absolute;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-content: center;
    padding: 0.4em;
    margin: auto;
    gap: 0.4em;
    top: 1em;
    opacity: 0.7;
    background: #e9e4e4;
    align-self: center;
}

.buttons-container:hover {
    opacity: 1;
}


.buttons-container button {
    padding: 0.3em 0.4em;
    border: none;
    background: #e9e4e4;
    width: 100%;
    color: #000000;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
}

.buttons-container button:hover {
    background: #d6d1d1
}

form {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-content: center;
    margin: auto;
    max-width: calc(100%);
    max-height: calc(100% - 2em);

    background-color: #f7f2f2;
    border-radius: 0.1em;
    opacity: 1;
    scale: 1;
    transition: 0.5s all ease-in-out;
}

form>.title {
    border-bottom: 4px solid #e9e4e4;
    color: #000000;
    padding: 0.4em 0.6em;
    margin: 0em;
}

form>#form-container {
    overflow-y: auto;
    padding: 0.4em 1em;
}

.form-item {
    display: flex;
    flex-flow: row nowrap;
    align-content: center;
    margin: 0.1em;
    padding: 0.1em;
    gap: 1em
}

.form-item.col {
    flex-flow: column nowrap;
}

.form-item>* {
    margin: 0.4em 0em;
    /* padding: 0.4em 0em; */
}

.form-item label {
    flex: 1 1 auto;
    width: 100%;
}

.form-radio {
    display: flex;
    flex-flow: column nowrap;
    align-content: center;
    margin: 0.4em;
    padding: 0.4em;
}

.form-radio-group {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-content: center;
    margin: auto 0em;
    margin-left: 0.4em;
}

.form-radio-group label {
    margin: 0.4em;
    padding: 0.4em;
}

input {
    margin: 0.4em;
    padding: 0.4em;
    border: none;
    background: #e9e4e4;
    color: #000000;
    font-size: 1em;
    font-weight: medium;
    cursor: pointer;
}

select {
    margin: 0.4em;
    padding: 0.4em;
    border: none;
    background: #e9e4e4;
    color: #000000;
    font-size: 1em;
    font-weight: medium;
    cursor: pointer;
}

label {
    border: none;
    color: #000000;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
}

form .submit-button-container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-content: center;
    border-top: 1px solid #e9e4e4;
    padding: 0.4em;
}

form .submit-button-container button {
    border: none;
    background: #e9e4e4;
    color: #000000;
    width: 100%;
    padding: 0.5em 1em;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    border-top: 4px solid #e9e4e4;
}

form .submit-button-container button:hover,
input:hover,
select:hover {
    background: #d6d1d1
}


@media (max-width: 600px) {
    form {
        width: 100%;
        min-height: 100%;
    }

    #form-container {
        height: 100%;
    }

}