@charset "utf-8";

:root {
    --background-color: #201920;
    --input-color: #2F252D;
    --hover-color: #3F353D;
    --flash-color: #7b4487;
    --text-outline: #806e4b;
    --font-color: #DFC48C;
    --link-color: #FFF4DC;
    --accent-medium: #71b280;
    --accent-bright: #c4fad1;
    --plant-display: 144px;
    --min-plant-display: 96px;
    --horiz-screen-cutoff: 992;  /*BEWARE! This can't be used in media selectors, hence lack of units. It's here for easy find-replace*/
    --garden-font-color: #001133 ;
}

* {
  box-sizing: border-box;
}

body,
textarea {
    font-family: monospace, Verdana, sans-serif;
    font-variant-emoji: text;
    color: var(--font-color);
    background-color: var(--background-color);
}

a {
    color: var(--link-color);
}

h2, h3 {
    margin-bottom: 5px;
}

a:hover {
    color: var(--accent-bright);
}

/*img {
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
}*/

button, input, .prompt_label {
    background-color: var(--input-color);
    color: var(--font-color);
    font-family: monospace, Verdana, sans-serif;
}

input[type=button] {
    font-family: monospace, Verdana, sans-serif;
    /*width: 5%;
    border-radius: 5px;
    padding: 8px;
    margin: 0 12px 12px 12px;
    display: inline-block;
    border: 0px;*/

}

input[type="text"], textarea {
    outline: none;
    border: none;
    border-bottom: var(--font-color);
    border-bottom-width: thin;
    border-bottom-style: dashed;
    background-color: var(--background-color);
    font-size: 1.2em;
}

input[type="text"]:focus, textarea:focus {
    border-bottom-color: var(--accent-bright);
}

input[type=checkbox] {
    accent-color: var(--accent-medium);
}

input[type='radio'] {
    accent-color: var(--accent-medium);
}

button:hover, input[type=button]:hover {
    background-color: var(--hover-color);
}

input[name="form_type"] {
    margin-left: 10px;
}

#title {
    text-align: center;
    margin-bottom: 10px;
}

#subtitle {
    text-align: center;
    margin-bottom: 10px;
}


input.chunky_wrap,
button.chunky_wrap,
input.chunky_fullwidth,
button.chunky_fullwidth,
button.todo_chunky,
button.layer_control,
button.layer_create,
.prompt_label {
    font-family: monospace, Verdana, sans-serif;
    border-radius: 10px;
    padding: 0.2em 1em;
    margin: 0.1em 0em;
    display: inline-block;
    border: 0px;
    font-size: 1.4em;
}

.active {
    background-color: var(--hover-color);
}

.prompt_label {
    width: 100%;
    text-align: center;
    padding: 0 1em 0 1em;
    margin: 5px;
}

.prompt_label:hover {
    background-color: var(--hover-color);
}

input.chunky_wrap, button.chunky_wrap {
    width: auto;
}

button.layer_control {
    width: 2em;
    height: 1.5em;
    padding: 0 0 0.25em 0;
    margin: 1px;
    color: var(--garden-font-color);
}

button.layer_create {
    color: var(--garden-font-color);
    flex-grow: 1;
    min-height: 2em;
}

button.layer_control:hover, button.layer_create:hover {
    filter: brightness(1.25);
}

button.todo_chunky {
    width: 25vw;
}

input.chunky_fullwidth, button.chunky_fullwidth {
    width: 100%;
}

@media (max-height: 40rem) {
    input.chunky_fullwidth, button.chunky_fullwidth  {
        font-size: 1rem;
    }
}

.center-parent {
    text-align: center;
    width: 95%;
    margin: 0 auto;
}

@media screen and (max-width: 992px){
    .center-parent {
        width: auto;
    }
}

.center-what-i-hold, .center-what-i-hold-fullvert {
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    text-align: center;
}

