.main-content {
    font-size: 14px;
}

.n-selector-input {
    max-height: 2em;
    margin-left: 1em;
    width: 1em;

    text-align: center; 
    -moz-appearance: textfield; /* Les fletxetes get YOTE (firefox) */
    border-style: solid;
    border-color:  #939ab7;
    background-color: #24273a;
    border-width: 2px;
    color: inherit;

    outline-color:  #8aadf4;
}

.n-selector {
    display: flex;
    align-items: center;
}

#anti-selector {
    display: flex;
  align-items: center;
}

/* Les fletxetes get YOTE (altres buscadors) */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#fractal-triat {
  font-family: inherit;
  background-color:  #494d64;
  color: #b8c0e0	;
  border-style: solid;
  border-color: #6e738d;
}
.edit-n {
    font-size: 15px;
}

#edit-n-btns {
    margin-left: 2em;
    display: flex;
}

.tree-input {
    display: flex;
    gap: 2em;
}
#edit-n-btns {
    margin-left: 2em;
    display: flex;
}

#vonkoch-holder, #sierp-holder, #tree-holder, #pyth-tree-holder {
    border: 0.5em ridge;
}

#l-system-holder {
    border: 0.5em ridge;
    width: 200%;
}


#l-system-axiom {
    text-align: center; 
    -moz-appearance: textfield; /* Les fletxetes get YOTE (firefox) */
    border-style: solid;
    border-color:  #939ab7;
    background-color: #24273a;
    border-width: 2px;
    color: inherit;

    outline-color:  #8aadf4;
}

#l-system-start-dir {
    max-height: 2em;
    width: 5em;

    text-align: center; 
    -moz-appearance: textfield; /* Les fletxetes get YOTE (firefox) */
    border-style: solid;
    border-color:  #939ab7;
    background-color: #24273a;
    border-width: 2px;
    color: inherit;

    outline-color:  #8aadf4;
}

.l-system-turtle-radio-bunch {
    display: flex;
    flex-direction: column;
    min-width: 13em;
}


.l-system-turtle-input{
    padding: 1.5em;
    border: ridge 0.2em;
    max-width: 20em;
    display: flex;
    align-items: center;

    margin-top: 2em;
    margin-bottom: 2em;
}

.l-system-turtle-numeric-input, .l-system-turtle-text-input {
    max-height: 2em;
    width: 5em;

    text-align: center; 
    -moz-appearance: textfield; /* Les fletxetes get YOTE (firefox) */
    border-style: solid;
    border-color:  #939ab7;
    background-color: #24273a;
    border-width: 2px;
    color: inherit;

    outline-color:  #8aadf4;

    margin: auto;
}

.l-system-keyboard-input-wrapper {
    /*margin-left: auto;*/
    margin: auto;
}

.l-system-dynamic-input-delete-turtle-button {
    padding: 0.5em;
    max-height: 3em;
    width: 80%;
    font-size: 10px;
    margin: auto;
}

.l-system-dynamic-input-delete-rules-button {
    padding: 0.5em;
    max-height: 3em;
    width: 80%;
    font-size: 15px;
    margin: auto;
    margin-left: 0.6em;
}

.l-system-rules-arrow {
    min-width: 2em;
    max-height: 1em;
    margin-left: 1em;
    margin-right: 1em;
    margin-down: 2em;
}

.l-system-rules-input {
    padding: 1.5em;
    border: ridge 0.2em;
    display: flex;
    align-items: center;
    justify-items: center;

    margin-top: 2em;
    margin-bottom: 2em;
    max-width: 100%;
}

.l-system-rules-box {
    max-height: 2em;
    width: 8em;

    text-align: center; 
    -moz-appearance: textfield; /* Les fletxetes get YOTE (firefox) */
    border-style: solid;
    border-color:  #939ab7;
    background-color: #24273a;
    border-width: 2px;
    color: inherit;

    outline-color:  #8aadf4;

    margin: auto;
    margin-right: 0.75em;
}

#l-system-examples-selector {
  font-family: inherit;
  background-color:  #494d64;
  color: #b8c0e0	;
  border-style: solid;
  border-color: #6e738d;

  margin: auto;
}