edit.css

form {
    color: white;
}

label {
    display: flex;
    justify-content: center; /* This centers the child elements (including text) horizontally */
    align-items: center; /* This centers the child elements (including text) vertically */
}
label input {
    flex: 1;
}

html {
    background-color: black;
    font-family: 'Space-Age', sans-serif;
}
#feature-editor {
    border-radius: 10px;
    box-sizing: border-box;
    padding: 1em;
}
.edit-feature {
    display:grid;
    grid-template-columns: 6em 6em auto 6em 2.5em 1.5em;
    height: 2em;
}
.new-feature {
    display: grid;
    grid-template-columns: auto 6em;
    margin-bottom: 0.5em;
}

.save-load {
    margin-top: 0.5em;
    display: flex;
    flex-direction: row;
    justify-content: start;
}
:root {
    --foreground-rgb: 0, 0, 0;
    --background-start-rgb: 214, 219, 220;
    --background-end-rgb: 255, 255, 255;
    /* Cosmic Color Scheme */
    --color-space-black: #000000;
    --color-nebula-purple: #a365f2;
    --color-asteroid-pink: #e16ce6;
    --color-galaxy-blue: #a398f4;
    --color-comet-tail: #e099e6;
    --color-starlight-blue: #6195f9;
    --color-deep-sky: #2198fb;
    --color-twilight-purple: #6566f4;
    --color-alien-green: #a22bec;
    --color-rocket-metal: #2065f5;
    --color-lunar-white: #e6e6e6;

    --radius: 0.5rem;
}

/* Sparkly Class */
.sparkly {
    background: linear-gradient(
        270deg,
        var(--color-nebula-purple),
        var(--color-asteroid-pink),
        var(--color-comet-tail),

        var(--color-galaxy-blue),
        var(--color-starlight-blue),
        var(--color-deep-sky),
        var(--color-twilight-purple),
        var(--color-alien-green),
        var(--color-rocket-metal),
        var(--color-nebula-purple)
    );
    background-size: 800% 800%;
    color: var(--color-lunar-white);
}
.sparkly.animated {
    animation: sparkle 8s linear infinite;
}

/* Sparkly Animation */
@keyframes sparkle {
    0%,
    100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}


body {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto; /* Define two rows, their size determined by the content */
    height: 100vh; /* Ensure the body takes up the full viewport height */
}

body.no-editor {
    display:flex;
    /* reverse the order of the flex items */
    flex-direction: row-reverse;
}
body.no-editor #save-and-publish, body.no-editor #monaco-editor{
   display: none;
}
body.present #feature-editor {
  display:none;
}
#feature-editor {
    grid-column: 1; /* Places it in the first column */
    grid-row: 1; /* Places it in the first row */
}

#save-and-publish {
    grid-column:2;
    grid-row: 1;
    display: flex;
}
#save-and-publish > button {
    flex: 1;
    cursor:pointer;
    margin: 1em;

}
#save-and-publish > button > a {
    /* clear the default styles */
    text-decoration: none;
    color: inherit;
}
#monaco-editor {
    grid-column: 2; /* Places it in the second column */
    grid-row: 2; /* Places it in the first row */
    /*span 2 rows*/
}
#visualizer {
    grid-column: 1; /* Also in the first column */
    grid-row: 2; /* But in the second row, under #feature-editor */
}


/* Optional adjustments for a better layout */
#feature-editor, #visualizer, #monaco-editor {
    width: 100%; /* Ensures full utilization of their grid cell's width */
    height: 100%; /* For #monaco-editor to fully expand vertically, depending on your design needs */
}