/***** General Settings *****/

* {
    padding: 0;
    margin: 0;
}

html {
    --max-width: 1200px;
    /* --title-font: 'Assistant', sans-serif; */
    /* --title-font: 'Khula', sans-serif; */
    /* --title-font: 'Lilita One', cursive; */
    /* --title-font: 'Ribeye Marrow', cursive; */
    /* --title-font: 'Cabin Sketch', cursive; */
    /* --title-font: 'Work Sans', sans-serif; */

    /* --title-font: 'Catamaran', sans-serif; */
    /* --title-font: 'Alegreya Sans', sans-serif; */
    --title-font: 'Montserrat', sans-serif;

    /* --body-font: 'Karla', sans-serif; */
    --body-font: 'Signika', sans-serif;

    --chart-font: 'Nanum Pen Script', cursive;

    --color-cats: #5FD2B2;
    --color-dogs: #DDD134;
    --color-both: #FC9298;
    --color-dark-pink: #E74D6B;
    --color-footer: #d8264a;
}

body {
    font-family: var(--body-font);
    font-size: 16px;
    font-weight: 300;
    text-rendering: optimizeLegibility;
    /* -webkit-font-smoothing: antialiased; */
    font-feature-settings: 'kern';
    font-kerning: normal;
    font-variant-ligatures: common-ligatures;
    color: #121212;
    scroll-behavior: smooth;
}

::selection {
    background: #E74D6B;
    color: #121212;
}

/***** General Typography *****/

b, .bold {
    font-weight: 700;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1 {
    font-family: var(--title-font);
    font-size: 5em;
    text-align: center;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

h3 {
    font-family: var(--title-font);
    font-weight: 900;
    font-style: normal;
    font-size: 2.2em;
    margin-top: 0.5em;
    margin-bottom: 0.7em;
    line-height: 1.3;
}

h4 {
    font-family: var(--title-font);
    font-weight: 900;
    font-size: 1.2em;
    margin-top: 0.9em;
    margin-bottom: 0.7em;
    line-height: 1.3;
}

p {
    margin-top: 1em;
    margin-bottom: 1em;
}

p, .note-body {
    line-height: 1.7;
    cursor: default;
}

p:first-of-type {
    margin-top: 0.5em;
}

/* https://stackoverflow.com/questions/1899772 */
a.hover-link::after, a.link-new-window .note-body::after, .new-tab::after {
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
    margin: 0 3px 0 5px;
}

.hide-desktop {
    display: none;
}

.hide {
    display: none;
}

.no-select { -webkit-user-select: none; }

.clickable {
    cursor: pointer;
}

.grey {
    color: rgb(150,150,150);
    -webkit-font-smoothing: antialiased;
}

/***** CSS Paint API *****/

.rough-box {
    background-image: paint(roughBox);
    background-repeat: no-repeat;
    background-position: center; 
} 

.sketchy-background {
    background-image: paint(sketchyBackground);
    --lineWidth: 3;
    padding: 3px 2px;
    /* display: inline-block; */
}
.no-sketchy-background.no-paint {
    border-bottom: 0.15em solid black;
    display: inline;
    padding: 0 0 1px 0;
}

.sketchy-underline {
    --lineNumber: 6;
    --lineSpread: 12;
    --lineWidth: 1.2;
    background-image: paint(sketchyUnderline);
    padding-bottom: 5px;
}
.no-sketchy-underline.no-paint {
    border-bottom: 0.15em solid black;
}

.sketchy-back {
    /* padding: 0.7em 0.7em; */
    --lineWidth: 15;
    --lineNumber: 20;
    --lineSpread: 120;
    --lineColor: rgb(252, 146, 152, 0.7);
    background-repeat: no-repeat;
    background-position: center; 
    background-size: contain;

    background-image: paint(sketchyBack);
    display: inline-block;
}

/* .highlighter-marker {
    border-image-source: url('../assets/houdini-worklets/highlighter.png');
    --highlighter-color: #E74D6B;
    --highlighter-path: path("M46.83,230.9c24.41,-51.06 455.28,-6.72 465.09,-16.82");
    --highlighter-size: 80;
    --highlighter-opacity: 1;
    --highlighter-smooth: 4;
    --highlighter-progress: 1;
    background: paint(highlighter);
    display: inline-block;
} */

/* #background-animation {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -2;
    width: 100vw;
    height: 100vh;
} */

/***** General Layout *****/

a {
    text-decoration: none;
    color: inherit;
    border-bottom: 0.1em solid black;
}

section a.hover-link {
    border-bottom: none;
}

section a.hover-link::after {
    opacity: 0.7;
}

section .text {
    align-self: center;
    padding-left: 1em;
    padding-right: 1em;
}

section .chart-container {
    justify-self: stretch;
    align-self: center;
}

section .text-intro {
    margin-bottom: 3em;
}

/***** Headers *****/

#title-container {
    background-repeat: no-repeat;
    background-position: center bottom;
    margin-bottom: 40px;
}

.header {
    text-align: center;
    margin-bottom: 3em;
}

.header .top-title {
    margin-top: 7em;
    margin-bottom: 7em;
}

.header .top-title h1 {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.header .sketchy-back {
    padding: 1em 1em;
}
.header .sketchy-back .page-title {
    padding: 0.2em 1.4em;
}

/***** Animations *****/

.section-animation {
    display: flex;
    justify-content: center;
    align-items: center;
}

.section-animation img {
    width: 100%;
    max-width: 700px;
    z-index: -1;
}

/***** Browser note *****/

p#browser-note {
    color: white;
    background-color: var(--color-dark-pink);
    padding: 0.5em 1em;
    text-align: center;
    max-width: 500px;
    font-size: 1em;
    font-weight: 700;
    margin: 2em auto;
    display: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/***** Section | General *****/

#section-intro, #section-cat, #section-cat-comparison, 
#section-dog, #section-dog-comparison, 
#section-both, #section-footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

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

@media screen and (max-width: 900px) {
    .hide-mobile {
        display: none;
    }
    .hide-desktop {
        display: inline;
    }

    /* .sketchy-back {
        padding: 0.7em 0.7em;
    } */

    .header .top-title {
        margin-top: 1.5em;
        margin-bottom: 3.5em;
    }
    .header .top-title.no-paint {
        margin-top: 0em;
        margin-bottom: 3.5em;
    }
    
    .header .top-title.sketchy-back {
        padding: 1em 0em;
    }
    .header .sketchy-back .page-title {
        padding: 0.2em 0em;
    }

    h1 {
        font-size: 3.2em;
    }
}