.center-what-i-hold-fullvert {
    flex-direction: column;
    padding:auto;
    align-items: center;
}

/** GENERALLY USEFUL **/
.basic-text-entry {
    width: auto;
    height: auto;
    font-size: 1.2em;
    padding: 4px;
}

.basic-text-entry:focus {
    -webkit-box-shadow: none;
    box-shadow: 0px 0px 2px 2px var(--font-color);
    outline: var(--text-outline);
}

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
}

.plant_box, .bingo_box, .dotted_plant_box, .got_bingo_box, .swap_box, .swap_box_bought, .plant_box_nohover, .self_care_choice, .todo_choice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    width: var(--plant-display);
    height: var(--plant-display);
    min-width: var(--plant-display);
    min-height: var(--plant-display);
    border-color: var(--accent-medium);
    border-style: none;
    border-width: thin;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
    border-style: none;
    transition: all 0.5s ease-out;
}

.self_care_choice {
    width: var(--plant-display);
    height: var(--plant-display);
    border-style: dashed;
    border-color: var(--hover-color);
}

.dotted_plant_box, .swap_box, .swap_box_bought, .bingo_box {
    border-style: dashed;
}

.dotted_plant_box:hover, .swap_box:hover, .bingo_box:hover, .self_care_choice:hover {
    background-color: var(--hover-color);
    border-color: var(--accent-bright);
    color: var(--accent-bright);
    background-blend-mode: screen;
}

.dotted_plant_box:hover .label_over_plant_canvas, .swap_box:hover .label_over_plant_canvas {
    color: var(--accent-bright);
}

.plant_box:hover, .todo_choice:hover {
    -webkit-filter: drop-shadow(1px 1px 2px var(--accent-bright))
                    drop-shadow(-1px -1px 2px var(--accent-bright));
    filter: drop-shadow(1px 1px 2px var(--accent-bright)) 
            drop-shadow(-1px -1px 2px var(--accent-bright));
}

.todo_choice {
    margin: auto 0 0 0;
    min-width: auto;
    min-height: auto;
}

.bingo_box {
    width: 8em;
    height: 8em;
}

.swap_box, .swap_box_bought {
    justify-content: flex-start;
    width: var(--plant-display);
    height: var(--plant-display);   
}

.swap_box_bought, .swap_box_bought .label_over_plant_canvas {
    opacity: 0.5;
    border-color: var(--flash-color);
    color: var(--hover-color);
}

.bingo_label,
.label_over_plant_canvas {
    word-wrap: break-word;
    pointer-events: none;
    padding: 0.6vh;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.label_over_plant_canvas {
    font-size: 1.6em;
    text-shadow:
        -2px -2px 2px var(--background-color),
        2px -2px 2px var(--background-color),
        -2px 2px 0 var(--background-color),
        2px 2px 0 var(--background-color),
        0em 0em 0.3em var(--background-color),
        0em 0em 0.3em var(--background-color),
        0em 0em 0.2em var(--background-color),
        0em 0em 0.2em var(--background-color);
    transition: all 0.5s ease-in-out;
}

.got_bingo_box {
    margin: auto;
}

.color_flash_animate {
    transition:color 0.75s;
}

.block_window {
    width: 100%;
    height: 100%;
    background-color: rgba(100, 100, 100, 0.5);
    top: 0px;
    left: 0px;
    position: fixed;
}

.toggle_button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    background-position: center;
    background-repeat: no-repeat;
    border-style: none;
    padding: 0em;
    background-color: #0000;
    color: var(--link-color);
    font-size: 1em;
    margin: 0.5em;
}

.toggle_button:hover {
    background-color: #0000;
    color: var(--accent-bright);
}

.generic_button_box, .challenge_button_box {
    border-radius: 20px;
    border-color: var(--font-color);
    border-width: thin;
    border-style: solid;
    background-color: var(--background-color);
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex-direction: column;
    flex-wrap: wrap;
    display:flex;
    padding:1em;
    margin:1em 0em;
    width: fit-content;
}

