body {
    /* Just define the theme as a dark theme from the website */
    --background-1: #0e1011;
    --background-2: #202629;
    --background-3: #2d373b;

    --text-1: #d8fffd;
    --text-2: #a2dfdd;
    --text-3: #a2dfdd99;

    --invalid: #ff9075;

    /* Also use a very similar layout */
    background: linear-gradient(to right, var(--background-2) 0%, var(--background-3) 30%, var(--background-3) 70%, var(--background-2) 100%);
    color: var(--text-1);

    font-family: monospace;
    image-rendering: pixelated;

    text-align: center;
    align-items: center;
    display:flex;
    flex-direction: column;

    overflow-x: hidden;
    min-height: 100vh;

    font-size: 1em;
}

section {
    flex-grow: 1;
    max-width: 133.3333vh;
    width: 100vw;

    background: var(--background-3);
    padding: 8px;
}

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.25em; }
h4 { font-size: 1.125em; }
h5 { font-size: 1.0625em; }

.software-selector {
    background: var(--background-1);
    padding: 8px;

    border-radius: 8px;
}

.software-container {
    display: grid;
    background: var(--background-3);

    grid-template-columns: auto 1fr auto;

    margin: 2px;
    border-radius: 8px;

    transition: 250ms background, 250ms color;
}

.software-icon {
    aspect-ratio: 1;
    user-select: none;
}

.software-title { user-select: none; }

.software-buttons {
    display: grid;
    grid-template-rows: auto auto;
}

/* ID stuff for the beginning */
.identification-container {
    background: var(--background-1);
    
    display: grid;
    grid-template-columns: 50% 50%;
}

.identification-container > p {
    padding: 8px;
    margin: 0px;

    border-right: 4px solid var(--text-2);
    text-align: right;
}

/* Tree elements */
.key-value-tree {
    display: grid;
    grid-template-columns: 1fr;
    padding: 8px;

    background: var(--background-1);
}

.key-value-path {
    margin: 0px;
    font-weight: bolder;
}

/* Elements within the KV editor */
.translation-group {
    background: var(--background-3);
    color: var(--text-1);
    
    border: none;
    border-radius: 8px;

    margin: 2px;
    animation: slideIn 250ms;
}

.translation-missing {
    border-right: 4px solid var(--invalid);
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.translation-folder {
    font-size: large;
    transition: 250ms background, 250ms color;
}

.translation-folder:hover {
    background: var(--text-2);
    color: var(--background-2);
}

.translation-folder:active {
    background: var(--text-3);
    color: var(--background-3);

    transition: 0ms background, 0ms color;
}

.translation-item {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
}

.translation-item > p {
    margin: 2px;
    align-content: center;
}

.translation-item > textarea { resize: none; }

/* Inputs and buttons */
button {
    background: var(--background-3);
    color: var(--text-1);

    grid-template-columns: auto 1fr auto;

    margin: 2px;
    border: 2px solid var(--background-1);
    border-radius: 8px;
    align-content: center;

    transition: 250ms background, 250ms color;
}

button:hover {
    background: var(--text-2);
    color: var(--background-2);
}

button:active {
    background: var(--text-3);
    color: var(--background-3);

    transition: 0ms background, 0ms color;
}

textarea, input {
    background: var(--background-2);

    border: 2px solid var(--background-1);
    border-radius: 8px;

    color: var(--text-1);

    transition: 250ms background, 250ms border;
}

textarea:focus, input:focus {
    border: 2px solid var(--text-2);
    outline: none;
}

textarea:active, input:active {
    border: 2px solid var(--text-1);

    transition: 0ms background, 0ms border;
}

@keyframes slideIn {
    0% { background: var(--text-1); transform: scaleX(0%); }
    100% { background: var(--background-3); transform: scaleX(100%); }
}