@font-face {
    font-family: "Nunito";
    src: url(../assets/fonts/Nunito-Regular.ttf) format('truetype');
}

@font-face {
    font-family: "Nunito Italic";
    src: url(../assets/fonts/Nunito-Italic.ttf) format("truetype");
}

@font-face {
    font-family: "Nunito Bold";
    src: url(../assets/fonts/Nunito-Bold.ttf) format("truetype");
}

@font-face {
    font-family: "Nunito Light";
    src: url(../assets/fonts/Nunito-Light.ttf) format('truetype');
}

@font-face {
    font-family: "SNPro Bold";
    src: url("../assets/fonts/SNPro-Bold.ttf") format("truetype");
}

@font-face {
    font-family: "SNPro SemiBold";
    src: url("../assets/fonts/SNPro-SemiBold.ttf") format("truetype");
}

/* PT Serif (SIL OFL 1.1, assets/fonts/PT_Serif-OFL.txt): the optional Bible reading font.
   Covers Latin Extended and Cyrillic, so Polish and Ukrainian text render in it too. */
@font-face {
    font-family: "GoF Reading Serif";
    src: url("../assets/fonts/PT_Serif-Web-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "GoF Reading Serif";
    src: url("../assets/fonts/PT_Serif-Web-Italic.woff2") format("woff2");
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "GoF Reading Serif";
    src: url("../assets/fonts/PT_Serif-Web-Bold.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "GoF Reading Serif";
    src: url("../assets/fonts/PT_Serif-Web-BoldItalic.woff2") format("woff2");
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

#gof_logo_loading {
    position: absolute;
    inset: 0;
    animation-name: pulsating;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    margin: auto;
    height: 12vmin
}

#interactive_course_icon {
    animation-name: pulsating;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

@keyframes pulsating {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes make-transparent {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}


@keyframes make-opaque {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.gof-fade {
    opacity: 1;
    transition-property: opacity;
    transition-timing-function: ease;
}

.gof-fade-hidden {
    opacity: 0;
}

/*
 * Reduced motion: html.gof-reduce-motion is set by gof.motion (app.js) from the
 * user's Animations setting and the operating system. Durations collapse to a hair
 * above zero instead of zero, because a zero-length transition fires no
 * transitionend, and the fade helpers await animationend / transitionend. The
 * !important also beats the inline durations those helpers set. Continuous
 * animations stop after one instant pass; elements that must stay distinguishable
 * without them (the first-visit tile hints) define a static reduced state.
 */
html.gof-reduce-motion *,
html.gof-reduce-motion *::before,
html.gof-reduce-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

.gof-vh-scroll-frame .gof-vh-scroll-area {
    grid-column: 1;
    grid-row: 1;
}

.gof-vh-scroll-frame.has-custom-vh-scrolls .gof-vh-scroll-area {
    scrollbar-width: none;
}

.gof-vh-scroll-frame.has-custom-vh-scrolls .gof-vh-scroll-area::-webkit-scrollbar {
    width: 0;
    height: 0;
}


:root {
    --gof-reading-serif-font: "GoF Reading Serif", "PT Serif", Georgia, serif;

    --sky-05: #f0f9ff;
    --sky-10: #e0f2fe;
    --sky-20: #bae6fd;
    --sky-30: #7dd3fc;
    --sky-40: #38bdf8;
    --sky-50: #0ea5e9;
    --sky-60: #0284c7;
    --sky-70: #0369a1;
    --sky-80: #075985;
    --sky-90: #0c4a6e;
    --sky-95: #082f49;
    --blue-05: #EFF6FF;
    --blue-10: #DBEAFE;
    --blue-20: #BFDBFE;
    --blue-30: #93C5FD;
    --blue-40: #60A5FA;
    --blue-50: #3B82F6;
    --blue-60: #2563EB;
    --blue-70: #1D4ED8;
    --blue-80: #1E40AF;
    --blue-90: #1E3A8A;
    --blue-95: #172554;
    --gray-05: #f9fafb;
    --gray-10: #f3f4f6;
    --gray-20: #e5e7eb;
    --gray-30: #d1d5db;
    --gray-40: #9ca3af;
    --gray-50: #6b7280;
    --gray-60: #4b5563;
    --gray-70: #374151;
    --gray-80: #1f2937;
    --gray-90: #111827;
    --gray-95: #030712;
}

.gof-form-input__control::-ms-reveal,
.gof-form-input__control::-ms-clear {
    display: none;
}

.gof-strong-dictionary-entry {
    font-size: 0.9rem;
    line-height: 1.55;
}

.gof-strong-dictionary-entry p {
    margin: 0 0 0.65rem;
}

.gof-strong-dictionary-entry p:has(> strong:first-child) {
    margin-top: 0.95rem;
    margin-bottom: 0.35rem;
}

.gof-strong-dictionary-entry p:first-child {
    margin-top: 0;
}

.gof-strong-dictionary-entry strong {
    color: #ffffff;
    font-weight: 700;
}

.gof-strong-dictionary-entry i,
.gof-strong-dictionary-entry em {
    color: #e0f2fe;
}

.gof-strong-dictionary-entry ol,
.gof-strong-dictionary-entry ul {
    margin: 0.25rem 0 0.85rem 1.2rem;
    padding-left: 1rem;
}

.gof-strong-dictionary-entry ol {
    list-style: decimal;
}

.gof-strong-dictionary-entry ol[type="a"] {
    list-style: lower-alpha;
}

.gof-strong-dictionary-entry ul {
    list-style: disc;
}

.gof-strong-dictionary-entry li {
    margin: 0.2rem 0;
    padding-left: 0.15rem;
}

.gof-strong-dictionary-entry li > ol,
.gof-strong-dictionary-entry li > ul {
    margin-top: 0.25rem;
    margin-bottom: 0.35rem;
}

.gof-strong-dictionary-link {
    display: inline;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.bg-05 {
    background-color: #f0f9ff !important;
}

.bg-10 {
    background-color: #e0f2fe !important;
}

.bg-20 {
    background-color: #bae6fd !important;
}

.bg-30 {
    background-color: #7dd3fc !important;
}

.bg-40 {
    background-color: #38bdf8 !important;
}

.bg-50 {
    background-color: #0ea5e9 !important;
}

.bg-60 {
    background-color: #0284c7 !important;
}

.bg-70 {
    background-color: #0369a1 !important;
}

.bg-80 {
    background-color: #075985 !important;
}

.bg-90 {
    background-color: #0c4a6e !important;
}