@font-face {
    font-family: 'Outfit';
    font-style: normal;
    src: local('Outfit Thin'), url('./../fonts/OutfitVariableFont_wght1.woff') format('woff');
    font-display: swap;
    font-weight: 100;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    src: local('Outfit ExtraLight'), url('./../fonts/OutfitExtraLight.woff') format('woff');
    font-display: swap;
    font-weight: 200;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    src: local('Outfit Light'), url('./../fonts/OutfitLight1.woff') format('woff');
    font-display: swap;
    font-weight: 300;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    src: local('Outfit Regular'), url('./../fonts/OutfitRegular.woff') format('woff');
    font-display: swap;
    font-weight: 400;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    src: local('Outfit Medium'), url('./../fonts/OutfitMedium.woff') format('woff');
    font-display: swap;
    font-weight: 500;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    src: local('Outfit SemiBold'), url('./../fonts/OutfitSemiBold.woff') format('woff');
    font-display: swap;
    font-weight: 600;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    src: local('Outfit Bold'), url('./../fonts/OutfitBold.woff') format('woff');
    font-display: swap;
    font-weight: 700;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    src: local('Outfit ExtraBold'), url('./../fonts/OutfitExtraBold.woff') format('woff');
    font-display: swap;
    font-weight: 800;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    src: local('Outfit Black'), url('./../fonts/OutfitBlack.woff') format('woff');
    font-display: swap;
    font-weight: 900;
}

@font-face {
    font-family: 'Figtree Light';
    font-style: normal;
    font-weight: normal;
    src: local('Figtree Light'), url('./../fonts/Figtree[wght].woff') format('woff');
    font-display: swap;
}


@font-face {
    font-family: 'Figtree Light';
    font-style: italic;
    font-weight: normal;
    src: local('Figtree Light Italic'), url('./../fonts/Figtree-Italic[wght].woff') format('woff');
    font-display: swap;
}

:root {
    --primary: 255, 112, 98;
    --secondary: 255, 204, 62;
    --muted: 243, 240, 231;
    --cream: 255, 253, 247;
    --navy: 20, 50, 79;
    --coral: 255, 112, 98;
    --mint: 93, 201, 156;
    --sunny: 255, 204, 62;
}

body {
    font-family: 'Figtree Light', sans-serif;
    background-color: #fdfdfd;
    color: #252131;
}

.font-outfit {
    font-family: 'Outfit', sans-serif;
}

.py-6 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
}

.fs-7 {
    font-size: 0.875rem !important;
}

.fs-8 {
    font-size: 0.75rem !important;
}

.header .nav-link {
    --bs-nav-link-padding-x: 0.75rem;
    --bs-nav-link-font-size: 0.875rem;
    --bs-nav-link-color: rgba(var(--navy), 1);
    --bs-nav-link-hover-color: rgba(var(--primary), 1);
}

.header-search {
    width: 100%;
}

/* Mobile: separate the collapsed menu from the content and enlarge the tap area */
@media (max-width: 767.98px) {
    .header .navbar-collapse {
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid rgba(var(--navy), 0.15);
    }

    .header .nav-link {
        --bs-nav-link-padding-x: 0;
        --bs-nav-link-padding-y: 0.75rem;
    }
}

/* Desktop: cap the search field width so it cannot squeeze the nav */
@media (min-width: 768px) {
    .header-search {
        width: 12rem;
        flex-shrink: 0;
    }
}

.aside {
    width: 20rem;
}

.aside-title .badge {
    --bs-badge-font-weight: 500;
    --bs-badge-border-radius: 1rem;
    --bs-badge-padding-x: 0.5rem;
    --bs-badge-padding-y: 0.35rem;
    background-color: rgba(var(--mint), 0.15);
    color: rgba(var(--navy), 0.7);
}

.aside-search .form-control {
    --bs-body-bg: #fdfdfd;
    --bs-body-color: rgba(var(--navy), 0.4);
    --bs-border-color: rgba(var(--navy), 0.15);
    font-size: 0.875rem;
    font-family: 'Figtree Light', sans-serif;
    padding: .5rem .75rem
}

.aside-search .form-control:focus {
    border-color: rgba(var(--primary), 1);
    box-shadow: none;
}

.aside-group .btn-random {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-bg: rgba(var(--primary), 1);
    --bs-btn-hover-bg: rgba(var(--primary), 0.9);
    --bs-btn-active-bg: rgba(var(--primary), 0.8);
    --bs-btn-color: #fdfdfd;
    --bs-btn-hover-color: #fdfdfd;
    --bs-btn-active-color: #fdfdfd;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-font-weight: 700;
}

