/* CSS files add styling rules to your content */

p {
    width: 80ex;
}

body {
    font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
    margin: 2em;
}

h1 {
    font-style: italic;
    color: #373fff;
}

svg {
    border: dotted 0px;
    margin: auto;
    grid-column: 2;
    grid-row: 1 / 6;
}

.settings:nth-of-type(1) {
    grid-row: 1 / 3;
}

.settings:nth-of-type(2) {
    grid-row: 3 / 5;
}

.settings:nth-of-type(3) {
    grid-row: 2 / 4;
}

h3 {
    margin: 0px;
}

.strength_dots {
    stroke: #ddd;
}

.dosage_dots {
    fill: red;
}

label {
    display: inline-block;
    width: 7ex;
}

div.visualization {
    display: grid;
    width: 1000px;
    grid-gap: 20px;
    grid-template-columns: 1fr 4fr 1fr [last];
}

div.settings {
    border: solid 1px;
    border-radius: 5px;
    margin: 0px;
    padding: 1px;
}

img {
    height: 100px;
}