* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: #101010;
    background-color: #e1e3e4;
    font-family: Consolas, Courier, monospace;
}

textarea {
    padding: 1rem;
    border: none;
    outline: none;
    resize: none;

    width: min(36rem, 80vw);
    height: min(20.25rem, 40vh);
}

canvas {
    width: min(36rem, 80vw);
    height: min(20.25rem, 40vh);

    background-color: #ffffff;
}

input {
    padding: .25rem .5rem;
    width: 4rem;

    border: none;
    outline: none;
    resize: none;

    font-family: inherit;
    text-align: center;
    background-color: #7DDCD3;
}

button, .back {
    border: 0;
    padding: .375rem .5rem;
    font-family: inherit;

    background-color: #7DDCD3;
}

button:hover, .back:hover {
    background-color: #56D0C5;
}

a {
    text-decoration: none;
}

.back {
    position: absolute;
    top: 1rem;
    left: 1rem;
    
    font-size: .875rem;
    color: #101010;
}

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.parameters, .actions {
    width: 100%;
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
}

.parameter {
    text-align: center;
    background-color: #ffffff;;
    padding: .25rem .5rem;
    flex-grow: 1;
}

.action {
    flex-grow: 1;
}

.long {
    width: 8rem;
}