/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
:root {
    --ui1: rgb(28, 28, 28);
    /*settings bg*/
    --ui2: rgb(255, 255, 255);
    /*ui*/
    --ui3: rgb(16, 16, 16);
    /*preview bg*/
    --ui4: rgb(16, 16, 16);
    --ui4-fade: rgba(16, 16, 16, 0.3);
    /*ui dark*/
    --ui5: rgb(29, 92, 151);
    /*highlight 1*/
    --ui6: rgb(201, 92, 9);
    /*highlight 2*/

    --card1: #FFFFFF;
    --debug: #11cc3600;
    --debug2: rgba(255, 0, 0, 0);

    font-size: 16px;
    font-family: 'PT Sans', sans-serif;
    color: var(--ui2);
    text-underline-offset: 0.1rem;

    /* transform antialiasing hack */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

::selection {
    background-color: var(--ui6);
    color: var(--ui4);
}

* {
    box-sizing: border-box;
}

body, html {
    background-color: var(--ui3);
    height: 100%;
    /* overflow: hidden; */
}

img {
    width: 100%;
    height: auto;
}

label {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: var(--ui2);
}

label svg {
    width: 1.1rem;
    fill: var(--ui2);
}

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

a:visited {
    color: var(--ui2);
}

a:hover {
    color: var(--ui6);
}

header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 2rem 0 1.5rem 0;
    padding: 0 1rem;
}

header>* {
    animation: slide-in-right 2s cubic-bezier(0.190, 1.000, 0.220, 1.000) 0.2s both;
}

footer {
    margin-top: 2rem;
    padding-top: 1rem;
    font-size: 0.75rem;
    border-top: 1px solid var(--ui2);
}

p {
    color: var(--ui2);
    line-height: 110%;
}

.svgstore {
    display: none;
}



/* ----------------------------INPUTS---------------------------- */



.component {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    user-select: none;
    border-width: 0px;
}

.component-row {
    flex-direction: row;
    gap: 0rem;
}

input, textarea {
    display: block;
    width: 100%;
    height: 2rem;
    padding: 0.5rem;
    font-size: 1rem;
    font-family: 'PT Sans', sans-serif;
    color: var(--ui4);
    background-color: var(--ui2);
    border-radius: 0.5rem;
    border: 0px solid var(--ui2);
    box-shadow: inset 2px 4px 1px 0px var(--ui4-fade);
    box-sizing: border-box;
}

input:focus, textarea:focus {
    outline: 1px solid var(--ui6);
    outline-offset: 1px;
}

input[type=range] {
    width: 100%;
    height: 1rem;
    padding: 0;
    margin: 0;
    background-color: var(--ui5);
    box-sizing: border-box;
    /* -webkit-appearance: none; */
}

input[type=range]::before {
    content: '';
    background-color: red;
    width: 1rem;
    height: 1rem;
    z-index: 100;
}

input[type=range]:focus {
    outline: 1px solid var(--ui6);
}

input[type=range]::-webkit-slider-runnable-track, input[type=range]::-moz-range-track {
    background: var(--ui5);
    /* border: 1px solid var(--ui2); */
    border-radius: 1rem;
    width: 100%;
    height: 1rem;
    box-shadow: inset 1px 1px 1px 0px var(--ui4);
    cursor: pointer;
}

input[type=range]::-webkit-slider-thumb, input[type=range]::-moz-range-thumb {
    width: 1rem;
    height: 1.5rem;
    background: var(--ui2);
    border: 1px solid var(--ui2);
    border-radius: 0.25rem;
    cursor: pointer;
    /* -webkit-appearance: none; */
}


textarea {
    resize: none;
    box-sizing: border-box;
    height: 8rem;
}

button {
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    color: var(--ui2);
    background-color: var(--ui5);
    border: 0px solid var(--ui5);
    border-radius: 1rem;
    box-shadow: inset 0px -0.5rem 2px 0px var(--ui4-fade);
    cursor: pointer;
    transition: 0.02s;
}

button:hover {
    box-shadow: inset 0px -0.25rem 2px 0px var(--ui4-fade);
}

button:active {
    box-shadow: inset 0px 0.5rem 0rem 0px var(--ui4-fade);
}

input[type="checkbox"] {
    /** reset **/
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    margin: 0;

    width: 2rem;
    height: 2rem;
    font: inherit;
    color: var(--ui4);
    background-color: var(--ui2);
    border: 0px solid var(--ui2);
    border-radius: 0.5rem;
    box-shadow: inset 2px 4px 1px 0px var(--ui4-fade);
    cursor: pointer;
    user-select: none;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
    cursor: pointer;
    box-sizing: border-box;
}