.aside-group .btn-submit {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-bg: rgba(var(--secondary), 1);
    --bs-btn-hover-bg: rgba(var(--secondary), 0.9);
    --bs-btn-active-bg: rgba(var(--secondary), 0.8);
    --bs-btn-color: #14324f;
    --bs-btn-hover-color: #14324f;
    --bs-btn-active-color: #14324f;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-font-weight: 700;
}

.aside-categories .nav-link {
    --bs-nav-link-padding-x: 0.75rem;
    color: rgba(var(--navy), 0.7);
}

.aside-categories .nav-link:hover,
.aside-categories .nav-link.active {
    background: rgba(var(--navy), 1);
    color: rgba(var(--cream), 1);
}

.aside-tools a {
    display: block;
    color: rgba(var(--navy), 0.7);
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.aside-tools a span {
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
}

.aside-tools a span.icon-fav {
    background: rgba(var(--sunny), .15);
}

.aside-tools a span.icon-blog {
    background: rgba(var(--primary), .25);
}

.aside-tools a em {
    color: rgba(var(--navy), 0.4);
    font-style: normal;
}

.aside-tools a:hover {
    color: rgba(var(--primary), 1);
}

.hero-surface {
    background: linear-gradient(135deg, rgba(var(--navy), 1), rgba(var(--navy), 1));
    color: rgba(var(--cream), 1);
}

.hero-surface .hero-inner {
    max-width: 30rem;
}

.hero-surface .badge {
    --bs-badge-font-weight: 500;
    --bs-badge-border-radius: 1rem;
    --bs-badge-padding-x: 0.5rem;
    --bs-badge-padding-y: 0.35rem;
    background-color: rgba(var(--primary), 1);
}

.hero-surface p {
    color: rgba(var(--cream), 0.7);
}

.hero-surface .btn-play {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-bg: rgba(var(--secondary), 1);
    --bs-btn-hover-bg: rgba(var(--secondary), 0.9);
    --bs-btn-active-bg: rgba(var(--secondary), 0.8);
    --bs-btn-color: #14324f;
    --bs-btn-hover-color: #14324f;
    --bs-btn-active-color: #14324f;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-font-weight: 700;
}

.hero-surface .btn-surprise {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-bg: rgba(var(--cream), 1);
    --bs-btn-hover-bg: rgba(var(--cream), 0.9);
    --bs-btn-active-bg: rgba(var(--cream), 0.8);
    --bs-btn-color: #14324f;
    --bs-btn-hover-color: #14324f;
    --bs-btn-active-color: #14324f;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-font-weight: 700;
}

.choice-title p {
    color: rgba(var(--primary), 1);
}

.choice-title span {
    color: rgba(var(--navy), .5);
}

.choice-item {
    position: relative;
}

.choice-item a {
    text-decoration: none;
}

.choice-item .choice-info h3 {
    color: rgba(var(--navy), 1);
}

.choice-item .choice-info p {
    color: rgba(var(--navy), .5);
}

.choice-item .btn-star {
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    border-radius: 0.25rem;
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --bs-btn-bg: rgb(253, 253, 253, .9);
    --bs-btn-hover-bg: rgb(253, 253, 253, 1);
    --bs-btn-active-bg: rgb(253, 253, 253, .9);
    --bs-btn-color: rgba(var(--primary), 1);
    --bs-btn-hover-color: rgba(var(--primary), 1);
    --bs-btn-active-color: rgba(var(--primary), 1);
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.featured-title p {
    color: rgba(var(--navy), .5);
}

.featured-item span {
    width: 2.75rem;
    height: 2.75rem;
    line-height: 2.75rem;
    text-align: center;
    font-weight: 600;
}

.featured-item .icon-one {
    background: rgba(var(--primary), .15);
    color: rgba(var(--primary), 1);
}

.featured-item .icon-two {
    background: rgba(var(--mint), .20);
}

.featured-item .icon-three {
    background: rgba(var(--sunny), .25);
}

.featured-item p {
    color: rgba(var(--navy), .5);
}

.puzzle-title p {
    color: rgba(var(--mint), 1);
}

.puzzle-title span {
    color: rgba(var(--navy), .5);
}

.puzzle-item a {
    text-decoration: none;
}

.puzzle-item img {
    width: 3.75rem;
    height: 3.75rem;
}

.puzzle-item .puzzle-info h3 {
    color: rgba(var(--navy), 1);
}

.puzzle-item .puzzle-info p {
    color: rgba(var(--navy), .5);
}

.puzzle-item .btn-star {
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    border-radius: 0.25rem;
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --bs-btn-bg: rgb(253, 253, 253, .9);
    --bs-btn-hover-bg: rgb(253, 253, 253, 1);
    --bs-btn-active-bg: rgb(253, 253, 253, .9);
    --bs-btn-color: rgba(var(--primary), 1);
    --bs-btn-hover-color: rgba(var(--primary), 1);
    --bs-btn-active-color: rgba(var(--primary), 1);
}

.blog-title p {
    color: rgba(var(--primary), 1);
}

.blog-title a {
    color: rgba(var(--navy), .5);
    text-decoration: none;
}

.blog-title a:hover {
    color: rgba(var(--primary), 1);
}

.blog-item {
    text-decoration: none;
}

.blog-item .blog-info h3 {
    color: rgba(var(--navy), 1);
}

.blog-item .blog-info p {
    color: rgba(var(--navy), .5);
}

.footer-line {
    height: 0.5rem;
}

.footer-line .bg-coral {
    background-color: rgba(var(--coral), 1);
}

.footer-line .bg-sunny {
    background-color: rgba(var(--sunny), 1);
}

.footer-line .bg-mint {
    background-color: rgba(var(--mint), 1);
}

.footer-line .bg-navy {
    background-color: rgba(var(--navy), 1);
}

.footer-title p {
    color: rgba(var(--navy), .5);
}

.footer-nav .nav-link {
    --bs-nav-link-padding-x: 0.75rem;
    --bs-nav-link-font-size: 0.875rem;
    --bs-nav-link-color: rgba(var(--navy), 1);
    --bs-nav-link-hover-color: rgba(var(--primary), 1);
}

.footer-copy p {
    color: rgba(var(--navy), .5);
}

.footer-copy a {
    color: rgba(var(--navy), .5);
    text-decoration: none;
}

.footer-copy a:hover {
    color: rgba(var(--primary), 1);
}

.archive-title span {
    color: rgba(var(--primary), .5);
}

.submit-title p {
    color: rgba(var(--primary), 1);
}

.submit-title strong {
    color: rgba(var(--navy), .5);
}

.comment-stats a {
    color: rgba(var(--navy), .5);
    text-decoration: none;
}

.comment-stats a:hover {
    color: rgba(var(--primary), 1);
}

.submit-main .btn-submit {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-bg: rgba(var(--primary), 1);
    --bs-btn-hover-bg: rgba(var(--primary), 0.9);
    --bs-btn-active-bg: rgba(var(--primary), 0.8);
    --bs-btn-color: #fdfdfd;
    --bs-btn-hover-color: #fdfdfd;
    --bs-btn-active-color: #fdfdfd;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-font-weight: 700;
}

.comment-form .form-control {
    --bs-body-bg: #fdfdfd;
    --bs-body-color: rgba(var(--navy), 1);
    --bs-border-color: rgba(var(--navy), .15);
    font-size: .875rem;
}

.comment-form .form-control:focus {
    border-color: rgba(var(--primary), 1);
    box-shadow: none;
}

.comment-form .form-control::placeholder {
    color: rgba(var(--navy), .4);
}

.comment-form .respond a {
    color: rgba(var(--primary), 1);
}

.comment-form .btn-comment {
    --bs-btn-bg: rgba(var(--primary), 1);
    --bs-btn-hover-bg: rgba(var(--primary), .9);
    --bs-btn-active-bg: rgba(var(--primary), .8);
    --bs-btn-color: #fdfdfd;
    --bs-btn-hover-color: #fdfdfd;
    --bs-btn-active-color: #fdfdfd;
    --bs-btn-font-size: .875rem;
    --bs-btn-font-weight: 700;
}

.comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comment-avatar img {
    border-radius: 3rem;
}

.comment-author strong a {
    color: rgba(var(--navy), 1);
    text-decoration: none;
}

.comment-author small a {
    color: rgba(var(--navy), .5);
    text-decoration: none;
}

.comment-content {
    font-size: 0.875rem;
    color: rgba(var(--navy), .7);
    line-height: 1.6;
}

.comment-content p {
    margin: 0;
}

.back-home a {
    color: rgba(var(--navy), .5);
    text-decoration: none;
}

.back-home a:hover {
    color: rgba(var(--primary), 1);
}

.post-header p {
    color: rgba(var(--primary), 1);
}

.post-header h1 {
    line-height: 1.7;
}

.post-header small {
    color: rgba(var(--navy), .5);
}

.post-content {
    color: rgba(var(--navy), .8);
    line-height: 1.7;
    overflow-wrap: break-word;
}

/* Markdown output: everything the editor can produce, on the site's tokens */

.post-content > *:first-child {
    margin-top: 0;
}

.post-content > *:last-child {
    margin-bottom: 0;
}

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    line-height: 1.35;
    color: rgba(var(--navy), 1);
    margin-top: 2rem;
    margin-bottom: .75rem;
}

.post-content h1 {
    font-size: 1.75rem;
}

.post-content h2 {
    font-size: 1.5rem;
}

.post-content h3 {
    font-size: 1.25rem;
}

.post-content h4 {
    font-size: 1rem;
}

.post-content h5 {
    font-size: .9375rem;
}

.post-content h6 {
    font-size: .875rem;
}

.post-content p {
    margin-bottom: 1rem;
}

.post-content a {
    color: rgba(var(--primary), 1);
    text-decoration: underline;
    text-underline-offset: .2em;
    transition: color .3s ease-in-out;
}

.post-content a:hover {
    color: rgba(var(--navy), 1);
}

/* Lift emphasis off the .8 body colour so it actually reads as emphasis */
.post-content strong,
.post-content b {
    font-weight: 700;
    color: rgba(var(--navy), 1);
}

.post-content em,
.post-content i {
    font-style: italic;
}

.post-content del {
    color: rgba(var(--navy), .4);
}

.post-content ul,
.post-content ol {
    margin-bottom: 1rem;
    padding-left: 1.25rem;
}

.post-content li {
    margin-bottom: .375rem;
}

.post-content li::marker {
    color: rgba(var(--primary), 1);
}

.post-content li > ul,
.post-content li > ol {
    margin-top: .375rem;
    margin-bottom: 0;
}

.post-content blockquote {
    margin: 1.5rem 0;
    padding: .75rem 1.25rem;
    border-left: 3px solid rgba(var(--primary), .6);
    border-radius: 0 .25rem .25rem 0;
    background: rgba(var(--muted), 1);
    color: rgba(var(--navy), .7);
}

.post-content blockquote > *:last-child {
    margin-bottom: 0;
}

.post-content code {
    font-family: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
    font-size: .875em;
    padding: .15em .4em;
    border-radius: .25rem;
    background: rgba(var(--muted), 1);
    color: rgba(var(--navy), 1);
}

.post-content pre {
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    border-radius: .5rem;
    background: rgba(var(--navy), 1);
    color: rgba(var(--cream), .9);
    font-size: .875rem;
    line-height: 1.6;
    overflow-x: auto;
}

/* The dark surface already carries the block, so drop the inline chip */
.post-content pre code {
    padding: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font-size: inherit;
}

.post-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.5rem auto;
    border-radius: .5rem;
}

