:root {
    --primary-bg-colour: #171717;
    --secondary-bg-colour: #333;
    --primary-txt-colour: #eee;
    --secondary-txt-colour: #9e9e9e;
    --primary-theme-colour: #37B;
    --secondary-theme-colour: #9BF;
}
/* 
We need to toggle dark mode based on the user's preference in shadertoy settings 
OR 
store colour theme preferences in a shader on their account 
*/
  

body {
    font-family: "JetBrains Mono", monospace;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;

    color: var(--primary-txt-colour);
    background-color: var(--primary-bg-colour);
}

.content {
    display: flex;
    flex-direction: row;
    gap: .5rem;
    padding: .5rem;
    flex-wrap: wrap;
}

.outerBox {
    border-radius: 1rem;
    background-color: var(--secondary-bg-colour);
    padding: .5rem;
    max-width: 100vw;
    min-width: 30rem;
        
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: .5rem;
}

.innerBox {
    border-radius: .5rem;
    background-color: var(--primary-bg-colour);
    padding: .5rem;
    
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

::placeholder {
    color: var(--secondary-txt-colour);
    opacity: 1; /* Firefox */
}
  

button {
    border-radius: .5rem;
    border: 0;
    padding: .5rem;
    color: var(--primary-txt-colour);
    background-color: var(--secondary-bg-colour);
    transition: background-color 100ms;
}

button:hover {
    background-color: var(--secondary-txt-colour);
    transition: background-color 100ms;
}

button:active {
    background-color: var(--primary-bg-colour);
    transition: background-color 100ms;
}

.buttonPressed {
    background-color: var(--primary-theme-colour);
    transition: background-color 100ms;
}

.buttonPressed:hover {
    background-color: var(--secondary-theme-colour);
    transition: background-color 100ms;
}

.buttonPressed:active {
    background-color: var(--secondary-bg-colour);
    transition: background-color 100ms;
}

#saveButton {
    background-color: var(--primary-theme-colour);
    display:inline-block;
}

#saveButton:hover {
    background-color: var(--secondary-theme-colour);
    transition: background-color 100ms;
}

select {
    border-radius: .2rem;
    border: .1rem;
    border-color: var(--primary-bg-colour);
    padding: .5rem;
    color: var(--primary-txt-colour);
    background-color: var(--secondary-bg-colour);
    display:inline-block;
}

select:hover {
    border-color: var(--secondary-txt-colour);
}

input {
    border-radius: .8rem;
    padding: .5rem;
    color: var(--primary-txt-colour);
    background-color: var(--secondary-bg-colour);
    display:inline-block;
}

input:hover {
    border-color: var(--secondary-txt-colour);
}

input[type=number] {
    width: 4rem;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}

input[type=range]{
    height: .5rem;
    flex: 1;
    min-width: 10rem;
    cursor: pointer;
    outline: none;

    -webkit-appearance: none;
    appearance: none; 
    overflow: hidden;
    border-radius: 16px;

}

/* Track: webkit browsers */
input[type="range"]::-webkit-slider-runnable-track {
    height: .5rem;
    background: var(--secondary-bg-colour);
    border-radius: 16px;
}
  
  /* Track: Mozilla Firefox */
input[type="range"]::-moz-range-track {
    height: .5rem;
    background: var(--secondary-bg-colour);
    border-radius: 16px;
}
  
  /* Thumb: webkit */
input[type="range"]::-webkit-slider-thumb {
    /* removing default appearance */
    -webkit-appearance: none;
    appearance: none; 
    /* creating a custom design */
    height: .5rem;
    width: .5rem;
    background-color: var(--secondary-txt-colour);
    border-radius: .25rem;
}


/* Thumb: Firefox */
input[type="range"]::-moz-range-thumb {
    height: .5rem;
    width: .5rem;
    background-color: var(--secondary-txt-colour);
    border-radius: .25rem;
}
  
input[type="range"]::-webkit-slider-thumb:hover {
    background-color: var(--secondary-txt-colour);
}

input[type="range"]::-moz-range-thumb {
    background-color: var(--secondary-txt-colour);
}

.resSelector {
    color: inherit;
    border: none;
    border-radius: 5%;
    background: none;
    font-size: 16px;
    resize: none;
    outline: none; /* Remove default focus outline */
    overflow:hidden;
    width: 4ch;
    height: 1em;
    display: inline-block;
    vertical-align: bottom; 
}

#canvas {
    margin: 0px -.5rem;
}

.optionsBox {
    width: 100%;
    box-sizing: border-box;

}

.optionsBoxes {
    width: min-content;
    margin-left: auto;
    margin-right: auto;
}

.optionSelect {
    user-select: none; 
    min-width: max-content
}

#advancedBox {
    display: none;
}

#archiveBox {
    display: none;
    min-width: 25rem;
}

#archiveBox > * {
    margin-top: .5rem;
}

#renderBox {
    display: none;
}

.codeBox {
    height: 100%;
    overflow: hidden;
}

p {
    margin-top: 0;
    margin-bottom: 0;
    margin-right: .5rem;
    margin-left: .5rem;
}

.shaderInfo {
    display: flex;
    flex-direction: row;
    flex: 0 1 auto;
    justify-content: space-between;
    align-items: center;
    min-width: min-content;
    width: max-content;
}

.shaderInfo > * {
    margin: 0 .5rem;
}

a {
    color: var(--primary-theme-colour);
}

a:hover {
    color: var(--secondary-theme-colour);
}

.inputRow {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: .5rem;
    align-items: center;
    gap: .5rem;
}

.inputRow > * {
    margin-bottom: 0;
    margin-top: 0;
}

.inputSection {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.inputSection > * {
    margin: 0 .5rem;
}

.jsonButton {
    flex: 1;
}

.breaker {
    width: 100%;
    visibility: hidden;
    margin: -.5rem;
}

.mouseButton {
    width: 100%;
}

.inline {
    padding: 0;
    margin: 0;
}

.no-select {
    user-select: none; /* Prevents text selection */
}


/* For Monaco editor */
.line-numbers {
    user-select: none;
}