html {
    --hide-cat-first: none;
    --hide-dog-first: block;

    --height-bubble-pack: 0px;
}

.hide-cat-first {
    display: var(--hide-cat-first);
}
.hide-dog-first {
    display: var(--hide-dog-first);
}

#section-cat .text-likes .explanation-note {
    padding-left: 0em;
    padding-right: 0em;
}

/***** GRID LAYOUT *****/

#section-cat {
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto;
    grid-row-gap: 1em;
    grid-template-areas:
    ". intro intro intro ."
    "text-1 text-1 chart-1 chart-1 chart-1"
    "expl-animation-1 expl-animation-1 expl-text-1 expl-text-1 expl-text-1"
    "text-2 text-2 chart-2 chart-2 chart-2 "
    "chart-3 chart-3 chart-3 text-3 text-3"
    "text-4 text-4 chart-4 chart-4 chart-4"
    "expl-animation-2 expl-animation-2 expl-text-2 expl-text-2 expl-text-2"
    ". text-5 text-5 text-5 .";
}

#section-cat .text-intro {
    grid-area: intro;
}

#section-cat .text-likes {
    grid-area: text-1;
}

#section-cat .chart-likes {
    grid-area: chart-1;
}

#section-cat #text-explanation-cat-box {
    grid-area: expl-text-1;
}

#section-cat #animation-explanation-cat-box {
    grid-area: expl-animation-1;
}

#section-cat .text-sound {
    grid-area: text-2;
}

#section-cat .chart-sound {
    grid-area: chart-2;
}

#section-cat .text-mouth {
    grid-area: text-3;
}

#section-cat .chart-mouth {
    grid-area: chart-3;
}

#section-cat .text-moves {
    grid-area: text-4;
}

#section-cat .chart-moves {
    grid-area: chart-4;
}

#section-cat #text-explanation-cat-knead {
    grid-area: expl-text-2;
}

#section-cat #animation-explanation-cat-knead {
    grid-area: expl-animation-2;
}

#section-cat #text-bubble-pack {
    grid-area: text-5;
}

#section-cat-comparison {
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto;
    grid-row-gap: 1em;
    grid-template-areas:
    ". visual-text-1 visual-text-1 visual-text-1 ."
    ". text-6 text-6 text-6 ."
    "chart-6 chart-6 chart-6 chart-6 chart-6"
    ". visual-text-2 visual-text-2 visual-text-2 .";
}

#section-cat-comparison #text-bubble-visual-explanation {
    grid-area: visual-text-1;
}

#section-cat-comparison .text-my {
    grid-area: text-6;
}

#section-cat-comparison .chart-my {
    grid-area: chart-6;
}

#section-cat-comparison #text-my-visual-explanation {
    grid-area: visual-text-2;
}

/***** CAT COLORS *****/

#section-cat ::selection {
    background: var(--color-cats);
}

#section-header .sketchy-back {
    --lineColor: rgba(95, 210, 178, 0.7);
}

#section-cat .sketchy-underline,
#section-cat-comparison .sketchy-underline {
    --lineColor: rgba(95, 210, 178, 0.7);
}
#section-cat .no-sketchy-underline.no-paint,
#section-cat-comparison .no-sketchy-underline.no-paint {
    border-bottom: 0.15em solid var(--color-cats);
}

#section-cat .sketchy-background {
    --lineColor: rgba(95,210,178,0.7);
}
#section-cat .no-sketchy-background.no-paint {
    border-bottom-color: var(--color-cats);
}

#section-cat .hover-explanation.rough-box {
    --rough-stroke: var(--color-cats);
}
#section-cat .hover-explanation.no-rough-box.no-paint  {
    border: 2px solid var(--color-cats);
}

#section-cat .bubble-pack-explanation .button-wrapper.rough-box {
    --rough-fill: var(--color-cats);
    --rough-stroke: #43b99a;
}
#section-cat .bubble-pack-explanation .no-rough-box.no-paint  {
    background: var(--color-cats);
}

/***** HEADER *****/

