:root {
    --text: #eae9fc;
    --text-white: #080b16;
    --background: #080b16;
    --primary: #251db4;
    --secondary: #161070;
    --accent: #49a7ee;

    --text-50: #eae9fc;
    --text-100: #d4d2f9;
    --text-200: #a9a5f3;
    --text-300: #7e78ed;
    --text-400: #534be7;
    --text-500: #281fe0;
    --text-600: #2018b4;
    --text-700: #181287;
    --text-800: #100c5a;
    --text-900: #08062d;
    --text-950: #040316;

    --background-50: #eceff8;
    --background-100: #dadff1;
    --background-200: #b4bee4;
    --background-300: #8f9ed6;
    --background-400: #697ec9;
    --background-500: #445ebb;
    --background-600: #364b96;
    --background-700: #293870;
    --background-800: #1b254b;
    --background-900: #0e1325;
    --background-950: #070913;

    --primary-50: #eae9fb;
    --primary-100: #d5d3f8;
    --primary-200: #aba7f1;
    --primary-300: #817bea;
    --primary-400: #5750e2;
    --primary-500: #2d24db;
    --primary-600: #241daf;
    --primary-700: #1b1584;
    --primary-800: #120e58;
    --primary-900: #09072c;
    --primary-950: #040416;

    --secondary-50: #eae9fc;
    --secondary-100: #d5d2f9;
    --secondary-200: #aba6f2;
    --secondary-300: #8179ec;
    --secondary-400: #574ce6;
    --secondary-500: #2d20df;
    --secondary-600: #2419b3;
    --secondary-700: #1b1386;
    --secondary-800: #120d59;
    --secondary-900: #09062d;
    --secondary-950: #040316;

    --accent-50: #e8f4fd;
    --accent-100: #d0e8fb;
    --accent-200: #a2d2f6;
    --accent-300: #73bbf2;
    --accent-400: #44a4ee;
    --accent-500: #168ee9;
    --accent-600: #1171bb;
    --accent-700: #0d558c;
    --accent-800: #09395d;
    --accent-900: #041c2f;
    --accent-950: #020e17;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 80vh;
    font-family: SUSE, sans-serif;
    color: var(--text);
    background: var(--background);
}

h1 {
    text-align: center;
}

#site-list {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#site-list #site-buttons {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

a.button {
    color: var(--text);
    background: var(--primary);
    padding: 16px 24px;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 200ms ease-out, transform 200ms ease-out, box-shadow 200ms;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: center;

    &:hover {
        background: var(--primary-500);
        transform: translateY(-2px) scale(102%);
        box-shadow: 0 8px 24px 4px #00000099;
    }

    & img {
        max-height: 36px;
    }

    &.disabled {
        background: var(--secondary-700);
        color: var(--text-200);
        &:hover {
            transform: translateY(-1px) scale(101%);
            box-shadow: 0 4px 12px 4px #00000099;
        }
    }
}

div.icon {
    height: 36px;
    aspect-ratio: 1/1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    &.icon-sl-cloud-white {
        background-image: url("/img/sl-logos/Simon_Logo_cloud_white.svg");
    }

    &.icon-owncloud {
        background-image: url("/img/owncloud-logo.svg");
        aspect-ratio: 1.5/1;
    }

    &.icon-ocis {
        background-image: url("/img/infinite-scale-logo.svg");
        aspect-ratio: 1.5/1;
    }

    &.icon-nextcloud {
        background-image: url("/img/nextcloud-logo.svg");
        aspect-ratio: 1.5/1;
    }

    &.icon-sl-silence {
        background-image: url("/img/silence-white.svg");
    }

    &.icon-pma {
        background-image: url("/img/phpmyadmin-logo.svg");
    }

    &.icon-traefik {
        background-image: url("/img/traefik-logo.svg");
    }
}

.divider {
    height: 1px;
    background: var(--background-700);
    margin: 4px 0;
}