:root {
    --fullwidth: 65vw;
    --barheight: 2.5rem;
    --flexboxverticalgap: 1rem;
    --greencolor: rgb(138,252,152);
    --redcolor: rgb(236, 139, 131);
    --greycolor: rgb(41,42,54);
    --purplecolor: rgb(220, 191, 251);
    --deepblue: #02101a;
    --yellowcolor: rgb(247, 251, 161);
    --beigecolor: #eeebe2;
    --lightgreycolor: #99947f;
    --bluecolor: rgb(181, 248, 255);
    --universalborderradius: 0.2rem;
    --pinkcolor: rgb(205,101,188);
    --orangecolor: rgb(244,166,88);
    --brightpinkcolor: rgb(239, 69, 160);
}

html{
    font-size: 100%;
}
#header-region{
    margin: 0 auto;
    margin-bottom: 20rem;
    line-height: 2rem;
    position: relative;
}

h1 {
    line-height: 2rem;

    color: var(--beigecolor);
    text-align: left;
    display: inline-block;
    vertical-align: bottom;
}
h3 {
    line-height: 2rem;

    text-align: right;
    display: inline-block;
    vertical-align: bottom;
    color: var(--beigecolor);
}
body{
    /* background-color: var(--greycolor); */
    background-color: black;
    font-family: 'Roboto', sans-serif;
    min-width: 400px;
}
button:focus {
    outline: 0;
}
.main-input-wrapper{ 
    margin: 0 auto;
    margin-top: var(--flexboxverticalgap);
    width: var(--fullwidth);
}
.main-input{
    font-family: "Roboto Mono";
    background-color: var(--deepblue);
    color: var(--beigecolor);
    font-size: 1rem;
    border-width: 1px;
    border-radius: 0.5rem;
    border-color: var(--beigecolor);
    width: 100%;
    box-sizing: border-box;
    height: 70vh;
    outline: none;
    display: block;
    resize: none;
    padding: 1rem;
}
.main-input::placeholder{
    color: var(--beigecolor);
    opacity: 1;
}
#name-input{
    font-family: "Roboto Mono";
    background-color: var(--beigecolor);
    color: var(--greycolor);
    box-sizing: border-box;
    outline: none;
    resize: none;
    border-width: 0rem;
    background-color: var(--beigecolor);
    font-size: 0.8rem;
    text-align: center;
    height: var(--barheight);
}
#name-input::placeholder{
    font-size: 0.8rem;
    color: var(--greycolor);
    text-align: center;
    opacity: 1;
}

#control-buttons{
    width: 100%;    
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 0px;
}
#control-custom-buttons{
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 0px;
}
#generate-control-buttons{
    width: 100%;
    min-width: 15rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 0px;
}
#assemble-control-buttons{
    width: var(--fullwidth);    
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0px;
}

.left-control-button{
    border-bottom-left-radius: 0.5rem;
    border-top-left-radius: 0.5rem;
}
.right-control-button{
    border-bottom-right-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}
.bar-button{
    font-family: "Roboto Mono";
    color: var(--greycolor);
    font-size: 0.8rem;
    background-color: var(--beigecolor);
    height: var(--barheight);
    border-width: 0px;
    transition: background-color 0.15s, color 0.15s;
    text-align: center;
}
label {
    line-height: var(--barheight);
}
.bar-button:hover{
    background-color: black;
    color: var(--beigecolor);
}

.bottom-row-buttons{
    width: 100%;
    height: var(--barheight);
    margin-top: var(--flexboxverticalgap);
    display: flex;
    justify-content: space-between;
}
.bottom-bar-button{
    width: 5rem;
    border-radius: var(--universalborderradius);
}

#parse-button:hover {
    color: var(--greencolor);
    background-color: black;
    justify-content: flex-end;
}

.content-container {
    margin: 0 auto;
    display: flex;
    width: var(--fullwidth);
    flex-direction: column;
}

