@import url("../circular.css");
/* SHARED ACROSS ALL PAGES */
 :root {
    --background: white;
    --main: black;
    --tint: red;
    --font-body: 'Circular Std Book', helvetica, arial, sans-serif;
    --font-header: 'Circular Std', helvetica, arial, sans-serif;
}

* {
    box-sizing: border-box;
}

.light {
    display: block;
}
 
 .dark {
    display: none !important;
}

@media (prefers-color-scheme: dark) {
    .light {
        display: none !important;
    }

    .dark {
        display: block !important;
    }
}

body {
    margin: 0px;
    padding: 20px;
    background: var(--background);
}

header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0px;
}

header img {
    margin-bottom: 20px;
}

header h1, header h2 {
    text-align: center;
}

header div {
    display: flex;
    width: 100%;
    justify-content: center;
    flex-direction: column;
    margin: 20px 0px;
}

header .cta {
    font-family: var(--font-header);
    font-size: 17px;
    color: var(--background);
    background: var(--tint);
    border-radius: 100px;
    padding: 15px 50px;
    text-decoration: none;
    margin: 10px 0px;
    transition: 0.2s ease opacity;
    opacity: 1;
    width: 100%;
    text-align: center;
}

header .cta:hover {
    opacity: 0.8;
    transition: 0.5s ease opacity;
}

@media (min-width: 768px) {
    header div {
        flex-direction: row;
    }
    
    header .cta {
        font-size: 27px;
        width: auto;
        margin: 0px 10px;
    }
    
    header header {
        padding: 40px 0px;
    }
}

.featuregrid {
    grid-gap: 40px;
}

@media (min-width: 768px) {
    .featuregrid {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 40px;
    }
}

@media (min-width: 1200px) {
    .featuregrid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.featuregrid svg {
    margin: 0px auto 0px auto;
    display: block;
}

.featuregrid section {
    padding: 0px;
    display: grid;
    grid-template-columns: 70px 1fr;
    align-items: center;
    grid-gap: 10px;
}

@media (min-width: 768px) {
    .featuregrid section {
        display: block;
    }
}

.featuregrid h3 {
    color: var(--main);
    font-size: 28px;
}

@media (min-width: 768px) {
    .featuregrid h3 {
        text-align: center;
    }

    .featuregrid p {
        text-align: center;
    }
}

.featuregrid img, .featuregrid picture {
    grid-column: 1/-1;
}

.featuregrid .promoimage {
    max-width: 100%;
    display: block;
    margin: 0px auto;
}

@media (max-width: 767px) {
    .featuregrid .promoimage {
        order: -1;
    }
}

h1 {
    color: var(--main);
    font-family: var(--font-header);
    font-size: 50px;
    margin: 0px;
}

@media (min-width: 1200px) {
    h1 {
        font-size: 70px;
    }
}

h2 {
    color: var(--main);
    font-family: var(--font-body);
    font-size: 20px;
    margin: 0px;
    font-weight: 100;
}

@media (min-width: 1200px) {
    h2 {
        font-size: 24px;
    }
}

h3 {
    color: var(--tint);
    font-family: var(--font-header);
    font-size: 25px;
    margin-top: 0px;
    margin-bottom: 0px;
}

@media (min-width: 1200px) {
    h3 {
        font-size: 50px;
        margin-bottom: 5px;
    }
}

h4 {
    color: var(--tint);
    opacity: 0.6;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 100;
    margin: 0px;
}

@media (min-width: 1200px) {
    h4 {
        font-size: 22px;
    }
}

p {
    color: var(--main);
    opacity: 0.6;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 100;
    margin: 0px;
}

#legal {
    color: var(--main);
    font-family: var(--font-body);
    font-size: 12px;
    text-align: center;
    font-weight: 100;
    margin-top: 40px;
}

#support {
    font-family: var(--font-body);
    font-weight: 100;
    font-size: 15px;
}

#support a {
    color: var(--main);
    margin: 0px 10px;
    text-decoration: none;
}

#support a:hover {
    text-decoration: underline;
}

@media (max-width: 320px) {
    #support span {
        display: none;
    }
}

.glyph {
    fill: var(--tint);
}

main {
    display: grid;
    grid-gap: 20px;
    width: 100%;
}

main section {
    position: relative;
    overflow: hidden;
    padding: 20px;
}