input[type="checkbox"]:checked {
    /* background-image: url('../assets/images/checkbox1.svg');
    background-size: 1.5rem 1.5rem;
    background-repeat: no-repeat;
    background-position: center center; */
}

input[type="checkbox"]:checked::after {
    content: '';
    z-index: 20;
    width: 1rem;
    height: 1rem;
    background-color: var(--ui4);
    clip-path: polygon(0 56%, 15% 39%, 38% 57%, 84% 10%, 100% 25%, 38% 90%);
}

input[type="checkbox"]:focus {
    outline: 1px solid var(--ui6);
    outline-offset: 1px;
}

input[type="checkbox"]:indeterminate {
    background-image: url(assets/images/checkbox2.svg);
    background-size: 1.5rem 1.5rem;
    background-repeat: no-repeat;
    background-position: center center;
}

input[type="checkbox"]:indeterminate::after {
    content: '';
    z-index: 20;
    width: 1rem;
    height: 1rem;
    background-color: var(--ui4);
    clip-path: inset(37% 0 37% 0);
}

.dropdown {
    position: relative;
    cursor: pointer;
    user-select: none;
    /* z-index: 10; */
}

.dropdown-head {
    position: relative;
    width: 100%;
    height: 2rem;
    box-sizing: border-box;
    padding: 0.5rem;
    font-size: 1rem;
    text-align: left;
    color: var(--ui4);
    background-color: var(--ui2);
    /* border: 1px solid var(--ui2); */
    border-radius: 0.5rem;
    box-shadow: inset 0px -0.5rem 2px 0px var(--ui4-fade);
}

.dropdown-head:hover {
    box-shadow: inset 0px -0.25rem 2px 0px var(--ui4-fade);
}

.dropdown-head:active {
    box-shadow: inset 0px 0.25rem 2px 0px var(--ui4-fade);
}

.dropdown-head::after {
    content: '';
    position: absolute;
    right: 0.5rem;
    /* top: 0.25rem; */
    width: 1rem;
    height: 1rem;
    background-color: var(--ui3);
    clip-path: polygon(50% 100%, 0 25%, 100% 25%);
}

.dropdown-list {
    position: absolute;
    z-index: 30;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    font-size: 1rem;
    color: var(--ui4);
    border-radius: 0.5rem;
    box-shadow: 0rem 0.25rem 0.5rem 0px var(--ui3);
    /* transition */
    transition: 0.05s;
    transform-origin: center top;
}

.dropdown-item {
    height: 100%;
    padding: 0.5rem;
    text-align: left;
    color: var(--ui3);
    background-color: var(--ui2);
    border: none;
    box-shadow: none;
    border-radius: 0rem;
}

.dropdown-item:hover, .dropdown-item:focus {
    color: var(--ui2);
    background-color: var(--ui5);
}

.dropdown-min>.dropdown-head {
    width: fit-content;
    padding: 0.25rem 1.75rem 0.25rem 0.5rem;
    background-color: transparent;
    color: var(--ui2);
    box-shadow: none;
    border-radius: 0;
    border-bottom: 1px solid transparent;
}

.dropdown-min>.dropdown-head:hover {
    border-bottom: 1px solid var(--ui2);
}

.dropdown-min>.dropdown-head::after {
    right: 0.4rem;
    background-color: var(--ui2);
}

.checklist {
    gap: 0rem;
    flex-basis: 1;
}

.checklist-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--ui2);
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.color {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.color-prev {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
}

.color-prev>div {
    flex-grow: 0;
    flex-basis: 1;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    background-color: var(--ui2);
    border-radius: 100%;
    border: 1px solid var(--ui2);
}

.color-pick {
    position: relative;
    width: 100%;
    height: 8rem;
    background: linear-gradient(90deg,
            hsla(0, 100%, 50%, 1.0) 0%,
            hsla(45, 100%, 50%, 1.0) 12.5%,
            hsla(90, 100%, 50%, 1.0) 25%,
            hsla(135, 100%, 50%, 1.0) 37.5%,
            hsla(180, 100%, 50%, 1.0) 50%,
            hsla(225, 100%, 50%, 1.0) 62.5%,
            hsla(270, 100%, 50%, 1.0) 75%,
            hsla(315, 100%, 50%, 1.0) 87.5%,
            hsla(360, 100%, 50%, 1.0) 100%);
    border-radius: 0.5rem;
    outline: 1px solid var(--ui2);
}

.pick-lit {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg,
            hsla(0, 0%, 0%, 1.0) 0%,
            hsla(0, 0%, 50%, 0) 50%,
            hsla(0, 0%, 100%, 1.0) 100%);
    border-radius: 0.5rem;
}

