:root {
    --color: #f5f2ff;
    --color-light: #2c3e50;

    --link: #7a5ac4;

    --bg-000: #0d0d0e;
    --bg-100: #121214;
    --bg-200: #14131a;
    --bg-300: #201f28;
    --bg-400: #302b41;
    --bg-500: #3b3748;

    --bg-light-000: #e7e7f5;
    --bg-light-100: #d1d1e0;
    --bg-light-200: #d2d2e3;
    --bg-light-300: #d1d1e0;
    --bg-light-400: #c9c9d6;
    --bg-light-500: #c1c1d3;

    --accent: #a78be7;
    --accent-200: #8b7cc3;

    --green-100: #23a55a;
    --green-200: #1b924d;
    --red-100: #e33b3f;
    --red-200: #d62b2f;
    --blue-100: #5865f2;
    --blue-200: #4f5be0;
}

body {
    background: var(--bg-light-200);
    color: var(--color-light);
    font-family: "GG Sans", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

    margin: 0;
    padding: 0;

    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

input {
    font-family: inherit;
}

.container {
    text-align: center;
    background-color: var(--bg-light-000);
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 90%;

    position: relative;
    overflow: scroll;
}

.container.flex {
    display: flex;
    flex-direction: column;
}

h1 {
    color: #2c3e50;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    user-select: none;
    -webkit-user-select: none;
}

h1:first-child {
    margin-top: 0;
}

h1 > p {
    font-size: 0.85rem;
    font-weight: 400;
    margin: 0;
    opacity: 0.8;
}

a {
    color: var(--link);
    text-decoration: none;
    font-size: 500;
}

a:hover {
    text-decoration: underline;
}

.instruction {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    color: #7f8c8d;
}

.status {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    height: 30px;
}

.button {
    background-color: var(--accent);
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border-radius: 0.6rem;
    cursor: pointer;
    margin-top: 1rem;
    transition: background-color 0.3s;
    font-family: inherit;
    font-weight: 600;
}

.button:hover {
    background-color: var(--accent-200);
}

.reset {
    background-color: var(--red-100);
    color: var(--color);
    border: none;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border-radius: 0.6rem;
    cursor: pointer;
    margin-top: 1rem;
    transition: background-color 0.3s;
    font-family: inherit;
    font-weight: 600;
}

.reset:hover {
    background-color: var(--red-200);
}

.cat {
    font-size: 4rem;
}

@media (max-width: 600px) {
    .instruction {
        font-size: 1rem;
    }
}

.form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    /* max-width: 300px; */
    margin: 0 auto;
}

.form-input {
    padding: 5px 10px;
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box;
    font-size: 1em;
    height: 32px;
    height: var(--form-height);
    background: var(--bg-light-000);
    outline: none;
    border: 2px solid var(--color-light);
    caret-color: var(--blue-200);
    color: var(--color-light);
    transition: border .15s ease-out;
}

.form-input:focus {
    border: 2px solid var(--accent-200);
}

.form {
    position: relative;
}

.form label {
    transition: all .15s ease-out;
    color: var(--app-900);
    background: var(--bg-light-000);
    pointer-events: none;
    display: block;
    padding: 0 .25rem;
    position: absolute;
    left: 6px;
    top: calc(var(--form-height) / 2 - 0.7rem);
    border-radius: 5px;
    width: fit-content;
}

.form-input:focus + label {
    font-weight: 600;
    color: var(--accent-200);
    width: auto;
}

.form-input:focus + label,
.form-input.filled + label,
.form.always-active label {
    top: -10px;
    left: 5px;
    font-size: .75em;
}

.result {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    padding-top: 2rem;
}

.hide.result {
    display: none;
}

.tooltip {
    position: fixed;
    bottom: 0;
    right: 20px;
    transform: translateY(calc(100% + 20px));
    font-size: 1rem;
    font-weight: 600;
    padding: 0.5rem 0.5rem;
    min-width: 250px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 5px;
    visibility: hidden;
    background: var(--bg-light-000);
    border: 1px solid var(--bg-light-500);
    border-radius: 10px;
    z-index: 1000;
    box-shadow: 0 2px 8px #00000039;
    transition: transform cubic-bezier(0.68, 0.1, 0.27, 1) 0.3s;
}

.tooltip.visible {
    transform: translateY(calc(-20px + env(safe-area-inset-bottom)));
}

.tooltip div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.tooltip div svg {
    width: 100%;
    height: 100%;
}

.tools {
    margin: 0 auto;
    padding: 8px;
    border-radius: 20px;
    max-width: 324px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* App Tiles */

.tile {
    width: 96px;
    height: 96px;
    max-height: 96px;
    background-color: transparent;
    color: var(--color-light);
    text-decoration: none;
    overflow: visible;
}

.tile:hover {
    cursor: pointer;
    background-color: #e1dcf3;
    border-radius: 15px;
    z-index: 100;
    min-height: 96px;
    height: auto;
    z-index: 100;

    text-decoration: none !important;
}

.tile-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 6px;
    box-sizing: border-box;
    width: 100%;
    min-height: 84px;
    line-height: 1.2;
}