main section::before {
    content: "";
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

@media (min-width: 768px) {
    main {
        max-width: 1200px;
        margin: 0px auto;
        grid-gap: 20px;
    }
    
    aside {
        max-width: 80%;
    }
}

@media (min-width: 1200px) {
    main {
        grid-gap: 40px;
    }

    main section {
        padding: 45px;
    }
    
    aside {
        max-width: 100%;
    }
}

footer {
    width: 100%;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}

footer .toast {
    width: 213px;
    height: 93px;
    transform: scale(0.7);
    transition: background 0.2s ease;
}

footer .toast:hover {
    transition: background 0.5s ease;
}

@media (min-width: 768px) {
    footer {
        height: 200px;
    }

    footer .toast {
        transform: scale(1);
    }
}

.centered-vertical {
    display: flex;
    justify-content: center;
    align-items: center;
}

.centered-horizontal {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.privacy-card {
    background: white;
    border-radius: 10px;
    padding: 20px;
    margin-top: 10px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    flex-direction: column;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
}

@media (prefers-color-scheme: dark) {
    .privacy-card {
        background: rgba(255, 255, 255, 0.15);
    }
}

.privacy-card h3 {
    color: var(--main);
    font-weight: bold;
    font-size: 16px !important;
}

@media (min-width: 768px) {
    .privacy-card h3 {
        font-size: 20px !important;
    }
}

.privacy-card p {
    margin: 0px !important;
}

.privacy-card h3 + p {
    text-align: center;
}

.privacy-card .cardIcon {
    margin-bottom: 5px;
}

.privacy-card .cardIcon path {
    fill: var(--tint);
}

.privacy-card .cardTypesGroup {
    display: grid;
    margin-top: 10px;
    grid-gap: 5px;
    align-self: flex-start;
}

@media (min-width: 414px) {
    .privacy-card .cardTypesGroup {
        align-self: center !important;
        grid-template-columns: 1fr 1fr;
        grid-gap: 10px 20px;
    }
}

@media (min-width: 590px) {
    .privacy-card .cardTypesGroup {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (min-width: 768px) {
    .privacy-card .cardTypesGroup {
        width: 90%;
    }
}

.typeIcon {
    transform: translateY(3px);
    margin-right: 3px;
}

.typeIcon path {
    fill: var(--main);
}

/* PAGE SPECIFIC */
 .toast-page {
    --background: #F4F4F4;
    --main: #4b4948;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 0px;
}

@media (prefers-color-scheme: dark) {
    .toast-page {
        --background: #222222;
        --main: white;
    }
}

.toast-page header {
    width: 100%;
    background-image: linear-gradient(135deg, #FFAE00 0%, #FF3136 72%, #FF004C 100%);
    background-repeat: no-repeat;
    background-position: center center;
    padding: 40px 20px 20px;
    position: relative;
}

.toast-page header div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

@media (min-width: 768px) {
    .toast-page header {
        height: 430px;
        padding: 70px;
    }
}

.toast-page nav p {
    font-family: 'Circular Std Book', helvetica, arial, sans-serif;
    font-weight: 100;
    color: white;
}

.toast-page nav p a {
    text-decoration: underline;
    color: white;
}

.toast-page .logo {
    width: 200px;
    max-width: 100%;
}

@media (min-width: 768px) {
    .toast-page .logo {
        width: 400px;
    }
}

.toast-page .icon {
    display: block;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
    border-radius: 23px;
}

@media (min-width: 768px) {
    .toast-page .icon {
        display: none;
    }
}

.toast-page .promo {
    display: none;
}

@media (min-width: 768px) {
    .toast-page .promo {
        display: block;
    }
}

.toast-page main {
    margin-top: 0px;
    margin-bottom: 0px;
    grid-gap: 0px;
    grid-auto-columns: 1fr;
    grid-template-rows: repeat(8, 140px);
    grid-template-areas:    "screensizes"
                            "simplescales"
                            "typedex"
                            "critterdex"
                            "clearread"
                            "startpageredirect"
                            "linkbadges"
                            "empty";
}

.toast-page main section {
    transition: transform 0.2s ease;
    padding: 0px;
    background: white;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0px;
}

@media (prefers-color-scheme: dark) {
    .toast-page main section {
        background: #2D2D2D;
        border-bottom: 1px solid black;
    }
}

.toast-page main section a {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    padding: 20px;
}

.toast-page main section a div {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-gap: 20px;
    justify-content: center;
    align-items: center;
}

.toast-page main section:hover {
    cursor: hand;
    background: rgba(0, 0, 0, 0.05);
}

@media (prefers-color-scheme: dark) {
    .toast-page main section:hover {
        background: #393939;
    }
}

@media (min-width: 768px) {
    .toast-page main section {
        border: none;
        border-radius: 10px;
    }

    .toast-page main section a {
        padding: 0px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .toast-page main section {
        box-shadow: none;
    }

    .toast-page main picture {
        display: none;
    }
}

@media (min-width: 768px) {
    .toast-page main {
        transform: translateY(-70px);
        padding-left: 40px;
        padding-right: 40px;
        grid-gap: 20px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 460px 460px 460px 460px;
        grid-template-areas:    "screensizes simplescales"
                                "typedex critterdex" 
                                "clearread startpageredirect"
                                "linkbadges lifecast";
    }

    .toast-page main aside {
        text-align: center;
    }

    .toast-page main section:hover {
        box-shadow: 0px 12px 40px rgba(0, 0, 0, 0.15);
        background: white;
    }
}

@media (min-width: 768px) and (prefers-color-scheme: dark) {
    .toast-page main section:hover {
        background: #393939;
    }
}

@media (min-width: 1340px) {
    .toast-page main {
        padding: 0px;
        grid-template-rows: 650px 650px 650px 650px;
        grid-gap: 40px;
    }
}

.toast-page a {
    text-decoration: none;
}

.toast-page h2 {
    font-family: 'Circular Std', helvetica, arial, sans-serif;
    font-size: 24px;
    margin: 0px;
    color: var(--main);
}

.toast-page h3 {
    font-family: 'Circular Std Book', helvetica, arial, sans-serif;
    font-weight: 100;
    font-size: 16px;
    margin: 0px;
    opacity: 0.5;
    color: var(--main);
}

.toast-page #lifecast {
    grid-area: lifecast;
}

@media (min-width: 768px) {
    .toast-page #lifecast h2 {
        font-size: 40px;
    }

    .toast-page #lifecast h3 {
        font-size: 18px;
    }

    .toast-page #lifecast div {
        display: flex;
        justify-content: center;
    }

    .toast-page #lifecast aside {
        position: absolute;
        bottom: 20px;
        width: 380px;
        max-width: 90%;
    }

    .toast-page #lifecast .promo {
        align-self: center;
        position: absolute;
        top: 6%;
        max-width: 100%;
        left: 0px;
    }
}