.color-pick>.picker {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 1.2rem;
    height: 1.2rem;
    z-index: 20;
    transform: translate(-0.6rem, -0.6rem);
    background-color: var(--ui2);
    box-shadow: inset 0.1rem 0.1rem 0.1rem 0px var(--ui4), 0.1rem 0.1rem 0.1rem 0px var(--ui4);
    border-radius: 100%;
    border: 2px solid var(--ui2);
}

.hidden {
    display: none;
}

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

.break-words {
    word-break: keep-all;
}

.font-extrabold {
    font-weight: 800;
}


/* ----------------------------STRUCTURE---------------------------- */



.wrapper {
    height: 100%;
}

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 100%;
}

#loadingImg {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 1rem;
}

#loadingImg img {
    width: 4rem;
    border-radius: 1rem;
}

#cardShare {
    text-align: center;
    pointer-events: none;
    width: 0;
    opacity: 0;
    transition: opacity 0.2s;
}

#cardShare.show {
    pointer-events: auto;
    width: 100%;
    opacity: 1;
}

.cardpreview {
    position: relative;
    width: 100%;
    overflow: hidden;
    user-select: none;
    cursor: grab;
}

.cardpreview:active {
    cursor: grabbing;
}

/* PREVIEW */

.preview-load {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    background-color: var(--ui4-fade);
    pointer-events: all;
}

.preview-load img {
    width: 8rem;
    border-radius: 2rem;
}

.preview-settings {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.preview-settings>* {
    pointer-events: all;
}

.preview-settings-mode {
    display: grid;
    grid-template-columns: 0px 1fr;
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    top: 0;
    width: fit-content;
    height: fit-content;
    padding: 1rem;
}

.preview-settings-mode input {
    height: 0;
    width: 0;
    opacity: 0;
    z-index: -1;
}

.preview-settings-mode label {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem 0.5rem 0.75rem;
    border-radius: 1rem;
    opacity: 0.5;
    cursor: pointer;
}

/* .preview-settings-mode label svg {
    width: 1.25rem;
    fill: var(--ui2);
} */

.preview-settings-mode label:hover, .preview-settings-mode input:focus+label {
    text-decoration: underline;
    opacity: 1;
}

.preview-settings-mode input:checked+label {
    box-shadow: inset 1px 1px 1px 0px var(--ui4);
    background-color: var(--ui2);
    color: var(--ui3);
    opacity: 1;
}

.preview-settings-mode input:checked+label svg {
    fill: var(--ui3);
}

.preview-settings-bottom {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: space-between;
    align-items: flex-end;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
}

.preview-settings-bottom>* {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 1;
    width: 12rem;
}

.preview-save {
    width: 100%;
    padding: 0.5rem 2rem;
    background-color: var(--ui6);
    border-color: var(--ui6);
}

.preview-zoom {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    transform-origin: center center;
    transform: scale(0.25);
    transition: 0.1s;
}

.preview-pan {
    position: absolute;
    top: 0px;
    left: 0px;
    width: fit-content;
    height: fit-content;
    transition: 0.02s;
}

.preview-card {
    position: relative;
    width: 1920px;
    height: 1080px;
    opacity: 1;
    background: var(--ui3);
    -webkit-box-shadow: 32px 32px 2px 0px #00000090;
    box-shadow: 32px 32px 2px 0px #00000090;
    animation: fade-in 0.7s cubic-bezier(0.190, 1.000, 0.220, 1.000) 0.5s both;
}

.preview-bgcont {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.preview-bg-trans {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    transition: 0.02s;
}

.preview-detail {
    position: absolute;
    top: 4rem;
    left: 4rem;
    /* width: fit-content; */
    /* min-width: calc(50% - 8rem); */
    width: calc(50% - 8rem);
    /* height: fit-content; */
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    /* justify-content: space-between; */
    justify-content: flex-start;
    box-sizing: border-box;
    padding: 4rem;
    /* overflow: hidden; */
}

.preview-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.preview-border div {
    width: 100%;
    height: 100%;
}

.preview-outline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    outline: 4px solid rgba(255, 255, 255, 0.4);
}

/* CARD DETAIL */

.card-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    /* white-space: nowrap; */
    word-wrap: break-word;
}

.card-subhead {
    width: 100%;
}

.card-footer {
    width: 100%;
    word-wrap: break-word;
    /* margin-bottom: 8rem; */
}

.card-sig {
    position: absolute;
    width: fit-content;
    height: fit-content;
    white-space: nowrap;
    padding: 2rem;
}

