:root {
    color-scheme: light dark;

    --background-color-light: #eee;
    --background-color-dark: #222;
    --foreground-color-light: #333;
    --foreground-color-dark: #ccc;
    --color-online-light: rgb(0,128,0);
    --color-online-dark: rgb(0,192,0);
    --color-offline-light: rgb(192,0,0);
    --color-offline-dark: rgb(255,102,102);

    --color-background: light-dark(var(--background-color-light), var(--background-color-dark));
    --color-text: light-dark(var(--foreground-color-light), var(--foreground-color-dark));
    --color-frame: light-dark(var(--foreground-color-light), var(--foreground-color-dark));
    --color-online: light-dark(var(--color-online-light), var(--color-online-dark));
    --color-offline: light-dark(var(--color-offline-light), var(--color-offline-dark));
}

body {
    font-family: system-ui, sans-serif;
    background-color: var(--color-background);
    color: var(--color-text);
}

header {
    margin: 0 15px 15px;
}

main {
    margin: 0 15px 0;
}

h1 {
    font-size: 2rem;
    padding: 0;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: auto;
}

.status-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
}

.website {
    border: 1px solid var(--color-frame);
    padding: 8px;
    width: 360px;
    display: flex;
    align-items: center;
    column-gap: 8px;
}

.status,
.status svg {
    height: 24px;
    width: 24px;
}

.online path {
    fill: var(--color-online);
}

.offline path {
    fill: var(--color-offline);
}

.legend {
    display: flex;
    align-items: center;
    gap: 8px;
}