@media (min-width: 1340px) {
    .toast-page #lifecast h2 {
        font-size: 50px;
    }

    .toast-page #lifecast h3 {
        font-size: 24px;
    }

    .toast-page #lifecast aside {
        bottom: 40px;
    }

    .toast-page #lifecast .promo {
        width: 637px;
        top: 60px;
    }
}

.toast-page #simplescales {
    grid-area: simplescales;
}

@media (min-width: 768px) {
    .toast-page #simplescales h2 {
        font-size: 40px;
    }

    .toast-page #simplescales h3 {
        font-size: 18px;
    }

    .toast-page #simplescales div {
        display: flex;
        justify-content: center;
    }

    .toast-page #simplescales aside {
        position: absolute;
        bottom: 20px;
        width: 380px;
        max-width: 90%;
    }

    .toast-page #simplescales .promo {
        align-self: center;
        position: absolute;
        top: 6%;
        max-width: 100%;
        left: 0px;
    }
}

@media (min-width: 1340px) {
    .toast-page #simplescales h2 {
        font-size: 50px;
    }

    .toast-page #simplescales h3 {
        font-size: 24px;
    }

    .toast-page #simplescales aside {
        bottom: 40px;
    }

    .toast-page #simplescales .promo {
        width: 637px;
        top: 60px;
    }
}

.toast-page #typedex {
    grid-area: typedex;
}

@media (min-width: 768px) {
    .toast-page #typedex h2 {
        font-size: 40px;
    }

    .toast-page #typedex h3 {
        font-size: 18px;
    }

    .toast-page #typedex div {
        display: flex;
        justify-content: center;
    }

    .toast-page #typedex aside {
        position: absolute;
        bottom: 20px;
        width: 380px;
        max-width: 90%;
    }

    .toast-page #typedex .promo {
        align-self: center;
        position: absolute;
        top: 20px;
        max-width: 100%;
        left: 0px;
    }
}

