@import url('https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap');

:root {
    color-scheme: light dark;
    --main-accent: #89BBFE;
    --secondary-accent: #6F8AB7;
    --bg-dark: #1c2633;
    --bg-light: #fbfcfd;
    --background: light-dark(var(--bg-light), var(--bg-dark));
    --body-light: #615D6C;
    --body-dark: #f2f3f5;
    --body: light-dark(var(--body-light), var(--body-dark));
    --body-border: color-mix(in srgb, var(--body) 30%, transparent 70%);
    --color-service: #eea243;
    --color-failure: #ff3c38;
    --color-normal: #3bc14a;
    --base-card-width: 320px;
    --header-scale: 2.0;
}

#gradient-box {
    background: linear-gradient(180deg, color-mix(in srgb, var(--secondary-accent) 15%, transparent 85%) 0%, transparent 100%);
    position: absolute;
    width: 100%;
    height: 320px;
    left: 0;
    top: 0;
    z-index: -1;
}

body {
    background: var(--background);
    font-family: Onest;
    display: flex;
    justify-content: center;
}

@media (width < 1530px) {
    :root {
        --header-scale: 1.0;
    }
    #top-box {
        margin-left: 10px;
        margin-top: 20px;
    }
    #note {
        margin: 0 12px;
        margin-top: 12px;
    }
}
@media (1920px >= width >= 1460px) {
    body {
        padding-top: calc((100vw - 1460px) / 2);
    }
}
@media (width > 1920px) {
    body {
        padding-top: 230px;
    }
}

#content {
    width: 100%;
    max-width: 1460px;
}

#top-box h1 {
    color: var(--main-accent);
    font-size: calc(34px * var(--header-scale));
    margin: 0;
    line-height: 1.04;
    margin-left: 1px;
}

#top-box p {
    margin: 0;
    font-size: calc(15px * var(--header-scale));
    color: var(--body);
}

#services {
    padding: 24px 0;
    display: grid;
    grid-template-columns: repeat(calc((100vw - mod(100vw, var(--base-card-width))) / var(--base-card-width)), 1fr);
    gap: 8px;
}

#services .card {
    color: var(--body);
    --padding: 12px;
    padding: var(--padding);
    padding-bottom: 10px;
    border-radius: 16px;
    border: 1px solid var(--body-border);
    min-width: 260px;
}
#services .card hr {
    border-bottom: none;
    border-color: var(--body-border);
    margin-bottom: calc(var(--padding) / 2);
}
#services .card img {
    width: 32px;
}
#services .card h4, #services .card p, #services .card h5 {
    margin: 4px 0;
}
#services .card h4 {
    margin-bottom: 0;
}
#services .card p {
    margin-top: 0;
}
#services .card .history-indicator {
    width: 100%;
    height: 4px;
    border-radius: 2px;
}
#services .card .subservice {
    padding: 4px 0px;
}

#note {
    border-radius: 4px;
    padding: 8px 10px;
    border: solid 1px var(--color-service);
    background: color-mix(in srgb, transparent 90%, var(--color-service) 10%);
    color: var(--body);
}