@import url('https://fonts.cdnfonts.com/css/somybmp017');

* {
    box-sizing: border-box;
}

:root {
    font-size: 20px;
    --bg-main: #56224d;
    --bg-main-light: #8c5384;
    --bg-main-shade: #461e3f;
    --bg-dark: #161737;
    --text-main: #e6bebf;
    --text-alt: #e3ddda;
    --main-border: #050812;

    --border-width: 3px;
    --outline-width: 2px;
    --outline-offset: 1px;

    --input-inner: #3d3b6e;
    --input-border: #161737;
    --input-alt: #775b9f;
    --input-text: #e3ddda;

    --button-light: #aa507d;
    --button-dark: #682d57;
    --button-text: #eef2eb;
    --button-border: #22111c;

    --footer-dark: #1a1f30;
    --footer-light: #353a5d;
    --footer-text: #a193f2;

    --error-bg: #ba0945;
    --error-text: var(--text-alt);

    --warning-bg: var(--bg-main);
    --warning-text: var(--text-main);

    --input-border-style: var(--border-width) solid var(--input-border);
    --font-pixel: 'somybmp01_7';
}

html {
    font-size: 20px;
}

body {
    margin-top: 2rem;
    line-height: 1.5rem;
    font-family: var(--font-pixel);
    color: var(--text-main);
    background-color: var(--bg-dark);
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

main,
header,
form,
footer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

footer {
    width: 100%;
}

a {
    text-decoration: none;
}

.container {
    margin: auto;
    min-width: 300px;
}

.container.container--homepage {
    width: max-content;
}

.container.container--output {
    width: min-content;
}

.generator {
    padding: 1.8rem 2rem 1.6rem 2rem;
    background-color: var(--bg-main);
    border: var(--border-width) solid var(--main-border);
}

.generator-header {
    margin-bottom: 1rem;
    text-align: center;
}

.header-text {
    font-size: 1.8rem;
    margin: 0;
}

.generator-form {
    gap: 1rem;
}

.form-field {
    width: 100%;
}

input[type='number'] {
    width: 4rem;
    margin: 0;
    padding: 0.4rem 0.4rem 0.2rem 0.4rem;
    background-color: var(--input-inner);
    font-size: 1rem;
    font-family: var(--font-pixel);
    color: var(--input-text);
    border: var(--input-border-style);
    box-shadow: none;
    -moz-appearance: textfield;
    -webkit-appearance: none;
    appearance: textfield;
}


input[type="radio"],
input[type="checkbox"] {
    display: grid;
    place-content: center;
    width: 1.2rem;
    height: 1.2rem;
    margin: 0;
    margin-right: 0.5rem;
    background-color: var(--input-inner);
    border: var(--input-border-style);
    transform: translateY(-0.1rem);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

input[type="radio"]::before {
    content: "";
    width: 0.6rem;
    height: 0.6rem;
    transform: scale(0);
    box-shadow: inset 1em 1em var(--input-text);
}

input[type="checkbox"]::before {
    content: "";
    width: 0.6rem;
    height: 0.6rem;
    transform: scale(0);
    box-shadow: inset 1em 1em black;
}

input[type="radio"]:checked::before,
input[type="checkbox"]:checked::before {
    transform: scale(1);
}

input:focus-visible,
button:focus-visible {
    outline: var(--outline-width) solid var(--input-alt);
    outline-offset: var(--outline-offset);
}

.form-tileset-group {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.form-label {
    display: block;
    margin-bottom: 0.2rem;
}

.radio-container {
    display: flex;
    align-items: center;
}

.button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.5rem;
    padding-top: 0.3rem;
    width: 100%;
    height: 3rem;
    text-align: center;
    font-size: 1.2rem;
    font-family: var(--font-pixel);
    cursor: pointer;
    box-shadow: none;
}

.form-generate-button {
    color: var(--button-text);
    background-color: var(--button-light);
    border: var(--border-width) solid var(--button-border);
}

.form-generate-button:focus-visible {
    outline: var(--outline-width) solid var(--input-alt);
    outline-offset: var(--outline-offset);
}

.form-generate-button:hover {
    background-color: var(--button-dark);
}

.link-button {
    border: var(--border-width) solid var(--main-border);
    background-color: var(--footer-light);
    color: var(--footer-text);
}

.link-button:hover {
    background-color: var(--footer-dark);
}

.link-button:focus-visible {
    outline: var(--outline-width) solid var(--footer-light);
    outline-offset: var(--outline-offset);
}

.result {
    width: fit-content;
    border: var(--border-width) solid var(--main-border);
}

.notice,
.output-button {
    min-width: 250px;
}

.notice {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border: var(--border-width) solid var(--main-border);
    text-align: center;
}

.notice-message {
    padding-top: 0.2rem;
}

.notice--error {
    background-color: var(--error-bg);
    color: var(--error-text);
}

.notice--warning {
    margin-top: 0.5rem;
    background-color: var(--warning-bg);
    color: var(--warning-text);
}