@media (min-width: 1340px) {
    .toast-page #typedex h2 {
        font-size: 50px;
    }

    .toast-page #typedex h3 {
        font-size: 24px;
    }

    .toast-page #typedex aside {
        bottom: 40px;
    }

    .toast-page #typedex .promo {
        width: 637px;
        top: 60px;
    }
}

.toast-page #critterdex {
    grid-area: critterdex;
}

@media (min-width: 768px) {
    .toast-page #critterdex h2 {
        font-size: 40px;
    }

    .toast-page #critterdex h3 {
        font-size: 18px;
    }

    .toast-page #critterdex div {
        display: flex;
        justify-content: center;
    }

    .toast-page #critterdex aside {
        position: absolute;
        bottom: 20px;
        width: 380px;
        max-width: 90%;
    }

    .toast-page #critterdex .promo {
        align-self: center;
        position: absolute;
        top: 6%;
        max-width: 100%;
        left: 0px;
    }
}

@media (min-width: 1340px) {
    .toast-page #critterdex h2 {
        font-size: 50px;
    }

    .toast-page #critterdex h3 {
        font-size: 24px;
    }

    .toast-page #critterdex aside {
        bottom: 40px;
    }

    .toast-page #critterdex .promo {
        width: 637px;
        top: 60px;
    }
}

.toast-page #screensizes {
    grid-area: screensizes;
}

@media (min-width: 768px) {
    .toast-page #screensizes h2 {
        font-size: 40px;
    }

    .toast-page #screensizes h3 {
        font-size: 18px;
    }

    .toast-page #screensizes div {
        display: flex;
        justify-content: center;
    }

    .toast-page #screensizes aside {
        position: absolute;
        bottom: 20px;
        width: 380px;
        max-width: 90%;
    }

    .toast-page #screensizes .promo {
        align-self: center;
        position: absolute;
        top: 6%;
        max-width: 100%;
        left: 0px;
    }
}

@media (min-width: 1340px) {
    .toast-page #screensizes h2 {
        font-size: 50px;
    }

    .toast-page #screensizes h3 {
        font-size: 24px;
    }

    .toast-page #screensizes aside {
        bottom: 40px;
    }

    .toast-page #screensizes .promo {
        width: 637px;
        top: 60px;
    }
}

.toast-page #linkbadges {
    grid-area: linkbadges;
}

@media (min-width: 768px) {
    .toast-page #linkbadges h2 {
        font-size: 40px;
    }

    .toast-page #linkbadges h3 {
        font-size: 18px;
    }

    .toast-page #linkbadges div {
        display: flex;
        justify-content: center;
    }

    .toast-page #linkbadges aside {
        position: absolute;
        bottom: 40px;
        width: 380px;
        max-width: 90%;
    }

    .toast-page #linkbadges .promo {
        align-self: center;
        position: absolute;
        top: 6%;
        width: 330px;
    }
}

@media (min-width: 1340px) {
    .toast-page #linkbadges h2 {
        font-size: 50px;
    }

    .toast-page #linkbadges h3 {
        font-size: 24px;
    }

    .toast-page #linkbadges aside {
        bottom: 40px;
    }

    .toast-page #linkbadges .promo {
        width: 540px;
    }
}

.toast-page #clearread {
    grid-area: clearread;
}

@media (min-width: 768px) {
    .toast-page #clearread h2 {
        font-size: 40px;
    }

    .toast-page #clearread h3 {
        font-size: 18px;
    }

    .toast-page #clearread div {
        display: flex;
        justify-content: center;
    }

    .toast-page #clearread aside {
        position: absolute;
        bottom: 20px;
        width: 380px;
        max-width: 90%;
    }

    .toast-page #clearread .promo {
        align-self: center;
        position: absolute;
        top: 6%;
        max-width: 100%;
        left: 0px;
    }
}

@media (min-width: 1340px) {
    .toast-page #clearread h2 {
        font-size: 50px;
    }

    .toast-page #clearread h3 {
        font-size: 24px;
    }

    .toast-page #clearread aside {
        bottom: 40px;
    }

    .toast-page #clearread .promo {
        width: 637px;
        top: 60px;
    }
}

.toast-page #startpageredirect {
    grid-area: startpageredirect;
}