.post-content figure {
    margin: 1.5rem 0;
}

.post-content figcaption {
    margin-top: .5rem;
    font-size: .875rem;
    text-align: center;
    color: rgba(var(--navy), .5);
}

.post-content hr {
    margin: 2rem 0;
    border: 0;
    border-top: 1px solid rgba(var(--navy), .15);
}

/* Shrink to the table's own width and scroll, so a wide table cannot blow
   out the column on small screens */
.post-content table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    margin-bottom: 1.25rem;
    border-collapse: collapse;
    font-size: .875rem;
}

.post-content th,
.post-content td {
    padding: .5rem .75rem;
    border: 1px solid rgba(var(--navy), .15);
    text-align: left;
}

.post-content th {
    background: rgba(var(--muted), 1);
    font-weight: 600;
    color: rgba(var(--navy), 1);
}

.post-content sup,
.post-content sub {
    font-size: .75em;
    line-height: 0;
}

.related-puzzle {
    background: rgba(var(--sunny), .15);
}

.near-item {
    display: block;
    text-decoration: none;
}

.near-item p {
    color: rgba(var(--mint), 1);
}

.near-item h3 {
    color: rgba(var(--navy), 1);
    transition: color .3s ease-in-out;
}

.near-item:hover h3 {
    color: rgba(var(--primary), 1);
}

.game-title p {
    color: rgba(var(--primary), 1);
}

.game-title small {
    color: rgba(var(--navy), .7);
}

.level-item {
    background: rgba(var(--muted), 1);
}

.level-item span {
    color: rgba(var(--navy), .5);
}

.game-tools .btn-play {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-bg: rgba(var(--primary), 1);
    --bs-btn-hover-bg: rgba(var(--primary), 0.9);
    --bs-btn-active-bg: rgba(var(--primary), 0.8);
    --bs-btn-color: #fdfdfd;
    --bs-btn-hover-color: #fdfdfd;
    --bs-btn-active-color: #fdfdfd;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-font-weight: 700;
}

.game-tools .btn-save {
    --bs-btn-border-color: rgba(var(--navy), .15);
    --bs-btn-hover-border-color: rgba(var(--navy), .15);
    --bs-btn-hover-bg: rgba(var(--mint), 1);
    --bs-btn-font-color: rgba(var(--navy), 1);
    --bs-btn-hover-color: #fdfdfd;
    --bs-btn-active-color: #fdfdfd;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-font-weight: 700;
}

.game-tools .btn-save.active {
    background:rgba(var(--mint), 1);
    --bs-btn-font-color: #fdfdfd;
}