:root {
    --color-background: 11, 22, 34;
    --color-foreground: 21, 31, 46;
    --color-foreground-grey: 15, 22, 31;
    --color-foreground-grey-dark: 6, 12, 19;
    --color-foreground-blue: 15, 22, 31;
    --color-foreground-blue-dark: 6, 12, 19;
    --color-background-blue-dark: 31, 35, 45;
    --color-overlay: 31, 38, 49;
    --color-shadow: 49, 54, 68;
    --color-shadow-dark: 6, 13, 34;
    --color-shadow-blue: 0, 5, 15;
    --color-text: #9fadbd;
    --color-text-light: 114, 138, 161;
    --color-text-lighter: 133, 150, 165;
    --color-text-bright: 237, 241, 245;
    --color-blue: 61, 180, 242;
    --color-blue-dim: 141, 178, 219;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-red: #e85d75;
    --color-peach: #fa7a7a;
    --color-orange: #f79a63;
    --color-yellow: #f7bf63;
    --color-green: #7bd555;
    --color-purple: #9030a0;
    --color-background-1200: 251, 251, 251;
    --color-background-1100: 240, 243, 246;
    --color-background-1000: 221, 230, 238;
    --color-background-900: 201, 215, 227;
    --color-background-800: 173, 192, 210;
    --color-background-700: 139, 160, 178;
    --color-background-600: 116, 136, 153;
    --color-background-500: 100, 115, 128;
    --color-background-400: #516170;
    --color-background-300: #1e2a38;
    --color-background-200: #151f2e;
    --color-background-100: #0b1622;
    --color-background-50: #081018;
    --color-gray-1200: 251, 251, 251;
    --color-gray-1100: 240, 243, 246;
    --color-gray-1000: 221, 230, 238;
    --color-gray-900: 201, 215, 227;
    --color-gray-800: #adc0d2;
    --color-gray-700: #8ba0b2;
    --color-gray-600: 116, 136, 153;
    --color-gray-500: 100, 115, 128;
    --color-gray-400: 81, 97, 112;
    --color-gray-300: 30, 42, 56;
    --color-gray-200: 21, 31, 46;
    --color-gray-100: 11, 22, 34;
    --color-blue-100: 247, 250, 252;
    --color-blue-200: 236, 246, 254;
    --color-blue-300: 201, 232, 255;
    --color-blue-400: 143, 215, 255;
    --color-blue-500: 111, 200, 255;
    --color-blue-600: #3db4f2;
    --color-blue-700: #088fd6;
    --color-blue-800: #0c65a6;
    --color-blue-900: #0b4671;
    --color-blue-1000: #103d55;
    --color-green-100: #e5e9e3;
    --color-green-200: #d2e6c9;
    --color-green-300: #a0e17e;
    --color-green-400: #77cc4c;
    --color-green-500: #53af2d;
    --color-green-600: #387e1a;
    --color-green-700: #2e5a1b;
    --color-green-800: #29421f;
    --color-red-100: 255, 244, 246;
    --color-red-200: 254, 212, 220;
    --color-red-300: 255, 140, 160;
    --color-red-400: 236, 41, 75;
    --color-red-500: #d50025;
    --color-red-600: #a5011d;
    --color-red-700: #750014;
}

body {
    background-color: var(--color-background-100);
    font-family: Helvetica, sans-serif;
    font-size: 18px;
    color: var(--color-text);
}

input, select, .toggle {
    background-color: var(--color-background-300);
    color: inherit;
    font-size: inherit;
    padding: 20px;
    margin: 10px;
    border-radius: 5px;
    border: none;
}

.side-input {
    width: 80px;
    padding: 10px;
    margin: 0;
}

.side-output {
    width: 100px;
}

#matches-flex {
    margin: 10px;
}

/*.button {*/
/*    background-color: var(--color-background-300);*/
/*    color: inherit;*/
/*    font-size: inherit;*/
/*    padding: 20px;*/
/*    border-radius: 5px;*/
/*    border: none;*/
/*    margin: 10px;*/
/*    display: block;*/
/*    width: fit-content;*/
/*    cursor: pointer;*/
/*    opacity: 99%;  !*makes it clickable*!*/
/*}*/

/*.button:hover {*/
/*    color: var(--color-gray-800);*/
/*    background-color: var(--color-background-400);*/
/*}*/

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

a:hover {
    color: var(--color-gray-800);
}

.title {
    margin: 10px;
    font-size: 30px;
    font-weight: bold;
}

.general-control > * {
    align-content: center;
}

.flex {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.card {
    background-color: var(--color-background-200);
    padding: 10px;
    border-radius: 10px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 10px;
    height: fit-content;
}

.card.grid {
    grid-template-columns: repeat(2, auto);
}

.list {
    display: grid;
    grid-template-columns: repeat(1, 100%);
    gap: 10px;
    height: fit-content;
}

.sortable.item {
    background-color: var(--color-background-200);
    padding: 10px;
    border-radius: 10px;
    cursor: grab;

    display: grid;
    grid-template-columns: 1fr 1fr 4fr 4fr;
    gap: 10px;
    height: fit-content;
}

.sortable.item > * {
    align-content: center;
}

.name {
    font-size: 30px;
}
.name.normal-size {
    font-size: 18px;
}

label {
    align-content: center;
}

img {
    display: block;
    float: left;
    height: 600px
}

.image.cropped {
    width: 40px;
    height: 40px;
    overflow: hidden;
}

.div-href {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

*:has(> .div-href) {
    position: relative;
}

.toggle {
    width: 70px;
    text-align: center;
    cursor: pointer;
}

.toggle.green {
    color: var(--color-black);
    background-color: var(--color-green-500);
}

.toggle.red {
    color: var(--color-black);
    background-color: var(--color-red-500);
}

.blur {
    filter: blur(15px);
}

.blur.cropped {
    filter: blur(3px);
}

.hidden {
    display: none;
}

.flex-space-between {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.tag {
    background-color: var(--color-blue-700);
    color: var(--color-white);
    border-radius: 5px;
    padding: 5px;
    opacity: 99%; /*makes it clickable*/
}

*:has(> .tag) {
    padding: 5px;
}

.rank-control {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.rank {
    align-content: center;
}

.decrease-rank {
    color: var(--color-black);
    background-color: var(--color-red-500);
}

.increase-rank {
    color: var(--color-black);
    background-color: var(--color-green-500);
}

.mass-select {
    height: 40px;
    width: 100%;
    margin: unset;
    opacity: 99%;  /*makes it clickable*/
}

.transparent-radio {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    margin: 0;
}

*:has(> .transparent-radio) {
    position: relative;
}

*:has(> .transparent-radio:checked) {
    outline: 2px solid var(--color-blue-700);
}

.radio.access-level {
    width: 100%;
    height: 100%;
    padding: 5px;
    border-radius: 3px;
}

.radio.access-level.you:has(> .transparent-radio:checked) {
    outline: none;
    background: var(--color-red);
    color: var(--color-black);
}

.radio.access-level.trusted:has(> .transparent-radio:checked) {
    outline: none;
    background: var(--color-yellow);
    color: var(--color-black);
}

.radio.access-level.all:has(> .transparent-radio:checked) {
    outline: none;
    background: var(--color-green);
    color: var(--color-black);
}