@media (min-width: 768px) {
    .toast-page #startpageredirect h2 {
        font-size: 40px;
    }

    .toast-page #startpageredirect h3 {
        font-size: 18px;
    }

    .toast-page #startpageredirect div {
        display: flex;
        justify-content: center;
    }

    .toast-page #startpageredirect aside {
        position: absolute;
        bottom: 20px;
        width: 380px;
        max-width: 90%;
    }

    .toast-page #startpageredirect .promo {
        align-self: center;
        position: absolute;
        top: 6%;
        max-width: 100%;
        left: 0px;
    }
}

@media (min-width: 1340px) {
    .toast-page #startpageredirect h2 {
        font-size: 50px;
    }

    .toast-page #startpageredirect h3 {
        font-size: 24px;
    }

    .toast-page #startpageredirect aside {
        bottom: 40px;
    }

    .toast-page #startpageredirect .promo {
        width: 637px;
        top: 60px;
    }
}

.toast-page #empty {
    grid-area: empty;
    background: none;
    box-shadow: none;
    pointer-events: none;
}

.simplescales-page {
    background-repeat: no-repeat;
    background-size: contain;
    --background: #ECEBEB;
    --main: #665B49;
    --tint: #FFA300;
    --font-body: -apple-system, helvetica, arial, sans-serif;
    --font-header: -apple-system, helvetica, arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
    .simplescales-page {
        --background: #222;
        --main: #E9E3D9;
        --tint: #FFBC46;
    }
}

.simplescales-page h3, .simplescales-page .cta {
    font-weight: bold;
}

.simplescales-page h2, .simplescales-page h4, .simplescales-page p, .simplescales-page #support {
    font-weight: normal;
}

.simplescales-page footer .toast {
    background: url(/simple-scales/images/toast.svg);
}

.simplescales-page footer .toast:hover {
    background: url(/simple-scales/images/toast-active.svg);
}

.linkbadges-page {
    background-repeat: no-repeat;
    background-size: contain;
    --background: white;
    --main: black;
    --tint: #1ac327;
    --font-body: ui-rounded, system-ui, helvetica, sans-serif;
    --font-header: ui-rounded, system-ui, helvetica, sans-serif;
}

@media (prefers-color-scheme: dark) {
    .linkbadges-page {
        background-image: url(link-badges/images/header-dark.png);
        background-repeat: no-repeat;
        background-size: contain;
        --background: black;
        --main: white;
        --tint: #07FD1A;
    }
}

.linkbadges-page h3, .linkbadges-page .cta {
    font-weight: bold;
}

.linkbadges-page h2, .linkbadges-page h4, .linkbadges-page p, .linkbadges-page #support {
    font-weight: normal;
}

.linkbadges-page footer .toast {
    background: url(/link-badges/images/toast.svg);
}

.linkbadges-page footer .toast:hover {
    background: url(/link-badges/images/toast-active.svg);
}

.typedex-page {
    background-repeat: no-repeat;
    background-size: contain;
    --background: #f5f5f5;
    --main: #000000;
    --tint: #E9395E;
    --font-body: system-ui, helvetica, sans-serif;
    --font-header: system-ui, helvetica, sans-serif;
}

@media (prefers-color-scheme: dark) {
    .typedex-page {
        --background: #1E1E1E;
        --main: white;
        --tint: #FF6D8C;
    }
}

@media (min-width: 768px) {
    .typedex-page #legal {
        margin-top: 10px;
    }
    
    .typedex-page .featuregrid svg {
        margin-bottom: 10px;
    }
}

.typedex-page h3, .typedex-page .cta {
    font-weight: bold;
}

.typedex-page h2, .typedex-page h4, .typedex-page p, .typedex-page #support, .typedex-page #legal {
    font-weight: normal;
}

.typedex-page footer .toast {
    background: url(/typedex/images/toast.svg);
}

.typedex-page footer .toast:hover {
    background: url(/typedex/images/toast-active.svg);
}

@media (prefers-color-scheme: dark) {
    .typedex-page footer .toast:hover {
        background: url(/typedex/images/toast-active-dark.svg);
    }
}

.typedex-page.privacy-page p {
    opacity: 1;
}

.lifecast-page {
    background-repeat: no-repeat;
    background-size: contain;
    --background: #FFFFFF;
    --main: #0D1526;
    --tint: #fe9a48;
    --font-body: 'Work Sans', helvetica, arial, sans-serif;
    --font-header: 'Work Sans', helvetica, arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
    .lifecast-page {
        --background: #0D1526;
        --main: #FFFFFF;
        --tint: #ffe758;
    }
}

@media (min-width: 1200px) {
    .lifecast-page h3 {
        font-size: 35px;
    }
}