#section-header #title-container {
    background-image: url("../assets/images/title-background-cat-small.png");
}
@media screen and (min-width: 900px) {
    #section-header #title-container {
        background-image: url("../assets/images/title-background-cat.png");
    }
}

/***** EXPLANATION BOXES *****/

#text-explanation-cat-box.rough-box {
    --rough-fill: var(--color-dark-pink);
    --rough-stroke: #d00043;
}
#text-explanation-cat-box.no-rough-box.no-paint {
    background-color: var(--color-dark-pink);
}

#text-explanation-cat-knead.rough-box {
    --rough-fill: #5FD2B2;
    --rough-stroke: #43b99a;
}
#text-explanation-cat-knead.no-rough-box.no-paint {
    background-color: #5FD2B2;
}

/***** Default chart sizes *****/

#chart-circle-pack-cat-likes > div {
    padding-top: calc(1266/1440 * 100%);
}
#chart-circle-pack-cat-sound > div {
    padding-top: calc(1156/1440 * 100%);
}
#chart-circle-pack-cat-mouth > div {
    padding-top: calc(1488/1440 * 100%);
}
#chart-circle-pack-cat-moves > div {
    padding-top: calc(1310/1440 * 100%);
}

#svg-my {
    padding-top: 822px;
}

#chart-bubble-pack {
    height: var(--height-bubble-pack);
}

#chart-vs > div {
    padding-top: 880px;
}

@media screen and (max-width: 900px) {
    #chart-circle-pack-cat-likes > div {
        padding-top: calc(1300/830 * 100%);
    }
    #chart-circle-pack-cat-sound > div {
        padding-top: calc(1400/830 * 100%);
    }
    #chart-circle-pack-cat-mouth > div {
        padding-top: calc(2050/830 * 100%);
    }
    #chart-circle-pack-cat-moves > div {
        padding-top: calc(1730/830 * 100%);
    }

    #svg-my {
        padding-top: calc(2 * 100%);
    }

    #chart-vs > div {
        padding-top: calc(2 * 100%);
    }
}

/***** CIRCLE PACK VISUALS *****/

.chart-circle-pack {
    color: var(--color-cats);
}

/***** Cucumber note *****/
.foreign-text-group {
    pointer-events: all;
    color: #212121;
}

.foreign-text-group a.link-new-window {
    border-bottom: none;
    text-decoration: none;
}

.note-title {
    font-family: var(--title-font);
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 1.1em;
    margin-bottom: 0em;
    margin-top: 0em;
    line-height: 0.8;
}

.note-body {
    font-family: var(--body-font);
    font-size: 12px;
    fill: rgb(80, 80, 80);
    margin-bottom: 0.5em;
    margin-top: 0.4em;
    pointer-events: none;
}

/***** Search box above bubble pack visuals *****/

#section-bubble-pack .search-box input:focus { 
    box-shadow: 0 0 7px var(--color-cats);
}
#section-bubble-pack .search-box.rough-box {
    --rough-stroke: var(--color-cats);
}
#section-bubble-pack .search-box.no-rough-box.no-paint {
    border: 2px solid var(--color-cats);
}
#section-bubble-pack .search-box input {
    background: rgba(142, 223, 200, 0.3);
}
#section-bubble-pack .awesomplete mark {
    background: var(--color-cats);
}

/***** MY vs A Comparison Visual *****/

#section-cat-comparison .chart-comparison .title {
    color: var(--color-cats);
}

/***** Footer *****/

.switch-animal.rough-box {
    --rough-fill: #f3ef5f;
    --rough-stroke: var(--color-dogs);
}
.switch-animal.no-rough-box.no-paint  {
    background: var(--color-dogs);
}

/***** Small screen adjustments *****/

@media screen and (max-width: 900px) {
    #section-cat, #section-cat-comparison {
        display: block;
    }

    .foreign-text-group {
        display: none;
    }

    /* Not sure why this is needed, why the space seems to be there... */
    section #text-my-visual-explanation {
        margin-top: -2em;
    }
}