:root {
    --background-color: #d4ccff;
    --font-family: 'Courier New', Courier, monospace;
    --textarea-border: 2px dotted #d4ccff;
    --textarea-width: 200px;
    --textarea-height: 80px;
    --textarea-padding: 0.5em;
    --textarea-border-radius: 0.5em;
    --button-color: #3c1705;
    --button-background: #f2fdc4;
    --button-background-before: #d1e8a2;
    --button-hover-background: #f2ffb8;
    --button-active-background: #e3fbb0;
    --button-border-radius: 0.75em;
    --button-box-shadow: 0 0 0 2px #d0f1b5, 0 0.625em 0 0 #d4ccff;
    --button-hover-box-shadow: 0 0 0 2px #d2ee95, 0 0.5em 0 0 #d4ccff;
    --button-active-box-shadow: 0 0 0 2px #fbffea, 0 0 #dffaa4;
    --transition-timing: 150ms cubic-bezier(0, 0, 0.58, 1);
    --button-font-weight: 600;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: var(--background-color);
    font-family: var(--font-family);
    margin: 0;
}

.input-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

textarea {
    border: var(--textarea-border);
    width: var(--textarea-width);
    height: var(--textarea-height);
    padding: var(--textarea-padding);
    border-radius: var(--textarea-border-radius);
    resize: none;
}

button {
    font-family: inherit;
    position: relative;
    display: inline-block;
    cursor: pointer;
    border: none;
    outline: none;
    padding: 1em 2em;
    background: var(--button-background);
    color: var(--button-color);
    font-weight: var(--button-font-weight);
    border-radius: var(--button-border-radius);
    transform-style: preserve-3d;
    transition: transform var(--transition-timing), background var(--transition-timing);
}

button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--button-background-before);
    border-radius: inherit;
    box-shadow: var(--button-box-shadow);
    transform: translate3d(0, 0.75em, -1em);
    transition: transform var(--transition-timing), box-shadow var(--transition-timing);
    z-index: -1;
}

button:hover {
    background: var(--button-hover-background);
    transform: translateY(0.25em);
}

button:hover::before {
    box-shadow: var(--button-hover-box-shadow);
    transform: translate3d(0, 0.5em, -1em);
}

button:active {
    background: var(--button-active-background);
    transform: translateY(0.75em);
}

button:active::before {
    box-shadow: var(--button-active-box-shadow);
    transform: translate3d(0, 0, -1em);
}