@media (min-width: 1200px) {
    .lifecast-page h4 {
        font-size: 20px;
    }
}

@media (min-width: 414px) {
    .lifecast-page br {
        display: none;
    }
}

.lifecast-page h3, .typedex-page .cta {
    font-weight: bold;
}

.lifecast-page h2, .lifecast-page h4, .lifecast-page p, .lifecast-page #support, .lifecast-page #legal {
    font-weight: normal;
}

.lifecast-page footer .toast {
    background: url(/lifecast/images/toast.svg);
}

@media (prefers-color-scheme: dark) {
    .lifecast-page footer .toast {
        background: url(/lifecast/images/toast-dark.svg);
    }
}

.lifecast-page footer .toast:hover {
    background: url(/lifecast/images/toast-active.svg);
}

@media (prefers-color-scheme: dark) {
    .lifecast-page footer .toast:hover {
        background: url(/lifecast/images/toast-active-dark.svg);
    }
}

.critterdex-page {
    background-repeat: no-repeat;
    background-size: contain;
    --background: #F7F6F2;
    --main: #5F5B38;
    --tint: #2B9E93;
    --font-body: ui-rounded, system-ui, helvetica, sans-serif;
    --font-header: ui-rounded, system-ui, helvetica, sans-serif;
}

@media (prefers-color-scheme: dark) {
    .critterdex-page {
        --background: #252521;
        --main: #E6E5DA;
        --tint: #81E4DB;
    }
}

.critterdex-page p, .critterdex-page h2, .critterdex-page #support, .critterdex-page #legal {
    font-weight: 400;
}

@media (min-width: 1200px) {
    .critterdex-page h3 {
        font-size: 35px;
    }
}

@media (min-width: 1200px) {
    .critterdex-page h4 {
        font-size: 20px;
    }
}

.critterdex-page .cta {
    font-weight: 700;
}

.critterdex-page footer .toast {
    background: url(/critterdex/images/toast.svg);
}

@media (prefers-color-scheme: dark) {
    .critterdex-page footer .toast {
        background: url(/critterdex/images/toast-dark.svg);
    }
}

.critterdex-page footer .toast:hover {
    background: url(/critterdex/images/toast-active.svg);
}

@media (prefers-color-scheme: dark) {
    .critterdex-page footer .toast:hover {
        background: url(/critterdex/images/toast-active-dark.svg);
    }
}

/* SCREEN SIZES */
.screensizes-page {
    background-repeat: no-repeat;
    background-size: contain;
    --background: #F5F5F5;
    --main: #000000;
    --tint: #7C0EE2;
    --font-body: system-ui, helvetica, roboto, sans-serif;
    --font-header: system-ui, helvetica, roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
    .screensizes-page {
        --background: #1E1E1E;
        --main: #FFFFFF;
        --tint: #CF8EFF;
    }
}

@media (pointer: fine) and (prefers-color-scheme: dark) {
    .screensizes-page {
        --background: #1E1E1E;
    }
}


.screensizes-page h2, .screensizes-page p, .screensizes-page a, .screensizes-page #legal {
    font-weight: 400;
}

.screensizes-page .cta {
    font-weight: 700;
}

.screensizes-page footer .toast {
    background: url(/screen-sizes/images/toast.svg);
}

@media (prefers-color-scheme: dark) {
    .screensizes-page footer .toast {
        background: url(/screen-sizes/images/toast-dark.svg);
    }
}

.screensizes-page footer .toast:hover {
    background: url(/screen-sizes/images/toast-active.svg);
}

@media (prefers-color-scheme: dark) {
    .screensizes-page footer .toast:hover {
        background: url(/screen-sizes/images/toast-active-dark.svg);
    }
}

/* CLEAR READ */
@font-face {
    font-family: "Open Dyslexic Regular";
    src: url("clear-read/OpenDyslexic3-Regular.ttf");
}

.clearread-page {
    background-repeat: no-repeat;
    background-size: contain;
    --background: #FFFFFF;
    --main: #000000;
    --tint: #4372FD;
}

@media (prefers-color-scheme: dark) {
    .clearread-page {
        --background: #000000;
        --main: #FFFFFF;
    }
}

@media (pointer: fine) and (prefers-color-scheme: dark) {
    .clearread-page {
        --background: #1E1E1E;
    }
}

.clearread-page footer .toast {
    background: url(/screen-sizes/images/toast.svg);
}

