:root {
    --clr-fg: #fff;
    --clr-bg: #121212;
    --clr-l1: hsla(0, 100%, 100%, 5%);
    --clr-l2: hsla(0, 100%, 100%, 7%);
    --clr-l3: hsla(0, 100%, 100%, 8%);
    --clr-l4: hsla(0, 100%, 100%, 9%);
    --clr-l5: hsla(0, 100%, 100%, 11%);
    --clr-l6: hsla(0, 100%, 100%, 12%);
    --clr-l7: hsla(0, 100%, 100%, 14%);
    --clr-l8: hsla(0, 100%, 100%, 15%);
    --clr-l9: hsla(0, 100%, 100%, 16%);
    --clr-green: #60ff60;
    --clr-red: #ff6060;
    --clr-primary: #60ffff;
    --no-icon: "✖";
    --yes-icon: "✓";
    --display-old-bef: block;
    --display-old-aft: none;
    --display-new-bef: block;
    --display-new-aft: none;
}

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html, body {
    height: 100%;
}

body {
    font-family: 'Noto Sans', sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

#root, #__next {
    isolation: isolate;
}

body {
    display: inline;
    background: var(--clr-bg);
    color: var(--clr-fg);
}

#content {
    display: block;
    margin: auto;
    width: max-content;
    padding-bottom: 2rem;
}

body div {
    display: block;
}

h1, h2 {
    text-align: center;
    margin: 3rem 0 0 0;
}

#results_container {
    display: none;
    margin: auto;
    width: max-content;
}

#missing {
    float: left;
    padding: 2rem;
    margin-bottom: 5rem;
}

#added {
    float: right;
    padding: 2rem;
    margin-bottom: 5rem;
}

#results_missing {
    padding-top: 1rem;
}

#results_added {
    padding-top: 1rem;
}

.plugins * {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem 0;
}

.old > label::before {
    content: var(--no-icon);
    display: var(--display-old-bef);
    font-size: 1.5em;
    position: absolute;
    height: max-content;
    padding-right: 13em;
    Color: red;
}

.old > label::after {
    content: var(--yes-icon);
    display: var(--display-old-aft);
    font-size: 1.5em;
    position: absolute;
    height: max-content;
    padding-right: 13em;
    Color: var(--clr-green);
}

.new > label::before {
    content: var(--no-icon);
    display: var(--display-new-bef);
    font-size: 1.5em;
    position: absolute;
    height: max-content;
    padding-right: 13em;
    Color: red;
}

.new > label::after {
    content: var(--yes-icon);
    display: var(--display-new-aft);
    font-size: 1.5em;
    position: absolute;
    height: max-content;
    padding-right: 13em;
    Color: var(--clr-green);;
}

#spacer {
    height: 5rem;
    width: 100%;
}

footer {
    z-index: 1;
    width: 100%;
    background-color: rgb(33, 33, 33);
    position: fixed;
    bottom: 0;
    padding: 2rem;
}

a {
    text-decoration: none;
    color: var(--clr-primary);;
}

a:hover {
    text-decoration: underline;
}

.float-right {
    float: right;
}

label, button {
    background: var(--clr-l1);
    text-align: center;
    font-size: 1.2em;
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    cursor: pointer;
}

label:hover, button:hover{
    background: var(--clr-l4);
}

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

button {
    margin-top: 1rem;
    border: none;
    color: var(--clr-fg);
    width: 100%;
}