*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    color-scheme: dark;
    hanging-punctuation: first last;
}

body {
    min-height: 90svh;
    line-height: 1.6;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 100%;
}

img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}


#main {
    margin: auto;
    width: 100%;
    max-width: 1024px;
}

.flex_container {
    display: flex;
    gap: .5rem;
}

.flex_cell {
    flex: 1;
}

.grid_3,
.grid_2,
.grid_chain {
    display: grid;
    gap: .5rem;
}

.grid_2 {
    grid-template-columns: 1fr 5fr;
}

.grid_3 {
    grid-template-columns: 1fr 3fr 3fr;
}

.grid_chain {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.align_center {
    text-align: center;
}

.pad_b_4 {
    padding-bottom: 4px;
}

.progress {
    width: 100%;
    height: 1.6rem;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background-color: #4caf4f69;
    width: 0%;
    transition: width 1.5s ease;
}

.progress-fill-left {
    position: absolute;
    left: 0;
    top: 0;
}

.progress-fill-right {
    position: absolute;
    right: 0;
    top: 0;
}

.smaller_text {
    font-size: .8rem;
}

.border_bottom {
    border-bottom: 1px solid grey;
}

.very_bad {
    color: #d32f2f;
}

.bad {
    color: #f57c00;
}

.neutral {
    color: #8477ff;
}

.good {
    color: #388e3c;
}

.very_good {
    color: #2e7d32;
}

@media screen and (max-width: 799px) {

  .grid_3,
  .grid_2 {
    display: block;
  }

  .img_right {
    margin: auto;
  }

}