@import url('https://fonts.googleapis.com/css2?family=Spline+Sans+Mono&display=swap');
:root {
    --elem-color: rgb(240, 240, 250);
}
body {
    background: rgb(150, 60, 255) url("data:image/svg+xml,%3C!-- svg: first layer --%3E%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='4' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    font-family: 'Spline Sans Mono', monospace;
    font-size: 1.25em;
    color: black;
}
h1 {
    color: rgb(250, 230, 255);
}
label {
    color: var(--elem-color);
}
#content {
    max-width: 50vw;
    margin: auto;
}
.elem {
    display: block;
    width: 100%;
    margin-bottom: 15px;
    background: rgb(255, 190, 200);
    border: 5px solid black;
    box-sizing: border-box;
    font-family: inherit;
    font-size: inherit;
}
#content textarea {
    min-height: 150px;
    resize: none;
}
.btn {
    cursor: pointer;
    box-shadow: 6px 6px black;
}
.btn:after {
    content: "Solve";
}
.btn:hover {
    background-color: rgb(240, 130, 240);
}
.btn:active, .inProgress {
    box-shadow: none;
    transform: translate(6px, 6px);
}
.inProgress {
    pointer-events: none;
}
.inProgress:after {
    content: "..." !important;
}
.error {
    color: rgb(180, 0, 0);
}
.github {
    text-align: center;
}
.github a {
    text-decoration: none;
    font-size: 0.7em;
    color: var(--elem-color);
}