@import url("https://fonts.googleapis.com/css2?family=Lato:ital@0;1&display=swap");
@import url("https://cdn.jsdelivr.net/npm/@catppuccin/palette/css/catppuccin.css");

:root {
    --ctp-text: var(--ctp-mocha-text);
    --ctp-subtext0: var(--ctp-mocha-subtext0);
    --ctp-surface0: var(--ctp-mocha-surface0);
    --ctp-base: var(--ctp-mocha-base);
    --ctp-mantle: var(--ctp-mocha-mantle);
}

[data-theme="mocha"] {
    --ctp-text: var(--ctp-mocha-text);
    --ctp-subtext0: var(--ctp-mocha-subtext0);
    --ctp-surface0: var(--ctp-mocha-surface0);
    --ctp-base: var(--ctp-mocha-base);
    --ctp-mantle: var(--ctp-mocha-mantle);
}

[data-theme="macchiato"] {
    --ctp-text: var(--ctp-macchiato-text);
    --ctp-subtext0: var(--ctp-macchiato-subtext0);
    --ctp-surface0: var(--ctp-macchiato-surface0);
    --ctp-base: var(--ctp-macchiato-base);
    --ctp-mantle: var(--ctp-macchiato-mantle);
}

[data-theme="frappe"] {
    --ctp-text: var(--ctp-frappe-text);
    --ctp-subtext0: var(--ctp-frappe-subtext0);
    --ctp-surface0: var(--ctp-frappe-surface0);
    --ctp-base: var(--ctp-frappe-base);
    --ctp-mantle: var(--ctp-frappe-mantle);
}

[data-theme="latte"] {
    --ctp-text: var(--ctp-latte-text);
    --ctp-subtext0: var(--ctp-latte-subtext0);
    --ctp-surface0: var(--ctp-latte-surface0);
    --ctp-base: var(--ctp-latte-base);
    --ctp-mantle: var(--ctp-latte-mantle);
}

* {
    color: var(--ctp-text);
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
}

em {
    font-style: italic;
}

a {
    color: inherit;
}

html,
body {
    background: var(--ctp-base);
}

footer {
    width: 100%;
    text-align: center;
}

small {
    color: var(--ctp-subtext0);
}

#configuration {
    width: 600px;
    margin: auto;
    margin-top: 0;
}

#settings > label,
#configuration > label {
    display: inline-block;
    vertical-align: middle;
    margin-top: 10px;
    margin-bottom: 10px;
}

#settings > input,
form > button[type="submit"],
#scenebutton,
#scenelabel,
#savescene {
    float: right;
}

#scenelabel {
    transform: translate(-4px, 6px);
}

input[type="file"] {
    display: none;
}

button {
    color: var(--ctp-text);
    background: var(--ctp-mantle);
    width: 200px;
    border: 4px solid var(--ctp-surface0);
    border-radius: 20px;
    padding: 4px;
}

button:active {
    background: var(--ctp-surface0);
}

input[type="number"] {
    color: var(--ctp-text);
    background: var(--ctp-mantle);
    width: 200px;
    border: 4px solid var(--ctp-surface0);
    border-radius: 10px;
    padding: 4px;
    margin-top: 3px;
}

#configuration > input[type="file"] {
    margin-top: 4px;
}

#errorcontainer {
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000000c0;
}

#error {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 400px;
    height: 200px;
    background: var(--ctp-base);
    border: 4px solid var(--ctp-surface0);
    text-align: center;
    border-radius: 20px;
}

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

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

select {
    color: var(--ctp-text);
    background: var(--ctp-mantle);
    width: 200px;
    border: 4px solid var(--ctp-surface0);
    border-radius: 10px;
    padding: 4px;
    float: right;
}