@media (prefers-color-scheme: dark) {
    .clearread-page footer .toast {
        background: url(/screen-sizes/images/toast-dark.svg);
    }
}

.clearread-page footer .toast:hover {
    background: url(/screen-sizes/images/toast-active.svg);
}

@media (prefers-color-scheme: dark) {
    .clearread-page footer .toast:hover {
        background: url(/screen-sizes/images/toast-active-dark.svg);
    }
}

/* START PAGE REDIRECT */
.startpageredirect-page {
    background-repeat: no-repeat;
    background-size: contain;
    --background: #FFFFFF;
    --main: #000000;
    --tint: #4372FD;
}

@media (prefers-color-scheme: dark) {
    .startpageredirect-page {
        --background: #000000;
        --main: #FFFFFF;
    }
}

@media (min-width: 1200px) {
    .startpageredirect-page .featuregrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.startpageredirect-page footer .toast {
    background: url(/screen-sizes/images/toast.svg);
}

.startpageredirect-page footer .toast:hover {
    background: url(/screen-sizes/images/toast-active.svg);
}

@media (prefers-color-scheme: dark) {
    .startpageredirect-page footer .toast:hover {
        background: url(/screen-sizes/images/toast-active-dark.svg);
    }
}

.privacy-page {
    background-image: none;
}

.privacy-page section {
    max-width: 650px;
    margin: 0px auto;
    padding: 20px 0px 60px 0px;
    flex-direction: column;
    display: block;
}

.privacy-page h1 {
    font-family: var(--font-header);
    font-size: 36px;
    margin: 0px;
    text-align: left;
    opacity: 1;
}

.privacy-page h1 + p {
    margin-top: 5px;
    margin-bottom: 0px;
}

.privacy-page h2 {
    font-family: var(--font-header);
    font-size: 20px;
    color: var(--main);
    margin-top: 40px;
    text-align: left;
    opacity: 1;
    font-weight: bold;
}

.privacy-page ul {
    padding-left: 18px;
}

.privacy-page p, .privacy-page li {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--main);
    line-height: 24px;
    margin-bottom: 20px;
    margin-top: 5px;
    opacity: 1;
}

.privacy-page li {
    margin-bottom: 0px;
}

.privacy-page a {
    color: var(--tint);
    text-decoration: none;
}

.privacy-page a:hover {
    text-decoration: underline;
}

.privacy-page .logo {
    fill: var(--main);
    transform: scale(0.7);
    transform-origin: top left;
    margin-top: 30px;
    margin-bottom: 30px;
    opacity: 0.5;
    transition: opacity 0.2s ease;
    display: block;
}

.privacy-page .logo:hover {
    opacity: 1;
    transition: opacity 0.5s ease;
}

.privacy-page .key {
    border: 1px solid var(--main);
    padding: 5px;
    box-shadow: 0px 2px 0px;
    border-radius: 4px;
    margin-right: 10px;
    margin-left: -15px;
    width: 50px;
    display: inline-block;
    text-align: center;
}

/* 404 */
#notfound {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

#notfound #header {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 0px 20px;
    padding-top: 20px;
}

#notfound #header h1 {
    font-size: 30px;
    text-align: center;
}

#notfound #header p {
    font-size: 16px;
    text-align: center;
}

#notfound #grid {
    display: grid;
    grid-template-columns: repeat(2, 120px);
    grid-gap: 40px;
    padding-bottom: 20px;
}

#notfound #grid a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: var(--font-body);
    color: var(--main);
}

#notfound #grid img {
    width: 120px;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
    border-radius: 28px;
    margin-bottom: 10px;
    transition: 0.2s transform ease;
}

#notfound #grid a:hover img {
    box-shadow: 0px 10px 20px rgba(0,0,0,0.2);
    transform: scale(1.1);
    transition: 0.2s transform ease;
}

@media (min-width: 415px) {
    #notfound #header {
        margin-bottom: 60px;
        margin-top: 0px;
    }
    
    #notfound #header h1 {
        font-size: 50px;
    }
    
    #notfound #header p {
        font-size: 30px;
    }
    
    #notfound #grid {
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 40px;
    }
    
    #notfound #grid img {
        width: 150px;
        border-radius: 36px;
    }
}

@media (min-width: 767px) {
    #notfound {
        justify-content: center;
    }
}

@media (min-width: 1023px) {
    #notfound #grid {
        grid-template-columns: repeat(5, 1fr);
    }
}