/* Mobile first media queries, minimum screen width 350px */
@media only screen and (min-width: 450px) and (max-width: 549px) {
    :root {
        --key-length: 14px;
    }
    .key, .key-overlay, .thirds-overlay {
        font-size: 6px;
    }
}
@media only screen and (min-width: 550px) and (max-width: 649px) {
    :root {
        --key-length: 16px;
    }
    .key, .key-overlay, .thirds-overlay {
        font-size: 8px;
    }
}
@media only screen and (min-width: 650px) and (max-width: 749px) {
    :root {
        --key-length: 20px;
    }
    .key, .key-overlay, .thirds-overlay {
        font-size: 10px;
    }
}
@media only screen and (min-width: 750px) and (max-width: 849px) {
    :root {
        --key-length: 24px;
    }
    .key, .key-overlay, .thirds-overlay {
        font-size: 12px;
    }
    span {
        top: -4px;
    }
    h1, h1 a {
        font-size: 39px;
    }
    h2 {
        font-size: 21px;
    }
}
@media only screen and (min-width: 850px) and (max-width: 949px) {
    :root {
        --key-length: 26px;
    }
    .key, .key-overlay, .thirds-overlay {
        font-size: 14px;
    }
    span {
        top: -4px;
    }
    h1, h1 a {
        font-size: 39px;
    }
    h2 {
        font-size: 21px;
    }
}
@media only screen and (min-width: 950px) and (max-width: 1049px) {
    :root {
        --key-length: 28px;
    }
    .key, .key-overlay, .thirds-overlay{
        font-size: 14px;
    }
    span {
        top: -4px;
    }
    h1, h1 a {
        font-size: 39px;
    }
    h2 {
        font-size: 21px;
    }
}
@media only screen and (min-width: 1050px) and (max-width: 1149px) {
    :root {
        --key-length: 30px;
    }
    .key, .key-overlay, .thirds-overlay {
        font-size: 16px;
    }
    span {
        top: -4px;
    }
    h1, h1 a {
        font-size: 39px;
    }
    h2 {
        font-size: 21px;
    }
}
@media only screen and (min-width: 1150px) and (max-width: 1249px) {
    :root {
        --key-length: 32px;
    }
    .key, .key-overlay, .thirds-overlay {
        font-size: 16px;
    }
    span {
        top: -4px;
    }
    h1, h1 a {
        font-size: 39px;
    }
    h2 {
        font-size: 21px;
    }
}
@media only screen and (min-width: 1250px) {
    :root {
        --key-length: 34px;
        --thirds-circle-diameter: 1210px;
        --major-circle-diameter: 695px;
        --minor-circle-diameter: 515px;
        --diminished-circle-diameter: 335px;
        --thirds-circle-small-diameter: 235px;
        --thirds-circle-overlay-diameter: 1139px;
        --major-circle-overlay-diameter: 622px;
        --minor-circle-overlay-diameter: 442px;
        --diminished-circle-overlay-diameter: 262px;
        --thirds-circle-overlay-small-diameter: 162px;
        /* --key-length: 30px;
        --thirds-circle-diameter: 906px;
        --major-circle-diameter: 522px;
        --minor-circle-diameter: 386px;
        --diminished-circle-diameter: 252px;
        --thirds-circle-small-diameter: 176px;
        --thirds-circle-overlay-diameter: 854px;
        --major-circle-overlay-diameter: 466px;
        --minor-circle-overlay-diameter: 332px;
        --diminished-circle-overlay-diameter: 196px;
        --thirds-circle-overlay-small-diameter: 122px; */
    }
    .key, .key-overlay, .thirds-overlay {
        font-size: 16px;
    }
    span {
        top: -4px;
    }
    h1, h1 a {
        font-size: 50px;
    }
    h2 {
        font-size: 25px;
    }
}