@font-face {
    font-family: Rubik;
    src: url(rubik.ttf);
}

body {
    margin: 0;
    align-items: center;
    background-color: #111;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100dvh;
    font-size: max(.95em, min(1.8vw, 2vh, 1.25em));
}

body, button {
    font-family: Rubik, sans-serif;
    color: #eee;
}

button {
    font-size: .9em;
}

.hosts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1em;
    padding: 1em;
    margin-block: auto;
    max-width: 45em;
    opacity: 1;
    transition: .1s;
}

.hosts.hidden {
    opacity: 0;
}

.host {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1em;
    gap: .85em;
    background-color: #222;
    transition: all .2s, translate .4s, opacity .4s;
    width: 8em;
    aspect-ratio: 1;
    border-radius: 1em;
    overflow: hidden;
    position: relative;
    opacity: 0;
    translate: 0 1em;
}

.host.visible {
    opacity: 1;
    translate: 0 0;
}

.host:hover {
    background-color: #333;
}

.host .name {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

.host .status {
    flex: 0 0 2.75em;
    width: 2.75em;
    border-radius: 50%;
    background-color: #888;
    margin-block: auto;
    outline: .125em solid transparent;
}

.host.online .status {
    background-color: #3c3;
    animation: status-animation-online 2s normal infinite linear;
}

@keyframes status-animation-online {
    0% {
        outline-color: #3c30;
        outline-offset: 0;
    }
    25% {
        outline-color: #3c39;
    }
    50% {
        outline-color: #3c30;
        outline-offset: .5em;
    }
}

.host.offline .status {
    background-color: #c22;
    animation: status-animation-offline .5s infinite linear;
}

@keyframes status-animation-offline {
    0% {
        outline-color: #c220;
        outline-offset: 0;
        scale: .9;
    }
    25% {
        outline-color: #c22c;
        scale: 1;
    }
    100% {
        outline-color: #c220;
        outline-offset: .5em;
        scale: .9;
    }
}

.host .info {
    height: 1.5em;
}

.host.online .info {
    color: #3c3;
}

.host.offline .info {
    color: #c22;
}

.host .ip {
    margin-top: -1.25em;
    font-size: .75em;
    color: #999;
}

.host button.delete {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #911;
    border: none;
    padding: .325em .375em .375em .5em;
    border-bottom-left-radius: 1em;
    opacity: 0;
    pointer-events: none;
    transition: .4s;
}

.host:hover button.delete {
    opacity: 1;
    pointer-events: all;
}

.error {
    color: #c22;
}

a {
    color: orange;
    text-decoration: none;
    opacity: .8;
    padding: 1em;
}

a:hover {
    opacity: .9;
}

a:active {
    opacity: 1;
}

body:has(.manage-database-link:not(.hidden)) .hosts {
    margin-block: auto 0;
}

.manage-database-link:not(.hidden) {
    margin-block: 0 auto;
}

.manage-database-link.hidden {
    display: none;
}