:root {
    /* Box borders */
    --box-border: #ccc;
    --box-good-border: #1c4a35;
    --box-needs-improvement-border: #804a00;
    --box-poor-border: #71180e;
    --box-no-data-border: #888;
    /* Pill backgrounds and colors */
    --pill-good-bg: #d9f2da;
    --pill-good-color: #1c4a35;
    --pill-needs-improvement-bg: #ffe599;
    --pill-needs-improvement-color: #804a00;
    --pill-poor-bg: #f9d6d2;
    --pill-poor-color: #71180e;
    /* Other colors */
    --range-color: #666;
}

.cwv-overall {
    padding: 16px;
    margin-bottom: 36px;
    border-left: 16px solid var(--box-border);
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.1);
}

.cwv-overall.good {
    border-color: var(--box-good-border);
}

.cwv-overall.needs_improvement,
.cwv-overall.poor {
    border-color: var(--box-poor-border);
}

.cwv-overall span.pill {
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 0.8em;
}

.cwv-overall.good span.pill {
    background-color: var(--pill-good-bg);
    color: var(--pill-good-color);
}

.cwv-overall.needs_improvement span.pill,
.cwv-overall.poor span.pill {
    background-color: var(--pill-poor-bg);
    color: var(--pill-poor-color);
}

.core-web-vitals-container,
.other-metrics-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 36px;
}

.cwv-box {
    flex: 1 1 250px;
    border-left: 12px solid var(--box-border);
    padding: 16px;
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.1);
}

.cwv-box.good {
    border-color: var(--box-good-border);
}

.cwv-box.needs_improvement {
    border-color: var(--box-needs-improvement-border);
}

.cwv-box.poor {
    border-color: var(--box-poor-border);
}

.cwv-box.no_data {
    border-color: var(--box-no-data-border);
}

.cwv-box h3 {
    margin-top: 0;
    font-size: 2.4em;
}

.cwv-box.good h3 {
    color: var(--box-good-border);
}

.cwv-box.needs_improvement h3 {
    color: var(--box-needs-improvement-border);
}

.cwv-box.poor h3 {
    color: var(--box-poor-border);
}

.range {
    color: var(--range-color);
    font-size: 0.9em;
}

span.pill {
    padding: 4px 8px;
    margin-left: 8px;
    border-radius: 20px;
    font-size: 0.8em;
}

.cwv-box.good span.pill {
    background-color: var(--pill-good-bg);
    color: var(--pill-good-color);
}

.cwv-box.needs_improvement span.pill {
    background-color: var(--pill-needs-improvement-bg);
    color: var(--pill-needs-improvement-color);
}

.cwv-box.poor span.pill {
    background-color: var(--pill-poor-bg);
    color: var(--pill-poor-color);
}

form#crux-form input[type="text"] {
    margin-right: 1em;
    padding: 15px 16px;
}