[x-cloak] { display: none !important; }

* {
    box-sizing: border-box;
    margin: 0;
    background-color: transparent;
    font-family: inherit;
    color: inherit;
}

h1 {
    font-size: 2em;
}

a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    text-decoration: underline;
    text-decoration-color: var(--primary);
}


button {
    display: inline-block;
    border: none;
    cursor: pointer;
    font-weight: 400;
    border: none;
    background-color: var(--primary);
    padding: 0.8rem;
    font-family: inherit;
    font-size: 1.1rem;
    border-radius: var(--radius);
    color: var(--inverse-text);
    text-align: center;
    font-weight: 500;
}

button:hover {
    filter: brightness(75%);
}

button:disabled {
    background-color: rgb(48, 48, 48);
}

button, input, textarea {
    border-radius: var(--radius);
}

input, select, textarea {
    width: 100%;
    padding: 0.8rem;
    font-size: 0.95rem;
    border-radius: 0.25rem;
    border: 0.8px solid var(--border);
    background-color: var(--bg-darker);
    font-family: inherit;
}

input:focus,
textarea:focus {
    outline: 1.8px solid var(--primary);
}

input[type=color] {
    height: 4rem;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table th,
table td {
    text-align: left;
}

hr {
    height: 1px;
    background-color: var(--border);
    border: none;
}

code {
    width: 100%;
    padding: 0.8rem;
    font-size: 0.95rem;
    border-radius: 0.25rem;
    border: 0.8px solid var(--border);
    background-color: var(--bg-darker);
    font-family: monospace;
}