:root {
    --dark-grey: #1c1c1c;
    --pink: #ff008d;
    --blue: #001eff;
    --purple: #8900ff;
}

.generated-area {
    margin-bottom: auto;
}

.top-container {
    display: flex;
    flex-wrap: wrap;
}

.top-container div {
    margin-left: 1em;
}

.input-wrapper { 
    border: var(--pink);
    border-style: solid;
    border-width: .1em;
    padding: .5em;
    margin: .5em;
}

.point-input {
    display: grid;
    grid-template-columns: 1fr 5fr;
    gap: .5em;
    width: 5em;
}

.field-list {
    display: grid;
    grid-template-columns: auto auto;
    gap: .5em;

    border-radius: .1em;
    border-color: var(--dark-grey);
}

.shown-by-button-container {
    visibility: hidden;
    height: 0;
    overflow: hidden;
}

input, select {
    width: 12vw;
}

.type-selector {
    display: flex;
}

.type-selector h2 {
    padding-left: 1vw;
    padding-right: 1vw;
}

.selected {
    text-decoration: underline;
}

.hidden {
    height: 0;
    visibility: hidden;
}

.bezier-selector, .svg-selector {
    cursor: pointer;
}

:is(.bezier-selector, .svg-selector):hover{
    color: var(--pink);
}

textarea {
    margin-left: 1em;
    width: auto;
}