* {
    box-sizing: border-box;
    user-select: none;
    margin: 0;
    padding: 0;
    font-family: 'regular';
    font-weight: normal;
    font-style: normal;
    color: white;
}

html, body {
    overflow: hidden;
}

#app {
    width: 100vw;
    height: 100vh;
    display: flex;
}

#render {
    background-color: #020617;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    touch-action: none;
}


/* Menu ======================================== */


#menu {
    display: flex;
    flex-direction: column;
    background-color: #080F20;
    min-width: 350px;
    overflow: auto;
    border-right: solid 1px #1E293B;
}

#title, #settings, #infos {
    padding: 24px;
}

#title {
    border-bottom: solid 1px #1E293B;
    display: flex;
    flex-direction: column;
}

#title h1 {
    font-size: x-large;
    color: #22D3EE;
}

#title p {
    margin-top: 4px;
    color: #64748B;
    font-size: small;
}

#settings {
    display: flex;
    flex-direction: column;
}

#infos {
    border-top: solid 1px #1E293B;
    margin-top: auto;
    font-size: small;
    display: flex;
    flex-direction: column;
}

#infos span {
    margin-top: 8px;
    color: #64748B;
}

.panel {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    border: solid 1px #1E293B;
    overflow: hidden;
}

.panel:not(:last-of-type) {
    margin-bottom: 16px;
}

.panel.opened .container {
    max-height: 100vh;
    padding: 24px;
}

.panel.opened .chevron::after {
    transform: translateY(-50%) rotate(90deg);
}

.chevron {
    background-color: #162033;
    font-family: 'semibold';
    cursor: pointer;
    position: relative;
    padding: 16px;
    padding-left: 42px;
}

.chevron::after {
    content: '';
    background-image: url('/assets/images/chevron.svg');
    background-position: center;
    background-size: contain;
    filter: invert(1);
    width: 12px;
    height: 12px;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.15s linear;
}

.container {
    display: flex;
    flex-direction: column;
    background-color: #0F172A;
    transition: all .15s linear;
    max-height: 0px;
    padding: 0px 24px;
}

.container > :not(:last-child) {
    margin-bottom: 16px;
}

.field {
    display: flex;
    flex-direction: column;
}

.field label {
    margin-bottom: 8px;
}


/* Toogle checkbox ======================================== */


.toggle {
    display: flex;
    align-items: center;
}

.toggle input,
.toggle label {
    cursor: pointer;
}

.toggle label {
    font-size: small;
}

.toggle input {
    margin-right: 8px;
    appearance: none;
    background-color: #334155;
    border-radius: 24px;
    width: 40px;
    height: 20px;
    position: relative;
}

.toggle input::after {
    content: '';
    position: absolute;
    background-color: #94A3B8;
    border-radius: 100%;
    top: 4px;
    left: 4px;
    width: 12px;
    height: 12px;
    transition: all 0.15s linear;
}

.toggle input:checked {
    background-color: #0D364C;
}

.toggle input:checked::after {
    background-color: #06B6D4;
    left: 24px;
}


/* Tag ======================================== */


.tag {
    background-color: #0D364C;
    border-radius: 32px;
    padding: 8px 16px;
    width: fit-content;
    text-overflow: ellipsis;
    overflow: hidden;
}

.tag * {
    color: #06B6D4;
}


/* Generic elements ======================================== */


button {
    cursor: pointer;
    background-color: #1E263B;
    color: #94A3B8;
    border-radius: 6px;
    border: solid 1px #414D63;
    padding: 6px 12px;
    transition: opacity 0.1s linear;
    opacity: 1;
}

button:hover {
    opacity: 0.75;
}

button.error {
    border-color: #96323A;
    color: #F87171;
    background-color: #3C2030;
}

button.warning {
    border-color: #927516;
    color: #EDCB1F;
    background-color: #3B3624;
}

button.good {
    border-color: #1A7F49;
    color: #4ADE80;
    background-color: #133935;
}

input {
    appearance: textfield;
}

input:not([type='checkbox']), select {
    background-color: #020617;
    border-radius: 6px;
    border: solid 1px #334155;
    outline: none;
    padding: 8px;
    color: white;
}

a {
    color: #22D3EE;
}


/* Responsive ======================================== */


@media screen and (orientation: portrait) {

}


/* Fonts ======================================== */


@font-face {
    font-family: 'regular';
    src: url('/assets/fonts/Roboto-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'semibold';
    src: url('/assets/fonts/Roboto-SemiBold.ttf') format('truetype');
}

@font-face {
    font-family: 'bold';
    src: url('/assets/fonts/Roboto-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'light';
    src: url('/assets/fonts/Roboto-Light.ttf') format('truetype');
}