.card-movebox {
    outline: 4px dashed rgba(255, 255, 255, 0.4);
    cursor: move;
}

.card-movebox:hover {
    outline: 4px solid rgba(255, 255, 255, 0.4);
}

.card-movebox:active {
    outline: 4px solid var(--ui6);
}

/* JOB HELL */

.card-job1 {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    outline: 1px solid var(--debug);
    width: 100%;
}

.card-job2 {
    display: flex;
    gap: 0.5rem;
    outline: 1px solid var(--debug);
    width: 100%;
}

.card-job3 {
    display: flex;
    flex-wrap: wrap;
    /* width: 40rem; */
    gap: 0.5rem;
    outline: 1px solid var(--debug);
    width: 100%;
}

.card-job-line {
    display: flex;
    gap: 2rem;
}

.card-job-section {
    display: flex;
    gap: 0.25rem;
}

.card-job-set {
    display: flex;
    gap: 0.25rem;
    flex-direction: column;
    align-items: center;
    max-width: 3rem;
}

.card-job-set>svg {
    width: 3rem;
    user-select: none;
    pointer-events: none;
    -webkit-box-shadow: inset 1px 1px 1px 0px #0000006c;
    box-shadow:
        inset 1px 1px 1px 0px #0000006c;
    box-sizing: border-box;
    /* border: 0.125rem solid var(--card1); */
    border-width: 0.125rem;
    border-style: solid;
    border-radius: 0.5rem;
}

.card-job-set2 {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.card-job-set2>svg {
    /* width: 17rem; */
    max-width: 17rem;
    width: 100%;
    height: auto;
    user-select: none;
    pointer-events: none;
    -webkit-box-shadow: inset 0.25rem 0.25rem 0.5rem 1px #0000006c;
    box-shadow:
        inset 0.25rem 0.25rem 0.5rem 1px #0000006c;
    /* border: 0.75rem solid var(--card1); */
    border-width: 0.75rem;
    border-style: solid;
    border-radius: 2.5rem;
}

.card-job-set2>p {
    white-space: nowrap;
    font-variant: small-caps;
}

.card-job-set3 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    /* width: 20%; */
}

.card-job-set3>svg {
    /* max-width: 8rem; */
    user-select: none;
    pointer-events: none;
    -webkit-box-shadow: inset 0.125rem 0.125rem 0.25rem 1px #0000006c;
    box-shadow:
        inset 0.125rem 0.125rem 0.25rem 1px #0000006c;
    /* border: 0.45rem solid var(--card1); */
    border-style: solid;
}

.card-job-set3>p {
    text-align: center;
}

.tank {
    background: rgb(53, 68, 147);
    background: radial-gradient(circle, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.3) 100%),
        linear-gradient(180deg, rgba(53, 68, 147, 1) 0%, rgba(36, 57, 101, 1) 100%);
}

.heal {
    background: rgb(59, 101, 41);
    background: radial-gradient(circle, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.3) 100%),
        linear-gradient(180deg, rgba(59, 101, 41, 1) 0%, rgba(43, 60, 39, 1) 100%);
}

.dps {
    background-color: rgb(102, 53, 53);
    background: radial-gradient(circle, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.3) 100%),
        linear-gradient(180deg, rgba(102, 53, 53, 1) 0%, rgba(63, 45, 46, 1) 100%);
}

.craft {
    background: rgb(67, 67, 67);
    background: radial-gradient(circle, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.3) 100%),
        linear-gradient(180deg, rgba(67, 67, 67, 1) 0%, rgba(51, 51, 51, 1) 100%);
}

.gather {
    background: rgb(67, 67, 67);
    background: radial-gradient(circle, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.3) 100%),
        linear-gradient(180deg, rgba(67, 67, 67, 1) 0%, rgba(51, 51, 51, 1) 100%);
}

.no-role-bg svg {
    background: none;
    box-shadow: none;
}

.no-role-border svg {
    border: none;
}

/* SETTINGS */

.settings {
    position: relative;
    width: 100%;
    max-width: 700px;
    min-width: 0px;
    height: 100%;
    padding: 2rem;
    overflow-y: scroll;
    background-color: var(--ui1);
}

.changelog {
    width: 100%;
    height: 100%;
    padding: 2rem;
    overflow-y: scroll;
    background-color: var(--ui1);
}

.settings-topbar {
    position: fixed;
    top: 0;
    right: 1rem;
    z-index: 30;
    width: 50%;
    max-width: 700px;
    min-width: 0px;
    padding: 0.5rem 1rem;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    background-color: var(--ui1);
    box-shadow: 0px 0.5rem 1px 0px var(--ui4-fade);
}