.generic_button_box {
    width: 60%;
    padding:0 10vw 1em 10vw;
}

@media screen and (max-width: 992px) {
    .generic_button_box {
        width: 95%;
    }
}

/** SHARED STRUCTURAL **/
#content_div {
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 16px;
}

#output_text {
    display: inline-block;
    text-align: center;
    width: 100%;
    margin: 0px;
    padding: 4px;
}

.collection_row,
.collection_display,
#self_care_plant_selector {
    display: flex;
    justify-content: center;
    align-content: center;
}

.collection_display,
#self_care_plant_selector,
.todo_plant_selector_standard,
.todo_plant_selector_minified,
#seed_positioning_grid_div,
.swap_row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min-plant-display), max-content));
    width: 100%;
    margin: 2vh auto;
    justify-content: center;
    align-content: center;
}

.todo_plant_selector_standard{
    grid-template-columns: repeat(auto-fit, minmax(var(--min-plant-display), var(--plant-display)));
}

.todo_plant_selector_minified {
    grid-template-columns: repeat(auto-fit, minmax(60px, var(--min-plant-display)));
    margin: inherit;
}

.swap_row, #self_care_plant_selector {
    display: flex;
    flex-wrap: wrap;
}

#seed_positioning_grid_div {
    justify-content: left;
    margin: 0vh auto;
}

.popup,
.add_seed_popup,
.bingo-popup,
.wildcard-popup {
    position: fixed;
    border-radius: 20px;
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.2);
    border-color: var(--font-color);
    border-width: thin;
    border-style: solid;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -20%);
    background-color: var(--background-color);
    overflow-y: scroll;
    align-items: center;
    justify-content: center;
    max-height: 90vh;
    overflow-y: scroll;
    z-index: 1;
    margin: auto;
    box-sizing: border-box;
}

.wildcard-popup {
    width: 30rem;
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

.add_seed_popup {
    padding: 3em;
    display: flex;
    flex-direction: column;
    padding: 1rem; 
}

@media screen and (max-width: 600px) {

    .popup,
    .bingo-popup,
    .wildcard-popup {
        top: 5%;
        left: 0%;
        transform: unset;
        width: 100vw;
    }
}

/** TODO LIST **/
#top_spacer {
    opacity: 0;
    height: 3em;
    display: inline-block;
}

.dotted-fill-in, .garden-dim-bar {
    border: none;
    outline: none;
    border-bottom-color: var(--font-color);
    border-bottom-style: dashed;
    border-bottom-width: thin;
    display: inline-block;
    padding-top: 72px;
    width: 10vw;
    color: var(--font-color);
    vertical-align: middle;
    background-color: transparent;
    font-size: 1.2em;
    transition: width 1s;
    padding-bottom: 4px;
    resize: none;
    text-align: left;
    overflow: hidden;
    word-wrap:break-word;
}

.dotted-fill-in:focus {
    border-bottom-color: var(--accent-bright);
}

.dotted-fill-in::placeholder {
    color: transparent;
}

.dotted-fill-in:hover::placeholder {
    color: var(--accent-medium);
}

.dotted-fill-in {
    width: 100%;
    min-width: 0px;
    max-height: 15em;
    scrollbar-width: 100px;
}

.garden-dim-bar {
    font-size: 1em;
    outline: none;
    padding: 0px;
    overflow: visible;
    text-align: center;
    width: 2.5em;
    /*text-align: left;
    color: var(--font-color);
    background-color: var(--input-color);
    width: 5em;
    min-width: 40px;
    margin: 2px 4px 2px 2px;
    border-style: solid;
    border-color: #DFC48C00;*/
}

.garden-dim-bar:focus {
    border-color: var(--text-outline);
    outline: none;
}

