css.css

body { font: 1em/1.5 'Montserrat', Arial, sans-serif; font-weight: 600; }

/* WCAG */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #EFEFEF;
    clip: auto !important;
    clip-path: none;
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 20px;
    text-decoration: none;
    top: 5px;
    width: auto;
  }

/* Text */

h1 { font-size: 2em; }
h2 { font-size: 2em; }

h1, h2, h3, p, a { color: #252B36; text-decoration: none; }

input[type="text"]::-webkit-input-placeholder {
    color: #D1D3D7 !important;
}

/* Structure */
#logo { height: 3em; }

#change-language { overflow: hidden; }
#change-language li { float: left; text-transform: uppercase; }
#change-language li:after { padding: 1em; content: '/'; }
#change-language li:last-child:after { display: none; }
#change-language a { line-height: 3em; }

.input-style { background: #FFF; padding: 0.5em 1em 0.5em 1em; box-shadow: 0px 3px 5px 2px rgba(0,0,0,0.2); border: 0; border-radius: 100em; }
#search-bar input { padding-left: 2.5em; background: #FFF 0.75em center / auto 50% url(search.svg) no-repeat; }

#main-tip { text-align: center; }
#title-holder h2 { text-transform: uppercase; border-bottom: 4px solid var(--question-color); }
#title-holder #goal { display: inline-block; height: 2em; margin-right: 1em; }
#tip { padding: 1em; text-align: center; }
#tip p { font-size: 1.9em; }
#next-tip-button { padding: 0.5em 1em 0.5em 2.5em; font-size: 2em; text-transform: uppercase; background: #FFF 0.5em center / auto 60% url(circle.svg) no-repeat; }
#social-media-access { padding: 0.5em 1em 0.5em 2.5em; font-size: 1em; text-transform: uppercase;}

#app > footer { background: var(--question-color); }
#app > footer li, #app > footer a { font-weight: 400; color: #EFEFEF; }

#app footer #sharing { display: flex; align-items: center; }
#app footer #sharing a { display: inline-block; height: 1.6em; width: 1.6em; overflow: hidden; margin-right: 1em; text-indent: -1000em; }
#chrome-extension { background: url(img/homepage.svg) no-repeat; background-size: contain; }
#facebook-share { background: url(img/facebook.svg) no-repeat; background-size: contain; }
#twitter-share { background: url(img/twitter.svg) no-repeat; background-size: contain; }

#tip ul { display: block; margin-top: 1em; display: flex; justify-content: center; align-content: center; align-items: center; }
#tip li { font-weight: 400; margin-right: 2em; }
#tip li::before { content: "\00a0"; display: inline-block; height: 0.8em; width: 0.8em; vertical-align: -0.2em; margin: 0 0.3em; background: var(--question-color); border-radius: 100em; }
#tip li:last-child { margin-right: 0; }
#tip li:last-child::before { background: #CCC; }

#next-tip-button { outline: 0; }

#about { padding: 2em; }
#about a { display: block; margin-bottom: 1em; color: var(--question-color); }
#about ul { list-style-type: disc; margin: 2em 1em;}

@media only screen and (max-width: 799px) {
    #app > header { display: block; padding: 1em; color: #EFEFEF; background: #252B36; }
    #app > header #logo { float: left; }
    #change-language ul { float: right; }
    #change-language a { color: #EFEFEF; }

    #search-bar input { font-size: 1.4em; width: 100%; border-radius: 0; box-sizing: border-box; }

    #title-holder #goal { display: none; }
    #title-holder h2 { font-size: 1.4em; padding: 0.6em 1em; }
    #tip { padding-bottom: 3em; }
    #tip p { padding: 1em 1em 0; font-size: 1.8em; }

    #next-tip-button { margin: 0 1em 0.5em; display: block; }
    #chart-outer { height: 15em; }

    #app > footer { padding: 1em; }
    #app > footer ul { margin-left: 1em; list-style-type: disc; }
    #app > footer #sharing { margin-bottom: 0.8em; }
}

@media only screen and (min-width: 800px) {
    body, html, #app { height: 100%; }
    #app { display: flex; flex-direction: column; align-items: stretch; }
    #app > header { padding: 1.5em 2em 0; }
    #change-language { float: right; }
    #app > main { flex: 1; }
    
    #search-bar { display: flex; align-items: center; justify-content: center; height: 8vh; min-height: 2em; }
    #search-bar input { min-width: 30em; font-size: 1.5em; }
    #search-bar input:focus { background-color: #FAFAFA; outline: 0; }

    #title-holder { display: flex; align-items: center; justify-content: center; height: 8vh; min-height: 2em; margin-top: 4vh; }
    #title-holder h2 { display: inline-block; font-size: 1.8em; }

    #tip { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 16vh; min-height: 9em; max-width: 70%; margin: 0 auto; }
    #next-tip-button { user-select: none; position: absolute; bottom: 3em; right: 2em; }
    #next-tip-button:focus { background-color: #F6F6F6; }
    #social-media-access { user-select: none; position: absolute; bottom: 3em; left: 2em; }

    #main-tip #chart-outer { height: calc(64vh - 5em - 5em + 1px); }

    #app > footer ul { display: flex; justify-content: space-between; padding: 0 2em; line-height: 3; }
}

@media only screen and (min-width: 800px) and (max-width: 999px) {
    body { font-size: 0.85em; }
}

/* Chartist */
.ct-series-a .ct-bar, .ct-series-a .ct-line, .ct-series-a .ct-point, .ct-series-a .ct-slice-donut {
    stroke: var(--question-color) !important;
    
}

.ct-series-a .ct-area {
    fill: var(--question-color) !important;
}

.ct-series-b .ct-bar, .ct-series-b .ct-line, .ct-series-b .ct-point, .ct-series-b .ct-slice-donut {
    stroke: #CCC !important;
}

.ct-series-b .ct-area {
    fill: #FFF !important;
}