body {
    background-color: black;
    color: white;
    font-family: 'JetBrains Mono', monospace;
    display: flex;
    place-items: center;
    place-content: center;
    min-height: 100vh;
    padding: 0;
    margin: 0;
}

.content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    box-sizing: border-box;
    padding: 2em;
    gap: 1em;
    width: 100%;
    max-width: 800px;
}

monitor-rect {
    --color: gray;
    overflow: hidden;
    user-select: none;

    display: grid;
    position: relative;
    grid-template-rows: 1fr auto;
    aspect-ratio: 1/1;
    outline: 2px solid var(--color);
    color: var(--color);

    &:hover>.message {
        display: unset;
    }

    .message {
        display: none;
        position: absolute;
        box-sizing: border-box;
        padding: 5px;
    }

    >div.center-in {
        display: grid;
        place-items: center;
        padding: 5px;
    }

    .title {
        background-color: var(--color);
        color: black;
        display: grid;
        grid-template-rows: auto auto;
        place-items: center;
        white-space: nowrap;
        overflow: hidden;
    }
}

.history {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 3px;
    padding: 2px 0;
    width: 100%;
    background-color: black;

    .state-dot {
        background-color: var(--color);
        height: 100%;
        width: 3px;
    }
}

*[state="pending"] {
    --color: rgb(0, 225, 255);
}

*[state="error"] {
    --color: orange;
}

*[state="operational"] {
    --color: rgb(0, 255, 98);
}

*[state="invalid"] {
    --color: gray;
}

*[state="unresponsive"] {
    --color: red;
}

.blink {
    animation: blink 500ms steps(1) infinite;
}

.spin {
    animation: spin 1s steps(8) infinite;
}

@keyframes blink {
    0% {
        opacity: 100%;
    }

    50% {
        opacity: 0%;
    }
}

@keyframes spin {
    0% {
        transform: rotateZ(0deg);
    }

    50% {
        transform: rotateZ(180deg);
    }

    100% {
        transform: rotateZ(180deg);
    }
}

@media (max-width: 800px) {
    monitor-rect {
        aspect-ratio: 3/2;
    }
}

@media (max-width: 400px) {
    monitor-rect {
        aspect-ratio: unset;
    }
}