.tile:hover > .tile-inner {
    background-color: #e1dcf3;
    border-radius: 15px;
}

.tile-icon {
    background-position: center;
    background-size: 105%;
    background-repeat: no-repeat;
    border-radius: 15px;
    width: 54px;
    height: 54px;
    border: 1px solid #ffffff12;
    box-sizing: border-box;
}

.tile:hover .tile-icon {
}

.tile-inner > span {
    text-wrap: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 84px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    user-select: none;
}

.tile:hover > .tile-inner > span {
    text-wrap: wrap;
    overflow: visible;
    max-width: 100px;
}

/* Icons */

.glass {
    border-radius: 0;
    border: none;
    background-size: cover;

    position: relative;
}

.tile-inner {
    position: relative;
    z-index: 1;
}

.glass::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(5px) saturate(1.5) brightness(0.2);
    opacity: 0.5;

    border-radius: 0;
    z-index: -1;
}

.light .glass::before {
    filter: blur(5px) saturate(1.5) brightness(0.8);
}

.home {
    background-image: url('https://eris.cafe/apps/assets/images/glass/dark/home.png');
}

.light .home {
    background-image: url('https://eris.cafe/apps/assets/images/glass/light/home.png');
}

.weather {
    background-image: url('https://eris.cafe/apps/assets/images/glass/dark/weather.png');
}

.light .weather {
    background-image: url('https://eris.cafe/apps/assets/images/glass/light/weather.png');
}

.search {
    background-image: url('https://eris.cafe/apps/assets/images/glass/dark/search.png');
}

.light .search {
    background-image: url('https://eris.cafe/apps/assets/images/glass/light/search.png');
}

.ai {
    background-image: url('https://eris.cafe/apps/assets/images/glass/dark/supernova.png');
}

.light .ai {
    background-image: url('https://eris.cafe/apps/assets/images/glass/light/supernova.png');
}

.convert {
    background-image: url('https://eris.cafe/apps/assets/images/glass/dark/convert.png');
}

.light .convert {
    background-image: url('https://eris.cafe/apps/assets/images/glass/light/convert.png');
}

.base64 {
    background-image: url('https://eris.cafe/apps/assets/images/glass/dark/base64.png');
}

.light .base64 {
    background-image: url('https://eris.cafe/apps/assets/images/glass/light/base64.png');
}

.blogs {
    background-image: url('https://eris.cafe/apps/assets/images/glass/dark/blogs.png');
}

.light .blogs {
    background-image: url('https://eris.cafe/apps/assets/images/glass/light/blogs.png');
}

.jpg {
    background-image: url('https://eris.cafe/apps/assets/images/glass/dark/jpg.png');
}

.light .jpg {
    background-image: url('https://eris.cafe/apps/assets/images/glass/light/jpg.png');
}

.bpm {
    background-image: url('https://eris.cafe/apps/assets/images/glass/dark/bpm.png');
}

.light .bpm {
    background-image: url('https://eris.cafe/apps/assets/images/glass/light/bpm.png');
}

.scribe {
    background-image: url('https://eris.cafe/apps/assets/images/glass/dark/scribe.png');
}

.light .scribe {
    background-image: url('https://eris.cafe/apps/assets/images/glass/light/scribe.png');
}

.password {
    background-image: url('https://eris.cafe/apps/assets/images/glass/dark/password.png');
}

.light .password {
    background-image: url('https://eris.cafe/apps/assets/images/glass/light/password.png');
}

.qr {
    background-image: url('https://eris.cafe/apps/assets/images/glass/dark/qr.png');
}

.light .qr {
    background-image: url('https://eris.cafe/apps/assets/images/glass/light/qr.png');
}

.sqrt {
    background-image: url('https://eris.cafe/apps/assets/images/glass/dark/sqrt.png');
}

.light .sqrt {
    background-image: url('https://eris.cafe/apps/assets/images/glass/light/sqrt.png');
}

.wom {
    background-image: url('https://eris.cafe/apps/assets/images/glass/dark/wom.png');
}

.light .wom {
    background-image: url('https://eris.cafe/apps/https://eris.cafe/apps/assets/images/glass/light/wom.png');
}

/* Squircles */

@supports (corner-shape: superellipse(2)) {
    .button, .reset {
        border-radius: 50px;
        corner-shape: superellipse(2);
    }

    .container {
        border-radius: 50px;
        corner-shape: superellipse(2);
    }

    .tooltip {
        border-radius: 50px;
        corner-shape: superellipse(2);
    }
}