.themes {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}

.themes div {
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--ui2);
    border-radius: 100%;
    cursor: pointer;
    transition: 0.02s;
    transform: scale(1);
}

.themes div:hover {
    transform: scale(1.1);
}

.settings-panel {
    padding: 0;
    margin-top: 4rem;
    margin-bottom: 2rem;

    transition: 0.1s;
    transform-origin: center top;
}

.component-group {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    width: 100%;
    margin-bottom: 2rem;
}

.component-group>* {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
}

.component-group.margin-small {
    margin-bottom: 1rem;
}

.component-group.margin-none {
    margin-bottom: 0;
}

.component-group.button-stack {
    flex-direction: column;
    align-items: center;
    width: fit-content;
}

.group-panel {
    margin-bottom: 2rem;
    box-sizing: border-box;
    padding: 1rem;
    border: 1px solid var(--ui2);
    border-radius: 0.5rem;

    transition: 0.1s;
    transform-origin: center top;
}

.animopen {
    transform: scaleY(100%);
    opacity: 1;
}

.animclose {
    transform: scaleY(0%);
    opacity: 0;
}

.hint-text {
    font-size: 0.75rem;
}

.settings-divider {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 6rem;
    margin-bottom: 2rem;
    font-weight: 900;
    white-space: nowrap;
}

.settings-divider.margin-small {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.settings-divider::after {
    content: '';
    display: block;
    width: 100%;
    height: 50%;
    border-top: 1px solid var(--ui2);
}

.settings-advanced {
    display: inline-block;
    width: 100%;
    margin-bottom: 1rem;
    cursor: pointer;
    user-select: none;
    color: var(--ui2);
}

.settings-advanced:hover {
    text-decoration: underline;
}

.settings-advanced::before {
    display: inline-block;
    content: '';
    margin-right: 0.5rem;
    padding: 0.5rem;

    background-color: var(--ui2);
    clip-path: polygon(50% 100%, 0 25%, 100% 25%);

    transition: 0.15s;
    transform: rotate(-90deg);
}

.settings-advanced::after {
    display: inline-block;
    content: '';
    width: 100%;
    height: 0rem;
    border-bottom: 1px solid var(--ui2);

    transition: 0.15s;
    transform: scaleX(100%);
}

.settings-advanced-checked::before {
    transition: 0.15s;
    transform: rotate(0deg);
}

.settings-advanced-checked::after {
    transform: scaleX(0%);
}

.input-text {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* fantasy1 */
@font-face {
    font-family: 'fantasy1';
    src: url(assets/fonts/RunicMTCondensed.ttf) format('truetype');
}

/* eorzean1 */
@font-face {
    font-family: 'eorzean1';
    size-adjust: 80%;
    src: url(assets/fonts/HingashiExtended.ttf) format('truetype');
}

/* HACKY MOBILE LAYOUT */

@media (max-width: 900px) {
    .component-group {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .container {
        display: grid;
        grid-template-rows: 3fr 3fr;
    }

    .preview-settings {
        overscroll-behavior: contain;
    }

    .preview-settings-mode {
        display: none;
    }

    .preview-settings-bottom {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        justify-content: space-between;
        align-items: flex-end;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 75%;
        padding: 1rem;
        box-sizing: border-box;
    }

    .preview-settings-bottom>* {
        flex-grow: 0;
        flex-shrink: 1;
        flex-basis: 1;
        width: 100%;
    }

    .settings {
        max-width: none;
        position: relative;
    }

    .settings-topbar {
        position: absolute;
        width: 100%;
        right: 0;
        box-shadow: none;
    }

    header {
        margin-top: 1.5rem;
        padding: 0;
    }
}

/* ANIMATION KEYFRAMES */
@keyframes slide-in-right {
    0% {
        transform: translateX(20%);
        opacity: 0;
    }

    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
.theme-iris {
    --ui1: #770f0f;
    --ui2: rgb(255, 255, 255);
    --ui3: #1A191C;
    --ui4: #000;
    --ui4-fade: #10151A80;
    --ui5: #282B3C;
    --ui6: #770f0f;
}

.theme-aether {
    --ui1: #282135;
    --ui2: #fff;
    --ui3: #3d334e;
    --ui4: #3a3639;
    --ui5: #cc487f;
    --ui6: #df9711;
}

.theme-light {
    --ui1: #aaa;
    --ui2: #555050;
    --ui3: #eee;
    --ui4: #fff;
    --ui5: #fdaf38;
    --ui6: #ff83b3;
}

/*# sourceMappingURL=main.css.map*/