@font-face {
    font-family: Inter;
    src: url("/public/fonts/inter-vf-100-900.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: Fredoka;
    src: url("/public/fonts/fredoka-vf-300-700.woff2") format("woff2");
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
}

html {
    background: #f4f7fb;
}

body {
    margin: 0;
    color: #24324a;
    font-family: Inter, sans-serif;
}

h1,
h2 {
    font-family: Fredoka, Inter, sans-serif;
}

.offline-tool-status {
    box-sizing: border-box;
    width: min(100% - 2rem, 1180px);
    margin: 1rem auto;
    padding: 0.8rem 1rem;
    border: 1px solid #d6e0ed;
    border-radius: 0.9rem;
    background: #fff;
    color: #24324a;
    font-size: 0.9rem;
}

.offline-tool-status p {
    margin: 0.2rem 0;
}

.offline-tool-status [data-offline-status][data-state="ready"] {
    color: #176b45;
    font-weight: 700;
}

.offline-tool-status [data-offline-status][data-state="error"] {
    color: #9b342d;
}

.offline-tool-status button {
    margin: 0.5rem 0;
    padding: 0.55rem 0.8rem;
    border: 0;
    border-radius: 0.55rem;
    background: #234b80;
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.offline-tool-note {
    color: #52627a;
    font-size: 0.82rem;
}

.offline-tool-note a,
.offline-tool-link a {
    color: #234b80;
    text-underline-offset: 0.15em;
}

.offline-tool-link {
    margin: 0.25rem auto;
    text-align: center;
    font-size: 0.82rem;
}

html[data-theme="dark"] {
    background: #101d23;
}

html[data-theme="dark"] body {
    color: #ecf2e9;
}

html[data-theme="dark"] .offline-tool-status {
    border-color: #3d5856;
    background: #1c373a;
    color: #ecf2e9;
}

html[data-theme="dark"] .offline-tool-note {
    color: #bacdc7;
}

html[data-theme="dark"] .offline-tool-status [data-offline-status][data-state="ready"] {
    color: #a2d6b9;
}

html[data-theme="dark"] .offline-tool-status [data-offline-status][data-state="error"] {
    color: #ffb5ab;
}

html[data-theme="dark"] .offline-tool-note a,
html[data-theme="dark"] .offline-tool-link a {
    color: #a2d6b9;
}

@media (max-width: 420px) {
    .offline-tool-status {
        width: calc(100% - 1rem);
        margin: 0.5rem auto;
        padding: 0.7rem;
    }
}