.generated-text-container{
    margin: 0 auto;
    display: flex;
    width: var(--fullwidth);
    flex-direction: column;
    align-items: flex-start;
    font-size: 1rem;
    border: solid;
    border-width: 2px;
    border-radius: 0.5rem;
    border-color: var(--beigecolor);
    box-sizing: border-box;
    white-space:pre-wrap;
    margin-top: var(--flexboxverticalgap);
    padding: 1rem;
    background-color: var(--deepblue);
    /* border-color: var(--beigecolor); */
}

#generated-text{
    color: var(--beigecolor);
    font-size: 1rem;
    width: 100%;
    word-wrap: break-word;
}

#toggle-control-button:hover{
    color: var(--purplecolor);
}
#custom-control-button:hover{
    color: var(--bluecolor);
}
.plain-text{
    color: beige;
}

.toggle-text{
    color: var(--purplecolor);
}

.custom-text{
    color: var(--bluecolor);
}

.nested-text{
    color: var(--orangecolor);
}

.back-button:hover{
    color:var(--redcolor);
}

.next-button:hover{
    color:var(--greencolor);
}

.toggle-button:hover{
    color:var(--purplecolor);
}

#toggle-interface-panel{
    width: 20rem;    
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    /* gap: 1px; */
    height: var(--barheight);
    margin-top: var(--flexboxverticalgap);
}
.excluded-toggle{
    text-decoration: line-through;
}

#custom-input-box{
    font-family: "Roboto Mono";
    color: var(--beigecolor);
    background-color: var(--deepblue);
    font-size: 1rem;
    width: 100%;
    outline: none;
    display: block;
    border: none;
    resize: none;
}

.text-button{
    font-family: "Roboto Mono";
    color: var(--bluecolor);
    background-color: inherit;
    font-size: 1rem;
    /* cursor: pointer; */
    text-align: right;
    margin-bottom: 0;
}

/* .text-button:hover{
    color: var(--beigecolor);
} */

#header-region{
    width: var(--fullwidth);    
    margin: 0 auto;
    display: grid;
    grid-template-columns: 3fr 0.8fr 0.8fr;
    align-items:flex-end;

}

.tutorial-text{
    color: var(--beigecolor);
    font-family: "Roboto Mono";
}

.example-text{
    background-color: var(--deepblue);
    border-radius: 0.5rem;
    border-width: 1px;
    border-style: solid;
    padding: 1rem;
    border-color: var(--beigecolor);
    font-family: "Roboto Mono";
}

hr{
    width: var(--fullwidth);
}

#control-generate-download-buttons{
    width: 100%;   
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 0px;
}

#control-assemble-download-buttons{
    width: 100%;   
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0px;
}

#tutorial-button{
    background:none;
    color: var(--bluecolor);
}

#tutorial-button:hover{
    background:none;
    color: var(--greencolor);
}

#github-button{
    background:none;
    color: var(--purplecolor);
}

#github-button:hover{
    background:none;
    color: var(--greencolor);
}

#legacy-button{
    background:none;
    color: var(--pinkcolor);
}

#legacy-button:hover{
    background:none;
    color: var(--greencolor);
}

a{
    color:var(--pinkcolor);
    text-decoration: none;
}

.emphasized-text {
    color: var(--pinkcolor);
}

.clickable{
    cursor: pointer;
}

.dynamic-input{
    /* font-family: "Roboto Mono"; */
    background-color: var(--deepblue);
    color: var(--bluecolor);
    font-size: 1rem;
    /* border-width: 1px;
    border-radius: 0.5rem;
    border-color: var(--beigecolor);
    width: 100%;
    box-sizing: border-box;
    height: 70vh; */
    outline: none;
    display:inline;
    border: none;
    overflow: auto;
}

.generate-legend{
    width: 100%;
}

#tutorial-link-to-generate{
    cursor: pointer;
}

#tutorial-link-to-template{
    cursor: pointer;
}