@media (min-width: 800px) {

    /* hide scrollbars on wide screens */
    .dotted-fill-in {
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    /* Chromium */
    .dotted-fill-in::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 450px) {
    .dotted-fill-in {
        font-size: 1rem;
    }
}

.inline-flex-parent {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    text-align: center;
}

.todo_checkbox {
    accent-color: var(--flash-color);
    min-width: 2.4em;
    min-height: 2.4em;
    margin-top: auto;
    transition: accent-color 1.5s ease;
}

.todo_glowing {
    box-shadow: 0px 0px 8px 4px var(--font-color);
}

.disabled_cust {
    pointer-events: none;
    cursor: not-allowed;
}

#task_div {
    margin-bottom: 16px;
    transition: height 1s linear;
    max-width: 70em;
}

#todo_plant_selector_container {
    transition: height 0.75s;
    border-style: dashed;
    border-width: thin;
    border-top-width: 0px;
    box-sizing: border-box;
}

#todo_add_new {
    position: fixed;
    top: 5vh;
    left: 50%;
    transform: translateX(-50%);
    min-width: min(50vw, 200px);
}

#todo_clear_completed {
    min-width: min(50vw, 200px);
}

/** CREATE GARDEN **/
.generic_dropdown, .garden_dropdown {
    width: auto;
    padding: 8px 8px;
    margin: 0;
    display: inline-block;
    border: 0px;
    border-bottom-style: dashed;
    border-bottom-width: thin;
    background-color: #0000;
    font-family: monospace, Verdana, sans-serif;
    font-size: 0.9em;
    color: var(--font-color);
}

.garden_dropdown {
    color: var(--garden-font-color);
}

.generic_dropdown:open, .garden_dropdown:open {
    background-color: var(--hover-color);
}

.garden_settings_option {
    padding: 8px 8px;
    margin: 0;
    min-height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--garden-font-color);
}

/**.garden-dim-bar {
    text-align: left;
    color: var(--font-color);
    background-color: var(--input-color);
    width: 5em;
    min-width: 40px;
    margin: 2px 4px 2px 2px;
    border-style: solid;
    border-color: #DFC48C00;
    font-size: 0.75em;
}

.garden-dim-bar:focus {
    border-color: #DFC48CA0;
    outline: none;
}**/

.layer_div,
.layer_background_div,
.layer_option_div,
.layer_box_div,
.draggable_layer_div,
#layer_manager,
#layer_holder,
#garden_options_menu {
    width: fit-content;
    height: 15vh;
    border-radius: 5px;
    margin: 0px;
    display: block;
    border: 0px;
    color: var(--font-color);
    overflow: hidden;
    transition: height 0.40s ease-in-out;
}

.layer_background_div {
    display: flex;
    flex-wrap: wrap;
}

.layer_option_div {
    position: relative;
    padding:0.25em;
    margin: 0.5em;
    display: flex;
    flex-wrap: wrap;
    width: 45%;
    flex-grow: 1;
    color: var(--garden-font-color);
}

.layer_option_div label, .layer_option_div input{
    color: var(--garden-font-color);
    border-bottom-color: var(--garden-font-color);
    margin-top: 0.25em;
}

.draggable_layer_div {
    cursor: move;
    user-select: none;
    height: fit-content;
    border-width: thin;
    border-style: solid;
    padding: 0.1em;
    border-top-style: outset;
    border-top-width: 0.2em;
    border-left-width: 0.75em;
    border-right-width: 0.6em;
    margin-top: 0.1em;
}

#layer_manager, #garden_options_menu {
    height: 100%;
    float: right;
    width: 25em;
    /*min-width: 150px;*/
    border-color: var(--input-color);
    border-style: solid;
    border-width: thin;
    transition: all 0.75s linear;
    /*min-width: min(20em, 60vw);*/
}

#layer_manager {
    display: flex;
    flex-wrap: wrap;
}

#layer_holder {
    width: 28vw;
    height: auto;
    flex-grow: 1;
}

input.layer_label {
    font-size: 1em;
    height: 1.1em;
    padding: 0;
    margin: 1px;
    width: 8em;
    background-color: #0000;
    color: var(--garden-font-color);
    border-bottom-color: var(--garden-font-color);
}

/** DIRECTORY **/
.directory-img {
    width: 32px;
    height: auto;
    margin-left: 5px;
    margin-right: 5px;
}

.directory_link,
.deactivated_directory_link,
.index_link {
    font-size: 1.4rem;
    line-height: 1.4;
    text-decoration: none;
    margin-left: 5px;
}

.deactivated_directory_link{
    color: var(--text-outline);
}

.directory_link:hover,
.index_link:hover {
    text-decoration: underline
}

.index_link {
    position: fixed;
    top: 0;
    left: 0;
}

#help_button {
    position: fixed;
    right: 0;
    bottom: 0;
    font-size: 4em;
    border-style: none;
    background-color: #0000;
}

#help_button:hover {
    color: var(--link-color);
    background-color: #0000;
}

#help_button_text {
    display: none;
    border-style: solid;
    border-color: var(--font-color);
    color: var(--link-color);
    position: fixed;
    padding: 2em;
    background-color: var(--background-color);
    top: 40vh;
    right: 30%;
    width: 40%;
    size: 0.1em;
}

#help_button:hover + #help_button_text {
  display: block;
}

/** FLOURISHES **/
.rs_message {
    position: relative;
    top: -50px;
    margin: 0px;
    height: 0px;
}

.growing-fadeout {
    visibility: hidden;
    opacity: 0;
    width: 300vw;
    transition: visibility 0s 1s, opacity 1s linear, width 1s;
}

#load_text {
    opacity: 0;
    animation: load_in 3s;
}

@keyframes load_in {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

plant_particle {
    border-radius: 50%;
    left: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    opacity: 0;
}

particle {
    border-radius: 50%;
    left: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    opacity: 0;
}

/** COLLECTION **/
.garden_util_box,
.garden_util_spacer,
.garden_util_box_fixed,
#seed_positioning_display {
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    border-color: var(--font-color);
    border-style: dashed;
    border-width: thin;
    overflow-x: hidden;
    white-space: nowrap;
}

#seed_positioning_display {
    text-align: left;
    padding-right: 20px;
}

.garden_util_box,
.garden_util_box_fixed {
    -webkit-transition: all 0.75s linear;
    -moz-transition: all 0.75s linear;
    -o-transition: all 0.75s linear;
    transition: all 0.75s linear;
    overflow-x: hidden;
    box-sizing: border-box;
    background-color: var(--background-color);
}

.garden_util_box_fixed {
    width: 20%;
    height: 85%;
    position: fixed;
    overflow-y: scroll;
}

.collection_sort_heading{
    margin: 0.25em auto 0.5em auto;
    text-align: left;
}

.collection-utility-text{
    white-space: normal;
    margin: auto;
}

.collection_mightcolumn {
    flex-grow: 1;
    padding: 0 0.5em 0 0.5em
}

@media screen and (max-width: 992px) {
  .collection_row {
    display:block;
  }
  .garden_util_spacer {
    display:none;
  }
  .garden_util_box_fixed {
    position: relative;
    width: 98%;
    height: auto;
    overflow-y: auto;
  }
  .collection_mightflex {
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
  }

  .collection_mightcolumn {
    min-width: 150px;
    padding: 0em 1.5% 0.5em 1.5%;
    border-style: dashed;
    border-width: thin;
    margin: 1%;
    overflow-wrap: break-word;
    border-radius: 5px;
    height: fit-content'
  }
}

.radio-button label {
    display: inline-block;
    color: var(--font-color);
    padding: 4px 11px;
    cursor: pointer;
}

.radio-button input[type="radio"]:checked+label {
    color: var(--link-color);
    font-weight: bold;
    text-decoration-line: underline;
}

.radio-button input[type="radio"]:checked+.prompt_label {
    color: var(--link-color);
    background-color: var(--hover-color);
    font-weight: normal;
    text-decoration-line: none;
}

.prompt_plants{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.splice-check input[type="checkbox"] {
    display: none;
}

.splice-check label {
    display: inline-block;
    color: #1a88d1;
    padding: 4px 11px;
    cursor: pointer;
    font-weight: bold;
}

.splice-check input[type="checkbox"]:checked+label {
    color: #d1941a;
}

.collection_box,
.showcase_collection_box {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    width: var(--min-plant-display);
    height: var(--min-plant-display);
    border-color: var(--text-outline);
    border-style: dashed;
    border-width: 1px;
    background-position: center;
    background-repeat: no-repeat;
}

.showcase_collection_box {
    width: 128px;
    height: 128px;
    border-style: none;
}

.collection_label,
.showcase_collection_label {
    word-wrap: break-word;
    white-space: nowrap;
    padding: 0.6vh;
    font-size: 0.75rem;
}

.showcase_collection_label {
    opacity: 0.25;
}

/** COMPLETION **/
.collection-info-div {
    display: flex;
    width: 70%;
    position: relative;
    left: 20%;
}

@media screen and (max-width: 992px) {
    .collection-info-div {
        top: 5%;
        left: 0%;
        width: 100%;
    }
}

/** BINGO **/
.side-by-side {
    display: flex;
    width: 100%;
    justify-content: center;
}

@media (max-width: 50vh) {
    .side-by-side {
        flex-direction: column;
    }
}

.bingo-settings-title {
    text-align: center;
    margin-bottom: 0px;
    margin-top: 10px;
}

.got_bingo_box {
    justify-content: center;
    align-content: center;
    text-align: center;
    margin: auto;
}

.bingo_row {
   display: flex;
   justify-content: center;
   align-content: center;
}

/** GARDEN **/
#seed_list, #seed_collection {
    border-style: solid;
    border-color: var(--text-outline);
    width: 98%;
    height: 12vh;
}

#seed_list:focus {
    border-color: var(--font-color);
    outline: none;
}

/** WANDER **/
.wander_choice {
    width: 100%;
    background-color: var(--input-color);
    border: none;
    color: var(--font-color);
    border-color: var(--font-color);
    font-size: initial;
    font-family: monospace, Verdana, sans-serif;
    border-style: solid;
    border-radius: 1em;
    padding: 0.75em;
    margin: 0.25em;
    border-color: #000;
    border-width: thin;
}

.wander_choice:hover {
    background-color: var(--hover-color);
}

.wander_choice:disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.35;
}

/** SETTINGS **/
#delete_data_button:active{
  transition: all 5s ease-in;
  background-color: red;
}

.accent-text {
    color: var(--accent-bright);
}

/** SKETCHER **/
.pixel{
    border-width: 1px;
    border-style: solid;
    border-color: var(--input-color);
    min-width: 3px;
    min-height: 3px;
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

#palette_sketch_page_layout{
    display: flex;
    flex-wrap: wrap;
    flex-direction:column;
    align-content:center;
}

@media screen and (max-width: 992px) {
#palette_sketch_page_layout{
    flex-direction: row;
}
}

#canvas_array{
    display: grid;
    width: 40em;
    height: 40em;
    border-style: solid;
    border-width: thin;
    border-color: var(--hover-color);
}

@media screen and (max-width: 992px) {
#canvas_array{
    width: 70vw;
    height: 70vw;
}
#color_selector{
    width: 20vw;
}
}

/** CHALLENGES **/
#prompt_organizer{
    display:flex;
    flex-direction:row;
    justify-content:center
}

#prompt_text{
    width: 20vw;
}

@media screen and (max-width: 992px) {
    #prompt_organizer{
        flex-direction: column;
    }
    #prompt_text{
        width: 80vw;
    }
}