.strolly-page .app-headline {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.strolly-page .title-description {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.strolly-page .title-description h1 {
    font-family: 'Alegreya', serif;
    font-size: 2.6rem;
    font-weight: 400;
    color: var(--pink);
    
    margin: 0;
    padding: 30px 0 10px 0;
}

.strolly-page .title-description p {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 200;
    padding: 0;
}

.strolly-page .app-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.strolly-page .app-icon-image {
    max-width: 120px;
}

.strolly-page .app-headline-image {
    max-width: 450px;
    padding: 20px 0;
}

.strolly-page .app-headline p {
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.8rem;
}

.strolly-page .app-feature p {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.8rem;
    display: flex;
    flex-direction: column;
}

.strolly-page .app-feature {
    display: flex;
    flex-direction: row;
    gap: 40px;
    
    padding: 30px 0;
}

.strolly-page .app-feature .app-feature-description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    padding: 40px 0;
}

.strolly-page .app-feature .feature-name {
    font-size: 1.4rem;
    padding: 20px 0;
    color: var(--pink);
}

.strolly-page .app-feature .feature-description{
    font-size: 1.1rem;
}


.strolly-page .app-feature-image {
    max-width: 300px;
}

.strolly-page .app-feature-image.dark {
    display: none;
}

@media screen and (max-width: 700px) {
    .strolly-page .title-description h1 {
        font-size: 1.9rem;
        padding: 20px 20px 6px 20px;
    }
    
    .strolly-page .title-description p {
        font-size: 1.1rem;
        padding: 0 20px 0 20px;
    }
    
    .strolly-page .app-icon-image {
        max-width: 90px;
    }
    
    .strolly-page .app-header {
        gap: 20px;
    }
    
    .strolly-page .app-headline-image {
        max-width: 320px;
        padding: 14px 0;
    }
    
    .strolly-page .app-headline p {
        font-size: 1rem;
        font-weight: 300;
        padding: 0 20px 0 20px;
    }
    
    .strolly-page .app-feature {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 20px 20px 0 20px;
    }
    
    .strolly-page .app-feature-image {
        max-width: 200px;
    }
    
    .strolly-page .app-feature p {
        font-size: 1rem;
        padding: 0;
        text-align: center;
    }
    
    .strolly-page .app-feature .app-feature-description {
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 0;
    }
    
    .strolly-page .app-feature .feature-name {
        font-size: 1.2rem;
        padding: 4px 0 10px 0;
    }
}


@media (prefers-color-scheme: dark) {
    .strolly-page .app-feature-image.light {
        display: none;
    }
    
    .strolly-page .app-feature-image.dark {
        display: block;
    }
}

.newsletter-archive-page h1 {
    font-family: 'Alegreya', serif;
    color: var(--purple);
    font-size: 2.4rem;
    font-weight: 400;
    margin: 0;
    padding: 10px 0 10px 0;
}

.newsletter-archive-page ul {
    list-style-type: none;
    padding-inline-start: 0;
    margin: 0;
}

.newsletter-archive-page a {
    color: var(--body-text-color);
    text-decoration: none;
}

.newsletter-archive-page a.read-link {
    color: var(--yellow);
    text-transform: uppercase;
    font-size: 0.9rem;
}

.newsletter-archive-page li {
    padding: 24px 0 24px 0;
}

.newsletter-archive-page h2 {
    margin: 0;
    padding: 0;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--secondary-blue);
}

.newsletter-archive-page p {
    margin: 0;
    padding: 12px 0 8px 0;
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.7rem;
}

.newsletter-archive-page .subscribe-section {
    margin: 20px 0 20px 0;
    padding: 30px 0 30px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    border-top: 1px solid var(--light-border);
}

.newsletter-archive-page .subscribe-section h2 {
    color: var(--blue);
    font-size: 1.3rem;
    font-weight: 300;
    text-align: center;
}

.newsletter-archive-page form .input-button {
    background-color: var(--code-background);
    
    border-radius: 10px;
}

.newsletter-archive-page form input {
    width: 340px;
    
    background-color: var(--code-background);
    
    border: 1px solid var(--code-background);
    border-radius: 10px;
    
    padding: 10px 10px 10px 10px;
    
    color: var(--body-text-color);
    font-size: 1rem;
    font-weight: 300;
}

.newsletter-archive-page form input:focus {
    border: 1px solid var(--code-background);
    outline: none !important;
    outline-style: none;
}

.newsletter-archive-page form input::placeholder {
    color: var(--secondary-text-color);
    font-size: 1rem;
    opacity: 0.7;
    font-weight: 300;
    
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.newsletter-archive-page button {
    background: var(--button-color);
    border: none;
    border-radius: 8px;
    padding: 8px 12px 8px 12px;
    margin: 0 4px 0 4px;
    
    color: black;
    font-size: 0.9rem;
    font-weight: 500;
    
    cursor: pointer;
}

.newsletter-archive-page .subscribe-section a.rss {
    display: flex;
    gap: 8px;
    justify-content: center;
    
    color: var(--secondary-blue);
    font-weight: 400;
    font-size: 0.98rem;
}

.newsletter-archive-page .subscribe-section a.rss svg {
    width: 14px;
    height: 14px;
    fill: var(--secondary-blue);
}

.newsletter-archive-page .subscribe-section a.rss svg path{
    fill: var(--secondary-blue); !important;
}

@media screen and (max-width: 700px) {
    .newsletter-archive-page {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .newsletter-archive-page h1 {
        font-size: 2.2rem;
    }
    
    .newsletter-archive-page h2 {
        font-size: 1.07rem;
        font-weight: 500;
    }
    
    .newsletter-archive-page p {
        font-size: 0.98rem;
        line-height: 1.4rem;
    }
    
    .newsletter-archive-page .article-metadata {
        font-size: 0.84rem;
    }
    
    .newsletter-archive-page .article-metadata .post-date {
        font-size: 0.84rem;
    }
    
    .newsletter-archive-page a.read-link {
        font-size: 0.8rem;
    }
    
    .newsletter-archive-page .subscribe-section {
        gap: 10px;
        margin-bottom: 0;
    }
    
    .newsletter-archive-page .subscribe-section h2 {
        font-size: 1.1rem;
    }
    
    .newsletter-archive-page form .input-button {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: var(--background-color);
    }
    
    .newsletter-archive-page form input {
        width: 320px;
        margin: 10px 0 20px 0;
    }
    
    .newsletter-archive-page button {
        width: 160px;
    }
    
    .newsletter-archive-page .subscribe-section a.rss {
        margin-top: 10px;
        font-size: 0.9rem;
    }
}
.newsletter-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
    margin: 40px 0;
    padding: 26px 0 16px 0;
    
    border: 1px solid var(--blue);
    border-radius: 10px;
}

.newsletter-banner p {
    margin: 0;
}

.newsletter-banner .headline {
    padding: 0 10px 10px 10px;
    font-size: 1.5rem;
    color: var(--blue);
}

.newsletter-banner .description {
    padding: 0px 10px 20px 10px;
    max-width: 800px;
    font-size: 1.1rem;
    line-height: 1.6rem;
    
    font-weight: 300;
}

.newsletter-banner form .input-button {
    background-color: var(--code-background);
    
    border-radius: 10px;
}

.newsletter-banner form input {
    width: 310px;
    
    background-color: var(--code-background);
    
    border: 1px solid var(--code-background);
    border-radius: 10px;
    
    padding: 10px 10px 10px 10px;
    
    color: var(--body-text-color);
    font-size: 1rem;
    font-weight: 300;
}

.newsletter-banner form input:focus {
    border: 1px solid var(--code-background);
    outline: none !important;
    outline-style: none;
}

.newsletter-banner form input::placeholder {
    color: var(--secondary-text-color);
    font-size: 1rem;
    opacity: 0.7;
    font-weight: 300;
    
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.newsletter-banner button {
    background: var(--button-color);
    border: none;
    border-radius: 8px;
    padding: 8px 12px 8px 12px;
    margin: 0 4px 0 4px;
    
    color: black;
    font-size: 0.9rem;
    font-weight: 500;
    
    cursor: pointer;
}

@media screen and (max-width: 700px) {
    .newsletter-banner {
        padding: 18px 0 0px 0;
    }
    
    .newsletter-banner .headline {
        padding: 0 10px 10px 10px;
        font-size: 1.12rem;
    }
    
    .newsletter-banner .description {
        padding: 0px 10px 20px 10px;
        font-size: 0.95rem;
        line-height: 1.5rem;
    }
    
    .newsletter-banner form .input-button {
        display: flex;
        flex-direction: column;
        background-color: var(--background-color);
    }
    
    .newsletter-banner form input {
        width: 260px;
        font-size: 0.9rem;
        margin: 0 0 10px 0;
    }
    
    .newsletter-banner form input::placeholder {
        font-size: 0.9rem;
    }
    
    .newsletter-banner button {
        background: var(--background-color);
        
        font-size: 0.86rem;
        text-transform: uppercase;
        font-weight: 500;
        color: var(--yellow);
        padding: 4px 0 4px 0;
    }
    
    .article-page .newsletter-banner {
        margin: 30px 20px 30px 20px;
    }
    
    .article-page .newsletter-banner p.headline {
        font-weight: 500;
    }
}

@media screen and (max-width: 340px) {
    .newsletter-banner form input {
        width: 220px;
    }
}
.form-root {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.form-root .form-message {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;

    margin: 0
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.8rem;
    
    position: absolute;
}

.form-message-container {
    margin: 10px 10px 10px 10px;
    display: flex;
    justify-content: center;
}

.form-root .form-message.form-error {
    color: var(--red);
}

.form-root .form-message.form-success {
    color: var(--green);
}

.form-root .form-message:target {
    padding-top: 260px!important;
    margin-top: -260px!important;
    vertical-align: top;
    opacity: 1;
    visibility: visible;
}

@media screen and (max-width: 700px) {
    .form-root .form-message {
        font-size: 0.7rem;
        padding: 0 8px 0 8px;
    }
    
    .newsletter-banner .form-message-container {
        width: 100%;
        margin: 0px 10px 20px 10px;
        
        display: flex;
        justify-content: flex-end;
    }
}
.article-page.newsletter hr {
    border: 0.4px solid var(--light-border);
    margin-top: 36px;
}

.article-page.newsletter h2 {
    color: var(--secondary-purple);
    font-size: 1.7rem;
}

.article-page.newsletter h3 a {
    color: var(--secondary-blue);
}

.article-page.newsletter p.blog-description {
    padding-top: 0;
}

.article-page.newsletter .image-description {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 20px 0;
}

.article-page.newsletter .image-description img {
    margin: 0;
    max-width: 100%;
    object-fit: contain;
}

.article-page.newsletter .image-description p {
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4rem;
    font-weight: 300;
    text-align: center;
    color: var(--secondary-text-color);
}

.newsletter.subscribe-section {
    margin: 20px 0 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.newsletter.subscribe-section h2 {
    color: var(--blue);
    font-size: 1.3rem;
    font-weight: 300;
    text-align: center;
}

.newsletter.subscribe-section .privacy {
    padding: 10px 10px 10px 10px;
    max-width: 600px;
    font-size: 0.9rem;
    line-height: 1.6rem;
    
    font-weight: 200;
    text-align: center;
}

.newsletter.subscribe-section .privacy p {
    margin: 0;
}

.newsletter.subscribe-section form .input-button {
    background-color: var(--code-background);
    
    border-radius: 10px;
}

.newsletter.subscribe-section form input {
    width: 340px;
    
    background-color: var(--code-background);
    
    border: 1px solid var(--code-background);
    border-radius: 10px;
    
    padding: 10px 10px 10px 10px;
    
    color: var(--body-text-color);
    font-size: 1rem;
    font-weight: 300;
}

.newsletter.subscribe-section form input:focus {
    border: 1px solid var(--code-background);
    outline: none !important;
    outline-style: none;
}

.newsletter.subscribe-section form input::placeholder {
    color: var(--secondary-text-color);
    font-size: 1rem;
    opacity: 0.7;
    font-weight: 300;
    
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.newsletter.subscribe-section button {
    background: var(--button-color);
    border: none;
    border-radius: 8px;
    padding: 8px 12px 8px 12px;
    margin: 0 4px 0 4px;
    
    color: black;
    font-size: 0.9rem;
    font-weight: 500;
    
    cursor: pointer;
}

.newsletter.subscribe-section a.rss {
    display: flex;
    gap: 8px;
    justify-content: center;
    
    color: var(--secondary-blue);
    font-weight: 400;
    font-size: 0.98rem;
    text-decoration: none;
    
    margin-top: 40px;
}

.newsletter.subscribe-section a.rss svg {
    width: 14px;
    height: 14px;
    fill: var(--secondary-blue);
}

.newsletter.subscribe-section a.rss svg path{
    fill: var(--secondary-blue); !important;
}

@media screen and (max-width: 700px) {
    .article-page.newsletter h1 {
        font-size: 2rem;
        padding: 10px 20px;
    }

    .article-page.newsletter .image-description {
        padding: 0 20px;
    }
    
    .newsletter.subscribe-section {
        padding: 0 20px;
        margin: 20px 0;
    }
    
    .newsletter.subscribe-section h2 {
        font-size: 1.1rem;
    }
    
    .newsletter.subscribe-section form .input-button {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: var(--background-color);
    }
    
    .newsletter.subscribe-section form input {
        width: 320px;
        margin: 10px 0 20px 0;
    }
    
    .newsletter.subscribe-section button {
        width: 160px;
    }
    
    .newsletter.subscribe-section .privacy {
        padding: 10px 0;
        font-size: 0.8rem;
        line-height: 1.5rem;
    }
    
    .newsletter.subscribe-section a.rss {
        font-size: 0.9rem;
    }
}
.newsletter-page .newsletter-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
    margin: 40px 0 0 0;
    padding: 10px 0 10px 0;
}


.newsletter-page .newsletter-section p {
    margin: 0;
}

.newsletter-page .newsletter-section .headline {
    padding: 0 10px 20px 10px;
    font-size: 1.6rem;
    color: var(--blue);
}

.newsletter-page .newsletter-section .description {
    padding: 0px 10px 20px 10px;
    max-width: 800px;
    font-size: 1.1rem;
    line-height: 1.6rem;
    
    font-weight: 300;
}

.newsletter-page .newsletter-section .privacy {
    padding: 10px 10px 10px 10px;
    max-width: 600px;
    font-size: 0.9rem;
    line-height: 1.6rem;
    
    font-weight: 200;
}

.newsletter-page .newsletter-svg {
    padding: 14px 0;
}

.newsletter-page .newsletter-svg svg {
    width: 230px;
}

.newsletter-page .newsletter-section form .input-button {
    background-color: var(--code-background);
    
    border-radius: 10px;
}

.newsletter-page .newsletter-section form input {
    width: 340px;
    
    background-color: var(--code-background);
    
    border: 1px solid var(--code-background);
    border-radius: 10px;
    
    padding: 10px 10px 10px 10px;
    
    color: var(--body-text-color);
    font-size: 1rem;
    font-weight: 300;
}

.newsletter-page .newsletter-section form input:focus {
    border: 1px solid var(--code-background);
    outline: none !important;
    outline-style: none;
}

.newsletter-page .newsletter-section form input::placeholder {
    color: var(--secondary-text-color);
    font-size: 1rem;
    opacity: 0.7;
    font-weight: 300;
    
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.newsletter-page .newsletter-section button {
    background: var(--button-color);
    border: none;
    border-radius: 8px;
    padding: 8px 12px 8px 12px;
    margin: 0 4px 0 4px;
    
    color: black;
    font-size: 0.9rem;
    font-weight: 500;
    
    cursor: pointer;
}

.newsletter-page .archive-link-section {
    display: flex;
    justify-content: center;
}

.newsletter-page .archive-link-section a {
    text-decoration: none;
    color: var(--yellow);
    font-weight: 400;
    font-size: 1rem;
}

@media screen and (max-width: 700px) {
    .newsletter-page .newsletter-section {
        margin: 30px 0 0 0;
        padding: 0 6px;
    }
    
    .newsletter-page .archive-link-section {
        margin-bottom: 30px;
    }
    
    .newsletter-page .archive-link-section a {
        font-size: 0.9rem;
    }
    
    .newsletter-page .newsletter-section .headline {
        font-size: 1.5rem;
    }
    
    .newsletter-page .newsletter-section .description {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    
    .newsletter-page .newsletter-section form .input-button {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: var(--background-color);
    }
    
    .newsletter-page .newsletter-section form input {
        width: 320px;
        margin: 10px 0 20px 0;
    }
    
    .newsletter-page .newsletter-section button {
        width: 160px;
    }
    
    .newsletter-page .newsletter-section .privacy {
        font-size: 0.8rem;
        line-height: 1.4rem;
        
        font-weight: 200;
    }
    
    .newsletter-page .newsletter-svg svg {
        width: 190px;
    }
}

@media screen and (max-width: 340px) {
    .newsletter-page .newsletter-section form input {
        width: 260px;
    }
}
.about-page h1 {
    font-family: 'Alegreya', serif;
    font-size: 3rem;
    font-weight: 400;
    color: var(--purple);
    
    margin: 0;
    padding: 10px 0 10px 0;
}

.about-nilcoalescing-description {
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.5em;
    color: var(--secondary-text-color);
}

p.about-nilcoalescing-description {
    margin: 0;
}

.about-matt-natalia {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 0 0 0;
}

.about-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-matt-natalia h2 {
    font-family: 'Alegreya', serif;
    color: var(--purple);
    text-align: center;
    font-size: 1.7rem;
    font-weight: 400;
    padding: 20px 0 10px 0;
    margin: 0
}

.about-photo-container {
    display: grid;
    align-items: center;
    justify-items: center;
}

.about-photo-container > * {
    grid-area: 1/1/1/1;
}

.about-photo-container img {
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    
    width: 140px;
}

.about-photo-container svg {
    width: 160px;
    height: 160px;
}

.about-links {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.about-links svg {
    fill: var(--yellow);
    width: 24px;
    height: 24px;
}

.about-matt-natalia p {
    text-align: center;
    margin: 0;
    
    font-size: 1.2rem;
    line-height: 2.6rem;
    font-weight: 300;
    
    padding: 10px 24px 60px 24px;
}

.about-matt-natalia p a {
    text-decoration: none;
    color: var(--yellow);
    font-weight: 400;
}

@media screen and (max-width: 700px) {
    .about-page {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .about-page h1 {
        font-size: 2.4rem;
    }
    
    .about-matt-natalia p {
        font-size: 1.1rem;
        line-height: 2.4rem;
        padding: 10px 0 40px 0;
    }

    .about-photo-container img {
        width: 120px;
    }
    
    .about-photo-container svg {
        width: 140px;
        height: 140px;
    }
    
}
.activity-page h1 {
    font-family: 'Alegreya', serif;
    font-size: 3rem;
    font-weight: 400;
    color: var(--purple);
    
    margin: 0;
    padding: 10px 0 10px 0;
}

.activity-page .activity-description {
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.5em;
    color: var(--secondary-text-color);
}

p.activity-description {
    margin: 0;
}

.activity-page .latest-news {
    padding-top: 30px;
}

.activity-page .news-update {
    margin: 10px 0 30px 0;
    padding: 10px 0 14px 0;
    border: none;
    border-radius: 0;
}

.news-update {
    display: flex;
    flex-direction: column;
}

.news-update .news-update-container {
    display: flex;
    gap: 40px;
    align-items: center;
}


.activity-image img {
    width: 220px;
    border-radius: 12px;
    
    border: 1px solid var(--tertiary-text-color);
}

.latest-news a.activity-link {
    text-decoration: none;
    color: var(--yellow);
    text-transform: uppercase;
    font-size: 1rem;
}

@media (prefers-color-scheme: light) {
    .latest-news a.activity-link {
        font-weight: 500;
    }
    
    .activity-image img {
        border: 1px solid var(--tertiary-text-color);
    }
}

@media screen and (max-width: 700px) {
    .activity-page {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .activity-page h1 {
        font-size: 2.4rem;
    }
    
    .news-update .news-update-container {
        flex-direction: column;
        gap: 12px;
        margin-top: 20px;
    }
    
    .activity-image {
        display: flex;
        justify-content: center;
    }
    
    .activity-image a {
        width: 100%;
    }
    
    .activity-image img {
        width: 100%;
    }
    
    .latest-news a.activity-link {
        font-size: 0.9rem;
    }
}
.apps-page h1 {
    font-family: 'Alegreya', serif;
    font-size: 3rem;
    font-weight: 400;
    color: var(--purple);
    
    margin: 0;
    padding: 10px 0 10px 0;
}

.apps-page-description {
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.5em;
    color: var(--secondary-text-color);
}

p.apps-page-description {
    margin: 0;
}

.app-section {
    padding: 30px 0 30px 0;
    margin: 60px 0 40px 0;
}

.apps-page .website-link {
    color: var(--yellow);
    font-weight: 500;
    font-size: 1rem;
    text-transform: uppercase;
}

.app-image-description {
    display: flex;
    align-items: center;
    gap: 40px;
}

.app-title-description {
    padding: 0 0 20px 0;
}

.apps-page h2 {
    font-size: 1.7rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    margin: 0;
}

.app-tagline {
    margin: 0;
    padding: 8px 0 20px 0;
    font-size: 1rem;
    font-weight: 300;
}

.app-description {
    font-size: 1rem;
    line-height: 1.8rem;
    font-weight: 300;
    
    padding: 20px 0 20px 0;
    margin: 0;
}

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

.app-image {
    margin-left: -20px;
}

.app-image img {
    width: 360px;
}

.app-header.narrow {
    display: none;
}

.app-header.wide {
    display: block;
}

.app-description.narrow {
    display: none;
}

@media screen and (max-width: 800px) {
    .app-description.wide {
        display: none;
    }
    
    .app-description.narrow {
        display: block;
    }
    
    .app-image {
        margin: 0px 0 0px 0;
    }
    
    .app-image img {
        width: 300px;
    }
    
    .app-title-description {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    
    .apps-page .website-link {
        font-size: 0.9rem;
    }
    
    .apps-page h2 {
        font-size: 1.3rem;
    }
    
    .app-description {
        font-size: 1rem;
        line-height: 1.7rem;
        padding: 20px 0 10px 0;
    }
}

@media screen and (max-width: 700px) {
    .apps-page {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .apps-page h1 {
        font-size: 2.4rem;
    }
    
    .app-tagline {
        margin: 0;
        padding: 8px 0 0px 0;
        font-size: 0.9rem;
        font-weight: 300;
    }
    
    .app-header.wide {
        display: none;
    }
    
    .app-header.narrow {
        display: block;
        padding: 34px 0 20px 0;
    }
    
    .app-section {
        margin: 10px 0 30px 0;
        text-align: center;
        padding: 10px 0 20px 0;
    }
    
    .app-image-description {
        flex-direction: column;
        gap: 0;
    }
    
    .app-title-description {
        padding: 10px 0 0 0px;
    }
    
    .app-image {
        margin: 10px 0 10px 0;
    }
    
    .app-image img {
        width: 80%;
        max-width: 320px;
    }
    
    .app-image.encode-decode img {
        width: 100%;
        max-width: 360px;
    }
    
    .app-description.wide {
        display: block;
        padding: 12px 0 12px 0;
    }
    
    .app-description.narrow {
        display: none;
    }
}
.article-images {
    display: grid;
    grid-template-columns: max-content;
    grid-template-rows: max-content;
    
    justify-content: center;
    align-items: center;
    
    max-height: 400px;
    overflow: hidden;
    margin: 10px 0;
}

.mac-images {
    display: grid;
    grid-template-columns: max-content;
    grid-template-rows: max-content;
    
    justify-content: center;
    align-items: center;
    
    overflow: hidden;
    margin: 10px 0;
}

.xcode-images img {
    max-width: 100%;
    margin: 20px 0;
}

.equal-images {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(33.33%, 1fr) );
    grid-template-rows: max-content;
    
    justify-items: center;
    align-items: center;
    
    max-height: 400px;
    overflow: hidden;
    
    margin: 10px 0;
}

.article-images.high {
    max-height: 600px;
}

.article-images.huge {
    max-width: 100%;
    max-height: 900pt;
}

.article-images img {
    width: 90vw;
    max-width: 900px;
}

.mac-images img {
    width: 100vw;
    max-width: 900px;
}

.equal-images img {
    width: 100%;
    max-width: 470px;
}

.article-images img.wide {
    width: 90vw;
    max-width: 900px;
}

.article-images img.narrow {
    display: none;
}

.article-images img.only {
    width: 90vw;
    max-width: 900px;
}

.article-images img.rounded {
    border-radius: 12px
}

.full-images {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(33.33%, 1fr) );
    grid-template-rows: max-content;
    
    justify-items: center;
    align-items: center;
}

.full-images img {
    width: 100%;
    max-width: 260px;
    
    margin: 30px 0;
}

.article-page p.image-hint {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    line-height: 1rem;
    
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--secondary-text-color);
    padding: 0 10px;
    margin: 0 0 16px 0;
}

p.image-hint code {
    font-size: 0.85rem;
    margin: 0 4px;
}

p.image-hint a {
    margin: 0 4px;
}

.phone-images {
    display: grid;
    grid-template-columns: max-content;
    grid-template-rows: max-content;
    
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin: 10px 0;
}

.phone-images img {
    max-width: 100vw;
}

.adaptive-phone-images .narrow {
    display: none;
}

@media screen and (max-width: 1000px) {
    .article-images img.only {
        width: 100vw;
    }
}

@media screen and (max-width: 700px) {
    .article-images {
        max-height: 260px;
    }
    
    .article-images img.wide {
        display: none;
    }
    
    .article-images img.narrow {
        width: 100vw;
        display: inherit;
    }
    
    .hide-narrow {
        display: none;
    }
    
    .xcode-images img {
        max-width: 100vw;
        margin: 16px 0;
    }
}

@media screen and (max-width: 700px) {
    .adaptive-phone-images .narrow {
        display: block;
    }
    
    .adaptive-phone-images .wide {
        display: none;
    }
}

.article-metadata {
    color: var(--secondary-text-color);
    font-weight: 300;
    font-size: 0.9rem;
    
    margin-top: 8px;
}

.article-metadata .post-date {
    font-size: 0.9rem;
}

.article-metadata a {
    text-decoration: none;
    color: var(--secondary-text-color);
    padding-right: 10px;
    border-right: 1px solid var(--tertiary-text-color);
    
    margin-right: 10px;
}

.article-metadata a:hover {
    color: var(--yellow);
}
.article-page p.article-note {
    background-color: var(--banner-background);
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 1rem;
    margin-bottom: 20px;
}

.article-page p.article-note code {
    background-color: var(--background-color);
    font-weight: 300;
    font-size: 0.9rem;
}
.article-page {
    padding-top: 14px;
}

.article-page h1 {
    font-family: 'Alegreya', serif;
    font-size: 2.3rem;
    font-weight: 400;
    color: var(--purple);
    
    margin: 0;
    padding: 10px 0 10px 0;
    
    line-height: 2.5rem;
}

.article-page h2 {
    padding: 30px 0 10px 0;
    font-size: 1.6rem;
    font-weight: 400;
    margin: 0;
}

.article-page h3 {
    padding: 20px 0 10px 0;
    font-size: 1.4rem;
    font-weight: 400;
    margin: 0;
}

.article-page p {
    font-size: 1.2rem;
    line-height: 1.8rem;
    font-weight: 300;
    padding: 10px 0;
    margin: 0;
}

.article-page article ul {
    font-weight: 300;
    line-height: 1.8rem;
    font-size: 1.2rem;
}

.article-page ol {
    font-weight: 300;
    line-height: 1.8rem;
    font-size: 1.2rem;
    padding-left: 20px
}

.article-page article a {
    color: var(--yellow);
    text-decoration: none;
    font-weight: 400;
}

.article-page .tags-list {
    padding: 10px 0 6px 0;
}

/* Shift possition start of selected target */
.anchor-container:target {
    padding-top: 70px!important;
    margin-top: -40px!important;
    vertical-align: top;
    display: inline-block; /* required for webkit browsers */
}

@media screen and (max-width: 700px) {
    .article-page h1 {
        font-size: 2.1rem;
        padding: 10px 0 0 0;
    }
    
    .article-page .tags-list {
        padding: 10px 20px 6px 20px;
    }
    
    .article-page h1 {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .article-page h2 {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .article-page h3 {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .article-page p {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .article-page article ul {
        padding-left: 40px;
        padding-right: 20px;
    }
    
    .article-page ol {
        padding-left: 40px;
        padding-right: 20px;
    }
}

@media screen and (max-width: 600px) {
    .article-page h2 {
        font-size: 1.5rem;
    }
}
.articles-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 0 0 16px 0;
}

ul.articles-list {
    list-style-type: none;
    padding-inline-start: 0;
    margin: 0 0 0 0;
}

.articles-list li {
    background-color: var(--article-list-background);
    border-radius: 8px;
}

.articles-list .article {
    padding: 8px 14px 16px 14px;
}

.articles-list h3 {
    margin: 0;
    padding: 8px 0 6px 0;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.7rem;
}

.articles-list a.article-title {
    text-decoration: none;
    color: var(--body-text-color);
}

.articles-list a.article-description {
    text-decoration: none;
    color: var(--body-text-color);
}

.articles-list p {
    font-size: 1.1rem;
    line-height: 1.5em;
    font-weight: 300;
    margin: 0;
}

.tags-and-icon {
    display: flex;
    justify-content: space-between;
}

.tags-and-icon svg {
    fill: var(--secondary-text-color);
    opacity: 0.6;
}

.article-svg svg {
    width: 20px;
}

.tip-svg svg {
    width: 24px;
    height: 24px;
}

@media screen and (max-width: 700px) {
    .articles-list {
        grid-template-columns: auto;
    }
}

@media screen and (max-width: 540px) {
    .articles-list h3 {
        font-size: 1.1rem;
    }
    
    .articles-list p {
        font-size: 1rem;
    }
}
.author-metadata {
    color: var(--secondary-text-color);
    font-weight: 300;
    font-size: 1rem;
    
    padding-bottom: 10px;
    
    display: flex;
    align-items: center;
    
    margin-top: 10px;
}

.author-metadata a {
    text-decoration: none;
    color: var(--yellow);
    
    margin-bottom: 4px;
    font-weight: 400;
}

.author-metadata .name-and-info {
    display: flex;
    flex-direction: column;
}

.author-metadata .name-and-info .author-info {
    font-size: 0.9rem;
}

.author-metadata img {
    height: 60px;
    width: 60px;
    
    margin-right: 10px;
}

@media screen and (max-width: 700px) {
    .author-metadata {
        padding-left: 20px;
        padding-right: 20px;
    }
}
.blog-page h1 {
    font-family: 'Alegreya', serif;
    font-size: 3rem;
    font-weight: 400;
    color: var(--purple);
    
    margin: 0;
    padding: 10px 0 10px 0;
}

.blog-page h2 {
    font-family: 'Alegreya', serif;
    font-size: 2rem;
    font-weight: 400;
    color: var(--purple);
    
    margin: 0;
    padding: 20px 0 10px 0;
}

.social-callout a {
    color: var(--yellow);
    text-decoration: none;
    font-weight: 400;
}

.blog-navigation {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    
    background-color: var(--article-list-background);
    border-radius: 8px;
    
    padding: 6px 0 10px 0;
}

.pink-tags-svg {
    height: 34px;
    padding-right: 4px;
}

.blue-tags-svg {
    height: 34px;
    padding-left: 4px;
}

.pink-tags-svg svg {
    fill: var(--pink);
}

.blue-tags-svg svg {
    fill: var(--blue);
}

.blog-navigation svg {
    width: 30px;
}

.blog-navigation .tag {
    padding: 6px 8px 6px 8px;
    margin: 4px 8px 4px 0;
}

.blog-navigation .selected-tag {
    background-color: var(--selected-tag-background);
}

.blog-navigation .tags-list {
    justify-content: center;
}

.show-all-link {
    font-size: 0.9rem;
    font-weight: 400;
    text-transform: uppercase;
}

a.show-all-link {
    color: var(--yellow);
    text-decoration: none;
}

.blog-page .show-all-link {
    font-size: 1rem;
}

.show-all-posts {
    margin: 0 0 0 4px;
}

.tag-detail-page .tag-intro {
    padding: 16px 0 10px 0;
    font-size: 1.3rem;
    font-weight: 300;
    display: flex;
    justify-content: center;
    text-align: center;
    color: var(--secondary-text-color);
}

.tag-detail-page .articles-list {
    padding: 0px 0 16px 0;
}

.tag-detail-page .show-all-tags {
    display: flex;
    justify-content: center;
    margin: 20px 0 0 0;
}

.featured-posts {
    padding-top: 10px;
}

.blog-subsection-nav {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.show-subsection-link {
    margin-right: 20px;
    text-transform: uppercase;
    
    font-size: 1rem;
    font-weight: 400;
}

.show-subsection-link.selected {
    border-bottom: solid 2px var(--yellow);
}

a.show-subsection-link {
    text-decoration: none;
    color: var(--yellow);
}

@media screen and (max-width: 700px) {
    .blog-page {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .blog-page h1 {
        font-size: 2.4rem;
    }
    
    .blog-page h2 {
        font-size: 1.7rem;
    }
    
    .blog-page .show-all-link {
        font-size: 0.9rem;
    }
    
    .tag-detail-page .show-all-link {
        font-size: 0.8rem;
    }

    .tag-detail-page .show-all-tags {
        margin: 10px 0 0 0;
    }
    
    .tag-detail-page .tag-intro {
        padding: 10px 0 6px 0;
        font-size: 1.1rem;
    }
}
.book-banner {
    display: flex;
    gap: 30px;
    align-items: center;

    padding: 18px 28px;

    margin: 40px 0 40px 0;

    background: linear-gradient(#2a2a2a, #2a2a2a) padding-box,
                linear-gradient(45deg, #5B7AD5, #9B6CE0) border-box;
    border-radius: 8px;
    border: 1px solid transparent;
    color: var(--body-text-color);
}

.book-banner .header {
    font-weight: 700;
    font-size: 1.2rem;
    text-transform: uppercase;

    background: -webkit-linear-gradient(45deg, #9B6CE0, #ff907b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.book-banner .book-title {
    font-size: 1.6rem;
    font-weight: 400;
    padding: 0;
}

.book-banner .book-subtitle {
    font-size: 1.1rem;
    font-weight: 400;
    padding: 4px 0 10px 0;
}

.book-banner .update-note {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--blue);
    margin: 4px 0 4px 0;
    padding: 0;
}

a.book-banner {
    text-decoration: none;
}

.book-banner p {
    line-height: 1.8rem;
    margin: 0;
    padding: 10px 0;
}

.book-banner ul {
    font-size: 0.9rem;
    line-height: 1.5rem;
    font-weight: 300;
}

.book-banner {
    margin: 30px 0 30px 0;
}

.article-page article a.book-banner {
    color: var(--body-text-color);
}

.article-page article .book-banner {
    margin: 30px 0 30px 0;
}

.article-page article .book-banner ul {
    font-size: 0.9rem;
    line-height: 1.5rem;
}

.book-banner ul {
    padding-inline-start: 10px;
    display: flex;
    flex-direction: column;
    list-style-type: initial;
    
    margin: 6px 0 16px 0;
    
    list-style: none;
}

.book-banner ul li::before {
    content: "✦";
    color: var(--blue);
    font-weight: bold;
    display: inline-block;
    width: 1.7rem;
    margin-left: -1em;
}

.book-banner ul li {
    margin: 2px 0;
}

.book-banner .book-image img {
    max-height: 240px;
}

@media (prefers-color-scheme: light) {
    .book-banner {
        background: linear-gradient(white, white) padding-box,
                linear-gradient(45deg, #F4718B, #9B6CE0) border-box;
        border: 2px solid transparent;
    }
}

.book-banner .book-title-narrow {
    display: none;
}

.book-banner .book-desc-narrow {
    display: none;
}

.book-banner .book-svg {
    display: none;
}

@media screen and (max-width: 700px) {
    .book-banner {
        text-align: center;
        padding: 6px 12px 6px 12px;
        justify-content: center;
    }
    
    .book-banner .book-subtitle {
        display: none;
    }
    
    .article-page article .book-banner {
        margin: 30px 20px 30px 20px;
    }
    
    .book-banner {
        margin: 30px 20px 30px 20px;
    }
    
    .book-banner .book-image {
        display: none;
    }
    
    .book-banner .book-title {
        display: none;
    }
    
    .book-banner .update-note {
        font-size: 1rem;
        font-weight: 500;
        margin: 4px 0 4px 0;
    }
    
    .book-banner .header {
        font-weight: 600;
        font-size: 1rem;
        text-transform: uppercase;
    }
    
    .book-banner .book-title-narrow {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        
        font-size: 1.4rem;
        font-weight: 400;
    }
    
    .article-page article .book-banner p {
        margin: 0;
        padding: 0px 0px;
    }
    
    .book-banner p {
        margin: 0;
        padding: 0px 0px;
    }
    
    .article-page article .book-banner p.book-title-narrow {
        padding: 10px 0 2px 0;
    }
    
    .book-banner p.book-title-narrow {
        padding: 10px 0 2px 0;
    }
    
    .book-banner ul {
        display: none;
    }
    
    .book-banner .book-desc-narrow {
        display: block;
        
        font-size: 1rem;
        font-weight: 300;
    }
    
    .article-page article .book-banner p.book-desc-narrow {
        padding: 0px 0px 4px 0;
    }
    
    .book-banner p.book-desc-narrow {
        padding: 0px 0px 4px 0;
    }
    
    .book-banner .book-svg {
        display: flex;
        justify-content: center;
    }
    
    .book-banner .book-svg svg {
        width: 30px;
        height: 30px;
        fill: var(--purple);
    }
}
.books-page h1 {
    font-family: 'Alegreya', serif;
    font-size: 3rem;
    font-weight: 400;
    color: var(--purple);
    
    margin: 0;
    padding: 10px 0 10px 0;
}

.book-section {
    margin: 30px 0 20px 0;
}

.book-image-description {
    display: flex;
    align-items: center;
}

.book-image {
    margin: 0 0 -20px -10px;
}

.book-title-description {
    padding: 0 0 0 30px;
}

.books-page h2 {
    font-size: 1.7rem;
}

.books-page a.book-title {
    color: var(--body-text-color);
}

.books-page .coming-soon {
    color: var(--purple);
    font-weight: 400;
    font-size: 1.5rem;
}

.book-description {
    font-size: 1.3rem;
    line-height: 2.2rem;
    font-weight: 300;
}

.notify-callout {
    font-size: 1.1rem;
    line-height: 2rem;
    font-weight: 300;
    padding: 10px 0 10px 0;
}

.books-page a {
    color: var(--yellow);
    text-decoration: none;
    font-weight: 400;
}

.books-page form {
    padding: 6px 0 6px 0;
    display: flex;
}

.books-page input {
    width: 40%;
    margin-right: 20px;
    background-color: var(--background-color);
    border: 1px solid var(--secondary-text-color);
    border-radius: 10px;
    padding: 10px 10px 10px 10px;
    
    color: var(--body-text-color);
    font-size: 1rem;
    font-weight: 300;
}

.books-page input:focus {
    border: 1px solid var(--body-text-color);
    outline: none !important;
    outline-style: none;
}

.books-page button {
    background: var(--button-color);
    border: none;
    border-radius: 10px;
    padding: 10px 20px 10px 20px;
    
    color: black;
    font-size: 0.9rem;
    font-weight: 400;
    text-transform: uppercase;
    
    cursor: pointer;
}

::placeholder {
    color: var(--secondary-text-color);
    opacity: 0.7;
    font-weight: 300;
}

.email-usage-info {
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.5rem;
    color: var(--secondary-text-color);
    width: 60%;
}

.email-submission-info {
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--secondary-text-color);
    width: 40%;
    display: flex;
    justify-content: center;
}

.email-submission-info .success {
    color: var(--green);
}

.email-submission-info .error {
    color: var(--red);
}

#swiftuiinuikit_notify_success {
    display: none;
}

#swiftuiinuikit_notify_success:target {
    display: block;
}

#swiftuiinuikit_notify_error {
    display: none;
}

#swiftuiinuikit_notify_error:target {
    display: block;
}

@media screen and (max-width: 700px) {
    .books-page {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .books-page h1 {
        font-size: 2.4rem;
    }
    
    .book-section {
        margin: 10px 0 10px 0;
        text-align: center;
    }
    
    .book-image-description {
        flex-direction: column;
    }
    
    .book-image {
        margin: 0 0 -20px 0px;
    }
    
    .book-image img {
        width: 220px;
    }
    
    .book-title-description {
        padding: 10px 0 0 0px;
    }
    
    .books-page h2 {
        font-size: 1.4rem;
    }
    
    .books-page .coming-soon {
        font-size: 1.3rem;
    }
    
    .book-description {
        font-size: 1.1rem;
    }
    
    .notify-callout {
        font-size: 1rem;
        line-height: 1.9rem;
    }
    
    .books-page form {
        flex-direction: column;
        align-items: center;
        padding: 0;
    }
    
    .email-submission-info {
        width: 100%;
        margin: 0 0 6px 0;
    }
    
    .books-page input {
        width: 90%;
        margin: 0 0px 20px 0px;
        
        font-size: 0.9rem;
    }
    
    .books-page button {
        font-size: 0.8rem;
        font-weight: 400;
        
        padding: 8px 20px 8px 20px;
    }
    
    .email-usage-info {
        font-size: 0.8rem;
        line-height: 1.4rem;
        width: 100%;
    }
}
pre {
    background-color: var(--code-background);
    border-radius: 8px;
    margin: 12px 0 16px 0;
}

pre code {
    font-family: 'Roboto Mono', monospace;
    color: var(--secondary-text-color);
    line-height: 1.4em;
    font-size: 1em;
    
    display: block;
    overflow-x: auto;
    white-space: pre;
    -webkit-overflow-scrolling: touch;
    padding: 20px 16px;
}

pre code .keyword {
    color: var(--pink);
}

pre code .type {
    color: var(--purple);
}

pre code .call {
    color: var(--blue);
}

pre code .property {
    color: var(--green);
}

pre code .number {
    color: var(--red);
}

pre code .string {
    color: var(--orange);
}

pre code .comment {
    color: var(--code-comment);
    font-size: 0.9rem;
}

pre code .dotAccess {
    color: var(--lightGreen);
}

pre code .preprocessing {
    color: var(--brown);
}

p code {
    background-color: var(--code-in-paragraph);
    border-radius: 4px;
    padding: 0px 4px;
    
    font-family: 'Roboto Mono', monospace;
    font-weight: 300;
    font-size: 1rem;
}

ul code {
    background-color: var(--code-in-paragraph);
    border-radius: 4px;
    padding: 0px 4px;
    
    font-family: 'Roboto Mono', monospace;
    font-weight: 300;
    font-size: 1rem;
}

ol code {
    background-color: var(--code-in-paragraph);
    border-radius: 4px;
    padding: 0px 4px;
    
    font-family: 'Roboto Mono', monospace;
    font-weight: 300;
    font-size: 1rem;
}

@media screen and (max-width: 700px) {
    pre {
        border-radius: 0;
    }
    
    pre code {
        font-size: 0.9em;
        padding: 12px 20px;
    }
}
footer {
    box-sizing: border-box;
    margin: 30px 0 20px 0;
    display: flex;
    justify-content: space-between;
    color: var(--secondary-text-color);
    align-items: flex-end;
    
    white-space: nowrap;
    flex-wrap: wrap;
    line-height: 1.6rem;
}

.footer-links {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.footer-links a {
    color: var(--secondary-text-color);
    text-decoration: none;
    font-weight: 300;
    font-size: 1rem;
    margin-right: 20px;
}

@media screen and (max-width: 700px) {
    footer {
        padding-left: 20px;
        padding-right: 20px;
        
        margin: 30px 0 10px 0;
    }
}

@media screen and (max-width: 374px) {
    .footer-links a {
        font-size: 0.9rem;
    }
}

.footer-rss-link div {
    display: flex;
    align-items: center;
    
    height: 100%;
}

.footer-links svg {
    fill: var(--secondary-text-color);
    width: 20px;
}

.footer-copyright {
    font-size: 0.8rem;
    font-weight: 300;
    opacity: 0.7;
    display: flex;
    align-items: flex-end;
    line-height: 1.4rem;
}
.github-banner {
    font-size: 1rem;
    font-weight: 400;
    padding: 16px 0;
    
    border-radius: 8px;
    border: 1px solid var(--purple-border);
    
    margin: 18px 0 10px 0;
    
    text-align: center;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    line-height: 1.5rem;
}

.github-banner p {
    margin: 0;
}

.github-banner .heart-svg {
    padding: 4px 8px 0 8px;
    height: 24px;
}

.github-banner svg {
    fill: var(--purple-border);
}

.github-banner a {
    color: var(--yellow);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

@media screen and (max-width: 600px) {
    .github-banner {
        font-size: 0.9rem;
        padding: 14px 0;
    }
    
    .github-banner .heart-svg {
        padding: 2px 8px 0 8px;
        height: 22px;
    }

    .github-banner svg {
        fill: var(--purple-border);
        width: 22px;
        height: 22px;
    }
}
header {
    position: fixed;
    top: 0;
    width: 100%;
    
    display: flex;
    justify-content: center;
    z-index: 100;
}

header nav {
    max-width: 900px;
    width: 100%;
}

@media (prefers-color-scheme: light) {
    .site-navigation-link {
        font-weight: 600;
    }
}

@media screen and (max-width: 940px) {
    header nav {
        box-sizing: border-box;
        padding: 0 16px 0 16px;
    }
}

.site-navigation-links {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

ul.site-navigation-links {
    list-style-type: none;
    padding-inline-start: 0;
}

.site-navigation-link {
    margin-right: 20px;
    text-transform: uppercase;
    color: var(--header-text-color);
    font-weight: 700;
}

@media screen and (max-width: 700px) {
    .site-navigation-link {
        font-weight: 400;
    }
}

.site-navigation-link.selected {
    border-bottom: solid 2px var(--header-text-color);
}

a.site-navigation-link {
    text-decoration: none;
}

header.inverted {
    background-color: var(--header-inverted-background);
}

header.inverted .site-navigation-link  {
    color: var(--header-inverted-text-color);
}

header.inverted .site-navigation-link.selected {
    border-bottom: solid 2px var(--header-inverted-text-color);
}
.nilcoalescing-header-description-image-large {
    display: grid;
    grid-template-columns: auto max-content;
    padding: 40px 0 70px 0;
}

.nilcoalescing-header-description-image-small {
    display: none;
}

.nilcoalescing-header-description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    padding: 0 40px 0 0;
}

.nilcoalescing-image {
    display: flex;
    align-items: center;
}

.nilcoalescing-image svg {
    height: 300px;
}

.nilcoalescing-image div {
    align-items: center;
}

.home-page h1 {
    font-family: 'Alegreya', serif;
    font-size: 4rem;
    font-weight: 400;
    color: var(--purple);
    
    margin: 0 0 0 0;
    padding-bottom: 30px;
}

.nilcoalescing-description {    
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1.6em;
}

p.nilcoalescing-description {
    margin: 0px;
}

.home-page h2 {
    font-family: 'Alegreya', serif;
    color: var(--purple);
    font-size: 2rem;
    margin: 0;
    padding: 20px 0 20px 0;
    font-weight: 400;
}

.home-page .articles-list {
    margin-top: 10px;
    margin-bottom: 10px;
}

.home-page .news-update {
    padding: 20px 0px 30px 0;
}

.home-page .latest-news p {
    padding: 10px 0 20px 0;
}

.home-page .activity-image img {
    border: none;
}

.home-page .activity-image {
    min-width: 230px;
}

.home-page .activity-image img {
    width: 230px;
}

.home-page .activity-image img.book-cover {
    width: 174px;
    margin-bottom: -30px;
}

.posts-section-description {
    padding: 0 0 20px 0;
    color: var(--secondary-text-color);
    font-size: 1.1rem;
    line-height: 1.5em;
    font-weight: 300;
    margin: 0;
}

.posts-section-description a {
    text-decoration: none;
    color: var(--yellow);
    font-weight: 400;
    font-size: 1.1rem;
}

.home-page .featured-articles {
    padding: 30px 0 20px 0;
}

.home-page .featured-articles a.show-all-posts {
    font-size: 0.9rem;
    margin: 0 0 0 4px;
    color: var(--yellow);
    text-decoration: none;
}

.home-page .show-all-link {
    font-weight: 500;
}

@media (prefers-color-scheme: dark) {
    .home-page .show-all-link {
        font-weight: 400;
    }
}

@media screen and (max-width: 900px) {

    .nilcoalescing-image svg {
        height: 260px;
    }
    
    .home-page h1 {
        font-size: 3.4rem;
    }
    
    .nilcoalescing-description {
        font-size: 1.3rem;
    }
}

@media screen and (max-width: 800px) {
    .nilcoalescing-header-description {
        padding: 10px 40px 0 0;
    }
}

@media screen and (max-width: 700px) {
    .nilcoalescing-header-description-image-large {
        display: none;
    }
    
    .nilcoalescing-header-description-image-small {
        display: block;
        padding: 20px 0 20px 0;
    }
    
    .nilcoalescing-header-image {
        display: grid;
        grid-template-columns: max-content auto;
        padding: 0 0 20px 0;
    }

    .home-page {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .nilcoalescing-image svg {
        height: 100px;
    }

    .nilcoalescing-image {
        align-items: flex-start;
    }
    
    .home-page h1 {
        font-size: 2.4rem;
        padding: 0 0 0 20px;
        
        display: flex;
        align-items: center;
    }
    
    .nilcoalescing-description {
        font-weight: 300;
    }
    
    .home-page h2 {
        font-size: 1.7rem;
        padding: 20px 0 10px 0;
    }
    
    .home-page .featured-articles {
        padding: 0px 0 10px 0;
    }
    
    .home-page .featured-articles h2 {
        padding-top: 0;
    }
    
    .home-page .latest-news {
        padding-bottom: 20px;
    }
    
    .home-page .news-update {
        padding: 20px 0px 30px 0;
        margin: 0;
    }
    
    .home-page .activity-image {
        min-width: 160px;
    }
    
    .home-page .activity-image img.book-cover {
        width: 160px;
        margin-bottom: -8px;
    }
}

@media screen and (max-width: 540px) {
    .posts-section-description {
        font-size: 1rem;
    }
}

@media screen and (max-width: 374px) {
    .home-page h1 {
        font-size: 2rem;
    }
    
    .nilcoalescing-description {
        font-size: 1.2rem;
    }
}
.integrating-swiftui-banner-narrow {
    display: none;
}

.integrating-swiftui-banner-wide {
    display: flex;
    gap: 30px;
    align-items: center;
    
    padding: 10px 28px 16px 28px;
    
    margin: 30px 0 30px 0;
    
    background: linear-gradient(#2a2a2a, #2a2a2a) padding-box,
    linear-gradient(45deg, #FF9B00, #FF6969) border-box;
    border-radius: 8px;
    border: 1px solid transparent;
    color: var(--body-text-color);
}

.integrating-swiftui-banner .description {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-grow: 1;
}

.article-page .integrating-swiftui-banner p {
    padding: 0;
}

.article-page .integrating-swiftui-banner p.tagline-price {
    font-size: 1.2rem;
    text-transform: uppercase;
    padding: 8px 0 4px 0;

    display: flex;
    justify-content: space-between;
}

.article-page .integrating-swiftui-banner .tagline {
    font-weight: 700;
    
    background: -webkit-linear-gradient(45deg, #FF9767, #FF7D67);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.article-page .integrating-swiftui-banner .tagline.promotion {
    font-weight: 700;
    font-size: 1.4rem;
    background: -webkit-linear-gradient(45deg, #9B6CE0, #ff907b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.article-page .integrating-swiftui-banner .price {
    font-size: 1.1rem;
    color: var(--secondary-text-color);
}

.article-page .integrating-swiftui-banner .price.old-price {
    text-decoration: line-through;
    padding: 0 10px 0 0;
}

.article-page .integrating-swiftui-banner .price.new-price {
    font-weight: 600;
    
    background: -webkit-linear-gradient(45deg, #9B6CE0, #ff907b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.article-page .integrating-swiftui-banner .book-title {
    font-size: 1.5rem;
    font-weight: 400;
    
    font-family: 'Alegreya', serif;
    font-size: 1.8rem;
    font-weight: 500;
    color: #FFC367;
    
    padding-right: 14px;
}

.integrating-swiftui-banner .book-author {
    font-size: 1rem;
    font-weight: 200;
    padding: 0;
    
    color: var(--light-purple);
}

.article-page .integrating-swiftui-banner p.book-description {
    font-size: 1.1rem;
    font-weight: 400;
}

.article-page .integrating-swiftui-banner p.updated-promo {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--light-purple);
}

.article-page article a.integrating-swiftui-banner ul {
    font-size: 0.9rem;
    line-height: 1.5rem;
    font-weight: 300;
    
    padding-inline-start: 10px;
    display: flex;
    flex-direction: column;
    list-style-type: initial;
    
    margin: 8px 0 10px 4px;
    list-style: none;
}

.integrating-swiftui-banner ul li::before {
    content: "✦";
    color: var(--light-purple);
    font-weight: bold;
    display: inline-block;
    width: 1.7rem;
    margin-left: -1em;
}

.integrating-swiftui-banner ul li {
    margin: 2px 0;
}

.article-page article a.integrating-swiftui-banner {
    color: var(--body-text-color);
}

.integrating-swiftui-banner .book-image img {
    max-height: 230px;
    object-fit: contain;
}

@media (prefers-color-scheme: light) {
    .integrating-swiftui-banner-wide {
        background: linear-gradient(white, white) padding-box,
        linear-gradient(45deg, #FF9B00, #FF6969) border-box;
        border: 2px solid transparent;
    }
    
    .integrating-swiftui-banner .book-author {
        font-weight: 400;
        color: #FD905E;
    }
    
    .article-page article a.integrating-swiftui-banner ul {
        font-weight: 400;
    }
    
    .article-page .integrating-swiftui-banner .price {
        color: #FF6969;
        font-weight: 300;
    }
    
    .article-page .integrating-swiftui-banner .tagline {
        font-weight: 700;
        background: -webkit-linear-gradient(45deg, #FF9767, #FF7D67);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    
    .article-page .integrating-swiftui-banner .book-title {
        color: #FFAC2B;
    }
}

@media screen and (max-width: 700px) {
    .integrating-swiftui-banner-wide {
        display: none;
    }
    
    .integrating-swiftui-banner-narrow {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        text-align: center;
        
        margin: 30px 20px 30px 20px;
        padding: 10px 28px 16px 28px;
        
        background: linear-gradient(#2a2a2a, #2a2a2a) padding-box,
        linear-gradient(45deg, #FF9B00, #FF6969) border-box;
        border-radius: 8px;
        border: 1px solid transparent;
        color: var(--body-text-color);
        
        position: relative;
    }
    
    .article-page .integrating-swiftui-banner .integrating-swiftui-banner-narrow .book-title {
        font-size: 1.5rem;
        
        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-size: 1.3rem;
        font-weight: 400;
        color: var(--body-text-color);
        
        padding: 14px 0 0 0;
    }
    
    .article-page .integrating-swiftui-banner p.tagline {
        font-size: 1.1rem;
        font-weight: 600;
    }
    
    .integrating-swiftui-banner .book-image img {
        max-height: 220px;
        object-fit: contain;
    }
    
    .article-page .integrating-swiftui-banner .integrating-swiftui-banner-narrow p.book-description {
        font-size: 1.1rem;
        font-weight: 300;
        padding: 8px 0 6px 0;
        line-height: 1.4rem;
    }
    
    .article-page .integrating-swiftui-banner-narrow .price-container {
        position: absolute;
        right: 10px;
        bottom: 10px;
    }
    
    .article-page .integrating-swiftui-banner-narrow .price-container.promo {
        position: inherit;
        right: 0px;
        bottom: 10px;
    }
    
    .integrating-swiftui-banner .book-author {
        color: #FFC0A2;
    }
    
    @media (prefers-color-scheme: light) {
        .integrating-swiftui-banner-narrow {
            background: linear-gradient(white, white) padding-box,
            linear-gradient(45deg, #FF9B00, #FF6969) border-box;
            border: 2px solid transparent;
        }
        
        .article-page .integrating-swiftui-banner .price {
            color: #FF6969;
            font-weight: 300;
        }
        
        .integrating-swiftui-banner .book-author {
            color: #554967;
        }
    }
    
    .article-page .integrating-swiftui-banner p.updated-promo {
        font-size: 0.8rem;
        padding-bottom: 8px;
    }
    
    .article-page .integrating-swiftui-banner .tagline.promotion {
        font-weight: 600;
        font-size: 1.3rem;
        line-height: 2rem;
    }
}
.latest-news {
    padding: 0 0 10px 0;
}

.latest-news a {
    text-decoration: none;
    color: var(--body-text-color);
    font-weight: 400;
    font-size: 1.1rem;
    text-decoration: underline;
}

.latest-news a.show-all-activities {
    font-size: 0.9rem;
    margin: 0 0 0 4px;
    color: var(--yellow);
    text-decoration: none;
}

.latest-news a.news-update-title {
    text-decoration: none;
    color: var(--blue);
}

.latest-news h3 {
    margin: 0;
    padding: 8px 0 0 0;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.7rem;
}

.latest-news p.news-section-description {
    padding: 0 0 20px 0;
    color: var(--secondary-text-color);
}

.latest-news p {
    font-size: 1.1rem;
    line-height: 1.5rem;
    font-weight: 300;
    margin: 0;
    padding: 10px 0 10px 0;
}

.news-update {
    margin: 10px 0 30px 0;
    padding: 20px 0px 20px 0px;
    border-radius: 8px;
}

.news-update p {
    line-height: 1.7em;
}

.news-update-date {
    color: var(--secondary-text-color);
    font-weight: 300;
    font-size: 0.9rem;
    align-self: flex-end;
}

@media screen and (max-width: 700px) {
    .news-update {
        margin: 10px 0 50px 0;
        padding: 0;
        border: none;
        border-radius: 0;
    }
    
    .latest-news a.show-all-activities {
        font-size: 0.9rem;
        margin: 0px;
    }
    
    .news-update-date {
        align-self: flex-start;
    }
}

@media screen and (max-width: 540px) {
    .latest-news {
        padding: 0;
    }
    
    .latest-news h3 {
        font-size: 1.1rem;
    }
    
    .latest-news p {
        font-size: 1rem;
    }
    
    .latest-news a {
        font-size: 1rem;
    }
    
    .latest-news a.show-all-activities {
        font-size: 0.9rem;
        margin: 0px;
    }
}
#navigation-menu {
    display: none;
}

button#navigation-menu {
    cursor: pointer;
    border: none;
    background-color: var(--chapter-header-background);
    padding: 0;
    height: 30px;
    
    display: none;
}


@media screen and (max-width: 700px) {
    header {
        justify-content: flex-end;
    }
    
    header.menu-expanded {
        background-color: var(--header-inverted-background);
    }
    
    header.menu-expanded .site-navigation-link  {
        color: var(--header-inverted-text-color);
        font-weight: 500;
    }

    header.menu-expanded .site-navigation-link.selected {
        border-bottom: solid 2px var(--header-inverted-text-color);
    }
    
    nav {
        display: none;
    }
    
    button#navigation-menu {
        cursor: pointer;
        border: none;
        background-color: transparent;
        padding: 10px;
        height: 50px;
        
        display: block;
        
        margin-right: 10px;
    }
    
    button#navigation-menu svg {
        fill: var(--yellow);
        width: 32px;
    }
    
    @media (prefers-color-scheme: light) {
        button#navigation-menu svg {
            width: 34px;
        }
    }
    
    header.menu-expanded button#navigation-menu svg {
        fill: var(--header-inverted-text-color);
    }
    
    header.inverted button#navigation-menu svg {
        fill: var(--header-inverted-text-color);
    }
    
    nav.open {
        display: block;
        
        background-color: var(--header-inverted-background);
        position: absolute;
        top: 100%;
        margin-top: 0;
        
        width: 100vw;
        width: 100svw;
        right: auto;
        left: 0;
        box-sizing: border-box;
        padding: 10px 20px 30px 20px;
        overflow-y: scroll;
        max-height: 90vh;
        max-height: 90svh;
    }
    
    nav.open .site-navigation-links {
        display: flex;
        gap: 16px;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-end;
        
        margin: 0;
        
    }
    
    nav.open .site-navigation-links .site-navigation-link {
        margin: 0;
        text-align: end;
    }
}
.post-date {
    color: var(--secondary-text-color);
    font-weight: 300;
    font-size: 1rem;
    
    margin-top: 14px;
    margin-bottom: 8px;
}

@media screen and (max-width: 700px) {
    .article-page .post-date {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.promotion-book-link {
    position: fixed;
    top: 50px;
    left: 0;
    width: 100%;

    display: flex;
    justify-content: center;
    z-index: 100;

    padding: 16px 0 16px 0;

    color: #FF907B;

    font-weight: 400;
    font-size: 1rem;

    background: #191919;
    background: linear-gradient(45deg, #202020, #191919, #202020);

    text-align: center;
}

@media (prefers-color-scheme: light) {
    .promotion-book-link {
        padding: 10px 20px 10px 20px;
        background: linear-gradient(45deg, #D5B9FD, #9B6CE0, #D5B9FD);
        color: white;
        font-weight: 600;
    }
}

a.promotion-book-link {
   text-decoration: none;
}

.promotion-book-link.narrow {
    display: none;
}

@media screen and (max-width: 800px) {
    .promotion-book-link {
        font-size: 0.9rem;
    }
}

@media screen and (max-width: 700px) {
    .promotion-book-link {
        background: linear-gradient(45deg, #191919, #202020);
    }

    .promotion-book-link.wide {
        display: none;
    }

    .promotion-book-link.narrow {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 13px 0px 13px 0px;
    }

    .promotion-book-link.narrow.menu-expanded {
        display: none;
    }

    .promotion-book-link.narrow .deal-line {
        font-size: 0.9rem;
    }

    .promotion-book-link.narrow .discount-line {
        font-weight: 300;
        font-size: 0.9rem;
    }
    
    @media (prefers-color-scheme: light) {
        .promotion-book-link.narrow .deal-line {
            font-weight: 600;
        }

        .promotion-book-link.narrow .discount-line {
            font-weight: 500;
        }

        .promotion-book-link.narrow {
            background: linear-gradient(45deg, #9B6CE0, #CFAEFF);
            color: white;
            font-weight: 600;
            padding: 10px 10px 10px 10px;
        }
    }
}


.promotion .promotion-book-banner {
    display: flex;
    gap: 30px;
    align-items: center;

    padding: 24px 30px;

    margin: 40px 0 40px 0;

    background: linear-gradient(#2a2a2a, #2a2a2a) padding-box,
                linear-gradient(45deg, #5FA8B6, #9B6CE0) border-box;
    border-radius: 8px;
    border: 2px solid transparent;
    color: var(--body-text-color);
}

.promotion .promotion-book-banner p {
    margin: 0;
    padding: 10px 0;
}

.promotion .promotion-book-banner .update-note {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--blue);
    margin: -8px 0 10px 0;
    padding: 0;
}

.promotion .article-page article .promotion-book-banner p {
    margin: 0;
    padding: 10px 0;
}


.promotion .promotion-book-banner p.description {
    margin: 0;
    padding: 20px 0;

    font-size: 1rem;
    line-height: 1.4rem;
    font-weight: 300;
}

.promotion .article-page article .promotion-book-banner p.description {
    margin: 0;
    padding: 20px 0;
}

@media (prefers-color-scheme: light) {
    .promotion .promotion-book-banner p.description {
        font-weight: 400;
    }
}

@media screen and (max-width: 700px) {
    .promotion .promotion-book-banner p.description {
        font-size: 1rem;
        line-height: 1.6rem;
    }
}

.promotion a.promotion-book-banner {
    text-decoration: none;
}

.promotion .article-page article a.promotion-book-banner {
    color: var(--body-text-color);
}

@media (prefers-color-scheme: light) {
    .promotion .promotion-book-banner {
        background: linear-gradient(white, white) padding-box,
                linear-gradient(45deg, #ff907b, #9B6CE0) border-box;
        border: 2px solid transparent;
    }
}

.promotion .promotion-book-banner .book-image img {
    max-height: 240px;
}

.promotion .offer-content {
    display: flex;
    flex-direction: column;
    gap: 14px;

    letter-spacing: 1px;
}

.promotion .offer-content .promotion-title {
    font-weight: 700;
    font-size: 1.7rem;

    background: -webkit-linear-gradient(45deg, #9B6CE0, #ff907b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.promotion .offer-content .offer {
    font-weight: 300;
    font-size: 1.2rem;
}

.promotion .offer-content .book-title {
    font-weight: 600;
}

.promotion .offer-content .amount {
    font-weight: 600;
}

.promotion .promotion-book-banner .timeframe {
    font-size: 1.1rem;
    line-height: 1.3rem;
    font-weight: 500;
}

@media (prefers-color-scheme: light) {
    .promotion .offer-content .offer {
        font-weight: 400;
    }

    .promotion .promotion-book-banner .timeframe {
        font-weight: 600;
    }
}

@media screen and (max-width: 700px) {
    .promotion .promotion-book-banner .book-image {
        display: none;
    }

    .promotion .promotion-book-banner {
        text-align: center;
        padding: 26px 12px 10px 12px;
    }

    .promotion .offer-content .promotion-title {
        font-weight: 600;
        font-size: 1.5rem;
    }

    .promotion .offer-content .offer {
        font-weight: 400;
        font-size: 1.1rem;
        line-height: 1.5rem;
    }

    .promotion .promotion-book-banner .description {
        font-size: 1rem;
        line-height: 1.6rem;
    }

    .promotion .promotion-book-banner .timeframe {
        font-size: 1rem;
    }

    .promotion .article-page article .promotion-book-banner {
        margin: 20px 20px 20px 20px;
    }

    .promotion .article-page article .promotion-book-banner p {
        padding-left: 0;
        padding-right: 0;
    }
}


.promotion .activity-page .latest-news {
    padding-top: 0px;
}

.promotion .anchor-container:target {
    padding-top: 120px!important;
}

.promotion .tag-detail-page .tag-intro {
    padding: 0px 0 10px 0;
}

@media screen and (max-width: 700px) {
    .promotion .tag-detail-page .tag-intro {
        padding: 0px 0 6px 0;
    }
}

.promotion .latest-news a.show-all-activities {
    margin: 0 0 0 0px;
}


.promotion .news-update {
    padding: 10px 0px 14px 0px;
    border-radius: 0px;
}

@media (prefers-color-scheme: dark) {
    .promotion {
        --header-inverted-background: #151515;
    }
}

.promotion main {
    margin-top: 110px;
}

@media screen and (max-width: 700px) {
    .promotion main {
        margin-top: 130px;
    }
}

.wwdc-promotion-banner ul {
    margin: 6px 0 20px 0;
    
    padding-inline-start: 0px;
    list-style: none;
    
    display: flex;
    flex-direction: column;
    
    gap: 20px;
}

.article-page article .wwdc-promotion-banner ul {
    margin: 6px 0 20px 0;
    
    padding-inline-start: 0px;
    list-style: none;
    
    display: flex;
    flex-direction: column;
    
    gap: 20px;
}

.promotion .promotion-book-banner.wwdc-promotion-banner p.description {
    margin: 0;
    padding: 6px 0 0 0;
    font-weight: 200;
}

.promotion .article-page article .promotion-book-banner.wwdc-promotion-banner p.description {
    
    margin: 0;
    padding: 6px 0 0 0;
    font-weight: 200;
}

.promotion .wwdc-promotion-banner .offer-content .book-title {
    font-weight: 500;
}

.promotion article-page article .wwdc-promotion-banner .offer-content .book-title {
    font-weight: 500;
}

.promotion .promotion-book-banner.wwdc-promotion-banner .timeframe {
    font-size: 1rem;
    padding: 0;
}

.promotion article-page article .promotion-book-banner.wwdc-promotion-banner .timeframe {
    font-size: 1rem;
    padding: 0;
}

@media (prefers-color-scheme: light) {
    .promotion .promotion-book-banner.wwdc-promotion-banner p.description {
        font-weight: 300;
    }
    
    .promotion .article-page article .promotion-book-banner.wwdc-promotion-banner p.description {
        font-weight: 300;
    }
}

@media screen and (max-width: 700px) {
    .wwdc-promotion-banner ul {
        gap: 18px;
    }
    
    .article-page article .wwdc-promotion-banner ul {
        padding: 0;
    }
    
    .promotion .promotion-book-banner.wwdc-promotion-banner {
        padding: 20px 12px 14px 12px;
        
        margin: 30px 0 30px 0;
    }
    
    .promotion .promotion-book-banner.wwdc-promotion-banner p.description {
        padding: 6px 0 0 0;
    }
    
    .promotion .wwdc-promotion-banner .offer-content .promotion-title {
        font-weight: 600;
        font-size: 1.3rem;
    }
    
    .promotion .wwdc-promotion-banner .offer-content .offer {
        font-size: 1rem;
    }
    
    .promotion .wwdc-promotion-banner .offer-content .book-title {
        font-weight: 600;
    }
    
    .promotion .promotion-book-banner.wwdc-promotion-banner p.description {
        font-size: 0.9rem;
        line-height: 1.3rem;
    }
    
    .promotion .promotion-book-banner.wwdc-promotion-banner p.description {
        padding: 4px 0 0 0;
    }
    
    .promotion .article-page article .promotion-book-banner.wwdc-promotion-banner p.description {
        padding: 4px 0 0 0;
    }
    
    .promotion .promotion-book-banner.wwdc-promotion-banner .timeframe {
        font-size: 0.9rem;
        padding-top: 4px;
    }
    
    .promotion article-page article .promotion-book-banner.wwdc-promotion-banner .timeframe {
        font-size: 0.9rem;
        padding-top: 4px;
    }
}
.quick-tip {
    color: var(--secondary-text-color);
    font-size: 0.9rem;
    font-weight: 400;
    padding-top: 10px;
    margin-bottom: 4px;
    
    display: grid;
    grid-template-columns: max-content 1fr;
}

.quick-tip-items {
    border: 1px solid var(--secondary-text-color);
    padding: 6px 12px;
    display: grid;
    grid-template-columns: max-content max-content;
    border-radius: 14px;
}

.quick-tip span {
    padding: 4px 0 0 4px;
}

.quick-tip svg {
    fill: var(--secondary-text-color);
    width: 22px;
    height: 22px;
}

@media screen and (max-width: 700px) {
    .quick-tip {
        padding-left: 20px;
        padding-right: 20px;
        font-size: 0.9rem;
    }
    
    .quick-tip-items {
        padding: 6px 10px;
    }
    
    .quick-tip svg {
        width: 22px;
        height: 22px;
    }
}
.related-posts {
    padding: 20px 0;
    border-top: 1px solid var(--purple-border);
    border-bottom: 1px solid var(--purple-border);
    
    margin: 40px 0 40px 0;
}

.related-posts-title {
    font-size: 1.3rem;
    font-weight: 400;
    margin: 0;
    padding: 0;
}

.related-posts ul {
    padding-inline-start: 0;
    display: flex;
    flex-direction: column;
    list-style-type: initial;
    
    margin: 10px 20px 0 20px;
}

.related-posts li {
    margin: 0 10px;
    padding: 8px 0;
}

.related-posts a {
    text-decoration: none;
    color: var(--body-text-color);
    font-size: 1.1rem;
    font-weight: 300;
}

.related-posts a:hover {
    color: var(--yellow);
}

@media screen and (max-width: 700px) {
    .related-posts {
        padding: 10px 0;
        margin: 30px 0 30px 0;
    }
    
    .related-posts-title {
        padding: 0 20px;
        font-size: 1.2rem;
    }
    
    .related-posts ul {
        margin: 10px 30px 0 30px;
    }
    
    .related-posts a {
        font-size: 1.1rem;
    }
}
/* MARK: Header adjust to search focus/content */

header:has(input#search-box:focus) {
    background-color: var(--header-inverted-background);
}

header:has(input#search-box:not(:placeholder-shown)) {
    background-color: var(--header-inverted-background);
}

/* Link Color */

header:has(input#search-box:focus) .site-navigation-link {
    color: var(--header-inverted-text-color);
}

header:has(input#search-box:not(:placeholder-shown)) .site-navigation-link {
    color: var(--header-inverted-text-color);
}

/* Header button */

header:has(input#search-box:focus) button#navigation-menu svg {
    fill: var(--header-inverted-text-color);
}

header:has(input#search-box:not(:placeholder-shown)) button#navigation-menu svg {
    fill: var(--header-inverted-text-color);
}


/* Underline on selected item */

header:has(input#search-box:focus) .site-navigation-link.selected {
    border-bottom: solid 2px var(--header-inverted-text-color);
}

header:has(input#search-box:not(:placeholder-shown)) .site-navigation-link.selected {
    border-bottom: solid 2px var(--header-inverted-text-color);
}

/* MARK: Last Child In navigation links */

header .site-navigation-links > li:last-child {
    flex-grow: 4;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    align-self: center;
    position: relative;
}

@media screen and (max-width: 700px) {
    header .site-navigation-links > li:last-child {
        flex-grow: 4;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        align-self: stretch;
        position: relative;
    }
    
    header .site-navigation-links > li:last-child > div {
        flex-grow: 4;
        display: flex;
        flex-direction: column;
        align-items: center;
        align-self: stretch;
        position: relative;
    }
    
    header .search-form {
        align-self: flex-end;
    }
}


/* MARK: Search FORM */

.search-form {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: baseline;
}

@media screen and (max-width: 700px) {
    header .search-form {
        align-self: stretch;
        flex-direction: row;
    }
}

header .search-form {
    border: 1px solid var(--search-box-outline);
    border-radius: 10px;
}

header.inverted .search-form {
    border: 1px solid var(--header-inverted-search-box-outline);
}

@media screen and (max-width: 700px) {
    header.menu-expanded .search-form {
        border: 1px solid var(--header-inverted-search-box-outline);
    }
}

header:has(input#search-box:focus) .search-form {
    border: 1px solid var(--header-inverted-search-box-outline);
}

header:has(input#search-box:not(:placeholder-shown)) .search-form {
    border: 1px solid var(--header-inverted-search-box-outline);
}

header .search-form::after {
    content: '';
    position: absolute;
    
    right: 8px;
    background-size: 1rem 1rem;
    background-color: var(--search-box-outline);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg clip-rule='evenodd' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='m15.97 17.031c-1.479 1.238-3.384 1.985-5.461 1.985-4.697 0-8.509-3.812-8.509-8.508s3.812-8.508 8.509-8.508c4.695 0 8.508 3.812 8.508 8.508 0 2.078-.747 3.984-1.985 5.461l4.749 4.75c.146.146.219.338.219.531 0 .587-.537.75-.75.75-.192 0-.384-.073-.531-.22zm-5.461-13.53c-3.868 0-7.007 3.14-7.007 7.007s3.139 7.007 7.007 7.007c3.866 0 7.007-3.14 7.007-7.007s-3.141-7.007-7.007-7.007z' fill-rule='nonzero' stroke-width='10'/></svg>");
    background-size: 1rem 1rem;
    height: 1rem;
    width: 1rem;
    align-self: center;
    pointer-events: none;
}

header .search-form:has(input:focus)::after {
    opacity: 0;
}

header .search-form:has(input:not(:placeholder-shown))::after {
    opacity: 0;
}

header.inverted .search-form::after {
    background-color: var(--header-inverted-search-box-outline);
}

@media screen and (max-width: 700px) {
    header.menu-expanded .search-form::after {
        background-color: var(--header-inverted-search-box-outline);
    }
}

header:has(input#search-box:focus) .search-form::after {
    background-color: var(--header-inverted-search-box-outline);
}

header:has(input#search-box:not(:placeholder-shown)) .search-form::after {
    background-color: var(--header-inverted-search-box-outline);
}



/* MARK: Input search box */

input#search-box {
    background-color: var(--chapter-header-background);
    border: 0px solid var(--header-text-color);
    padding: 5px 8px 5px 8px;
    color: var(--text-color);
    font-size: 0.9rem;
    font-weight: 300;
    width: 200px;
}

@media screen and (max-width: 700px) {
    input#search-box {
        padding: 8px 8px 8px 8px;
        width: 100%;
        font-size: 1rem;
    }
}


header.inverted input#search-box {
    color: var(-text-color);
}

@media screen and (max-width: 700px) {
    header.menu-expanded input#search-box {
        color: var(--text-color);
    }
}

header:has(input#search-box:focus) input#search-box {
    color: var(--text-color);
}

header:has(input#search-box:not(:placeholder-shown)) input#search-box {
    color: var(--text-color);
}

header input#search-box:focus {
    outline: none !important;
    outline-style: none;
}

header input#search-box::placeholder {
    color: var(--secondary-text-color);
    opacity: 0.5;
    font-weight: 200;
    font-size: 0.8rem;
}

header input#search-box::-webkit-search-cancel-button {
    -webkit-appearance: none;
    background-color: var(--search-box-outline);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
    background-size: 16px 16px;
    height: 16px;
    width: 16px;
}


header.inverted input#search-box::-webkit-search-cancel-button {
    background-color: var(--header-inverted-search-box-outline);
}

@media screen and (max-width: 700px) {
    header.menu-expanded input#search-box::-webkit-search-cancel-button {
        background-color: var(--header-inverted-search-box-outline);
    }
}

header:has(input#search-box:focus) input#search-box::-webkit-search-cancel-button {
    background-color: var(--header-inverted-search-box-outline);
}

header:has(input#search-box:not(:placeholder-shown)) input#search-box::-webkit-search-cancel-button {
    background-color: var(--header-inverted-search-box-outline);
}


/* MARK: Search results */

header #search-results {
    background-color: var(--banner-background);
    top: 100%;
    margin-top: 16px;
    min-width: min(100vw, 400px);

    position: absolute;
    width: 470px;
    top: 100%;
    right: 0;
    padding: 10px 20px 10px 20px;
    
    overflow: auto;
    max-height: min(calc(90vh - 100%), calc(90svh - 100%));
}



header #search-results {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    
    padding: 10px 20px 10px 20px;    
}

header.promotion #search-results {
    padding-top: 40px;
}


@media screen and (max-width: 700px) {
    header #search-results {
        background-color: unset;
        top: unset;
        margin-top: 16px;
        min-width: auto;
        width: unset;
        max-height: unset;
        position: relative;
    }
}





#search-results.search-results-hidden {
    display: none;
}

#search-results li {
    margin: 10px 0 10px 0;
}

#search-results .no-results {
    font-weight: 300;
    font-size: 0.9rem;
}

#search-results a {
    text-decoration: none;
    color: var(--chapter-header-text-color);
    font-weight: 300;
    font-size: 1rem;
    
    margin: 20px 0 0 0;
    display: flex;
}

#search-results a.search-result-subchapter {
    display: flex;
    flex-direction: column;
}

#search-results a.search-result-section {
    margin: 10px 0 0 10px;
    font-size: 0.9rem;
}

#search-results mark {
    text-decoration: none;
    color: inherit;
    background: var(--selection-color);
}

#search-results ul {
    list-style: none;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
}

#search-results .site-links li {
    margin: 0;
}

#search-results .site-navigation-link {
    color: var(--chapter-header-text-color);
    font-weight: 300;
    font-size: 0.9rem;
}

#search-results a {
    text-decoration: none;
}

#search-results a:hover {
    color: var(--yellow);
}

#search-results a.search-result-post {
    display: flex;
    flex-direction: column;
}

#search-results .search-result-tags {
    font-size: 0.8rem;
    color: var(--secondary-text-color);
    padding: 2px 2px 2px 0px;
}

#search-results::-webkit-scrollbar {
  display: none;
}
html {
    font-size: 1em;
    min-height: 100%;
    scroll-behavior: smooth;
}

body, html {
    overflow-x: hidden;
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    overflow-wrap: break-word;
}

:root {
    --body-text-color: #202020;
    --background-color: white;
    
    --secondary-text-color: #575757;
    --tertiary-text-color: #828282;
    
    --code-comment: #B6B6B6;
    
    --code-background: #F6F3FA;
    --code-in-paragraph: #F6F3FA;
    --banner-background: #E5DBF3;
    
    --purple: #9663E1;
    --secondary-purple: #7252A0;
    --pink: #F36783;
    --blue: #50AEEA;
    --secondary-blue: #2F5E7C;
    --yellow: #FF9B00;
    
    --red: #F25757;
    --green: #17B890;
    --indigo: #4663B7;
    --orange: #FF765F;
    --lightGreen: #90B494;
    --brown: #94594E;
    
    --purple-border: #BC95F7;
    --light-purple: #BC95F7;
    
    --header-text-color: #FF9B00;
    --header-inverted-text-color: black;
    --header-inverted-background: #FFD65E;
    

    --light-image-display: flex;
    --dark-image-display: none;
    
    --article-list-background: #F2F2F2;
    --tag-background: #BC95F7;
    --selected-tag-background: #F4718B;
    
    --button-color: #FCCB39;
    
    --selection-color: rgba(188, 149, 247, 0.4);
    
    --search-box-outline: var(--tertiary-text-color);
    --header-inverted-search-box-outline: var(--header-inverted-text-color);
    
    --light-border: #959595;
}

@media (prefers-color-scheme: dark) {
    :root {
        --body-text-color: white;
        --background-color: #2A2A2A;
        
        --secondary-text-color: #B6B6B6;
        --tertiary-text-color: #444444;
        
        --code-comment: #646464;
        
        --code-background: #171717;
        --code-in-paragraph: #212121;
        --banner-background: #3D3D3D;
        
        --purple: #9B6CE0;
        --secondary-purple: #AA85E0;
        --pink: #F4718B;
        --blue: #6BB4E2;
        --secondary-blue: #C3E3F7;
        --yellow: #FCCB39;
        
        --green: #17B890;
        --red: #FF7D67;
        --indigo: #5B7AD5;
        --orange: #FF765F;
        --lightGreen: #90B494;
        --brown: #94594E;
        
        --purple-border: #654B8A;
        --pink-border: rgba(244, 113, 139, 0.3);
        --light-purple: #D8CAEC;
        
        --light-blue: #C2E2F5;
        
        --header-text-color: var(--yellow);
        --header-inverted-text-color: var(--yellow);
        --header-inverted-background: #202020;
        
        --light-image-display: none;
        --dark-image-display: flex;
        
        --article-list-background: #353434;
        --tag-background: rgba(107, 180, 226, 0.2);
        --selected-tag-background: #50AEEA;
        
        --selection-color: rgba(107, 180, 226, 0.2);
        
        --search-box-outline: var(--tertiary-text-color);
        --header-inverted-search-box-outline: var(--tertiary-text-color);
        
        --light-border: #4B4B4B;
    }
}

.light-image {
    display: var(--light-image-display);
}

.dark-image {
    display: var(--dark-image-display);
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
    min-height: 100vh;
    
    color: var(--body-text-color);
    background-color: var(--background-color);
}

main {
    margin-top: 50px;
    max-width: 100vw;
}

.container {
    flex-grow: 1;
    max-width: 900px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto max-content;
    align-content: stretch;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 940px) {
    .container {
        box-sizing: border-box;
        padding: 0 20px 0 20px;
    }
}

@media screen and (max-width: 700px) {
    .container {
        padding: 0;
    }
}

.not-found-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.not-found-page h1 {
    color: var(--secondary-text-color);
    font-weight: 300;
}

.not-found-page h2 {
    color: var(--secondary-text-color);
    font-weight: 300;
}

::selection {
  color: var(--body-text-color);
  background: var(--selection-color);
}
.swift-gems-banner-narrow {
    display: none;
}

.swift-gems-banner-wide {
    display: flex;
    gap: 30px;
    align-items: center;
    
    padding: 10px 28px 16px 28px;
    
    margin: 30px 0 30px 0;
    
    background: linear-gradient(#2a2a2a, #2a2a2a) padding-box,
    linear-gradient(45deg, #5B7AD5, #9B6CE0) border-box;
    border-radius: 8px;
    border: 1px solid transparent;
    color: var(--body-text-color);
}

.swift-gems-banner .description {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-grow: 1;
}

.article-page .swift-gems-banner p {
    padding: 0;
}

.article-page .swift-gems-banner p.tagline-price {
    font-size: 1.2rem;
    text-transform: uppercase;
    padding: 8px 0 4px 0;

    display: flex;
    justify-content: space-between;
}

.article-page .swift-gems-banner .tagline {
    font-weight: 700;
    
    background: -webkit-linear-gradient(45deg, #655AD2, #9571F4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.article-page .swift-gems-banner .tagline.promotion {
    font-weight: 700;
    font-size: 1.4rem;
    background: -webkit-linear-gradient(45deg, #9B6CE0, #ff907b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.article-page .swift-gems-banner .price {
    font-size: 1.1rem;
    color: var(--secondary-text-color);
}

.article-page .swift-gems-banner .price.old-price {
    text-decoration: line-through;
    padding: 0 10px 0 0;
}

.article-page .swift-gems-banner .price.new-price {
    font-weight: 600;
    
    background: -webkit-linear-gradient(45deg, #9B6CE0, #ff907b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.article-page .swift-gems-banner .book-title {
    font-size: 1.5rem;
    font-weight: 400;
    
    font-family: 'Alegreya', serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--purple);
    
    padding-right: 14px;
}

.swift-gems-banner .book-author {
    font-size: 1rem;
    font-weight: 200;
    padding: 0;
    
    color: var(--light-purple);
}

.article-page .swift-gems-banner p.book-description {
    font-size: 1.1rem;
    font-weight: 400;
}

.article-page article a.swift-gems-banner ul {
    font-size: 0.9rem;
    line-height: 1.5rem;
    font-weight: 300;
    
    padding-inline-start: 10px;
    display: flex;
    flex-direction: column;
    list-style-type: initial;
    
    margin: 8px 0 10px 4px;
    list-style: none;
}

.swift-gems-banner ul li::before {
    content: "✦";
    color: var(--light-purple);
    font-weight: bold;
    display: inline-block;
    width: 1.7rem;
    margin-left: -1em;
}

.swift-gems-banner ul li {
    margin: 2px 0;
}

.article-page article a.swift-gems-banner {
    color: var(--body-text-color);
}

.swift-gems-banner .book-image img {
    max-height: 230px;
    object-fit: contain;
}

@media (prefers-color-scheme: light) {
    .swift-gems-banner-wide {
        background: linear-gradient(white, white) padding-box,
        linear-gradient(45deg, #D46F94, #9B6CE0) border-box;
        border: 2px solid transparent;
    }
    
    .swift-gems-banner .book-author {
        font-weight: 400;
        color: #9B6CE0;
    }
    
    .article-page article a.swift-gems-banner ul {
        font-weight: 400;
    }
    
    .article-page .swift-gems-banner .price {
        color: #9571F4;
        font-weight: 300;
    }
    
    .article-page .swift-gems-banner .tagline {
        font-weight: 700;
        background: -webkit-linear-gradient(45deg, #9B6CE0, #D46F94);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

@media screen and (max-width: 700px) {
    .swift-gems-banner-wide {
        display: none;
    }
    
    .swift-gems-banner-narrow {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        text-align: center;
        
        margin: 30px 20px 30px 20px;
        padding: 10px 28px 16px 28px;
        
        background: linear-gradient(#2a2a2a, #2a2a2a) padding-box,
        linear-gradient(45deg, #5B7AD5, #9B6CE0) border-box;
        border-radius: 8px;
        border: 1px solid transparent;
        color: var(--body-text-color);
        
        position: relative;
    }
    
    .article-page .swift-gems-banner .swift-gems-banner-narrow .book-title {
        font-size: 1.5rem;
        font-weight: 400;
        
        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-size: 1.5rem;
        font-weight: 500;
        color: var(--body-text-color);
        
        padding: 14px 0 0 0;
    }
    
    .swift-gems-banner .book-image img {
        max-height: 220px;
        object-fit: contain;
    }
    
    .article-page .swift-gems-banner .swift-gems-banner-narrow p.book-description {
        font-size: 1.1rem;
        font-weight: 400;
        padding: 8px 0 6px 0;
        line-height: 1.3rem;
    }
    
    .article-page .swift-gems-banner-narrow .price-container {
        position: absolute;
        right: 10px;
        bottom: 10px;
    }
    
    .article-page .swift-gems-banner-narrow .price-container.promo {
        position: inherit;
        right: 0px;
        bottom: 10px;
        top: 2px;
    }
    
    @media (prefers-color-scheme: light) {
        .swift-gems-banner-narrow {
            background: linear-gradient(white, white) padding-box,
            linear-gradient(45deg, #D46F94, #9B6CE0) border-box;
            border: 2px solid transparent;
        }
        
        .article-page .swift-gems-banner .price {
            color: #8C72B2;
            font-weight: 300;
        }
        
        .swift-gems-banner .book-author {
            color: #554967;
        }
    }
    
    .article-page .swift-gems-banner .tagline.promotion {
        font-weight: 600;
        font-size: 1.3rem;
        line-height: 2rem;
    }
}
.swiftui-fundamentals-banner-narrow {
    display: none;
}

.swiftui-fundamentals-banner-wide {
    display: flex;
    gap: 30px;
    align-items: center;
    
    padding: 10px 28px 16px 28px;
    
    margin: 30px 0 30px 0;
    
    background: linear-gradient(#2a2a2a, #2a2a2a) padding-box,
    linear-gradient(45deg, #50AEEA, #62D9BA) border-box;
    border-radius: 8px;
    border: 1px solid transparent;
    color: var(--body-text-color);
}

.swiftui-fundamentals-banner .description {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-grow: 1;
}

.article-page .swiftui-fundamentals-banner p {
    padding: 0;
}

.article-page .swiftui-fundamentals-banner p.tagline-price {
    font-size: 1.2rem;
    text-transform: uppercase;
    padding: 8px 0 4px 0;

    display: flex;
    justify-content: space-between;
}

.article-page .swiftui-fundamentals-banner .tagline {
    font-weight: 700;
    
    background: -webkit-linear-gradient(45deg, #50AEEA, #62D9BA);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.article-page .swiftui-fundamentals-banner .tagline.promotion {
    font-weight: 700;
    font-size: 1.4rem;
    background: -webkit-linear-gradient(45deg, #9B6CE0, #ff907b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.article-page .swiftui-fundamentals-banner .price {
    font-size: 1.1rem;
    color: var(--secondary-text-color);
}

.article-page .swiftui-fundamentals-banner .price.old-price {
    text-decoration: line-through;
    padding: 0 10px 0 0;
}

.article-page .swiftui-fundamentals-banner .price.new-price {
    font-weight: 600;
    
    background: -webkit-linear-gradient(45deg, #9B6CE0, #ff907b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.article-page .swiftui-fundamentals-banner .book-title {
    font-size: 1.5rem;
    font-weight: 400;
    
    font-family: 'Alegreya', serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--blue);
    
    padding-right: 14px;
}

.swiftui-fundamentals-banner .book-author {
    font-size: 1rem;
    font-weight: 200;
    padding: 0;
    
    color: var(--light-blue);
}

.article-page .swiftui-fundamentals-banner p.book-description {
    font-size: 1.1rem;
    font-weight: 400;
}

.article-page article a.swiftui-fundamentals-banner ul {
    font-size: 0.9rem;
    line-height: 1.5rem;
    font-weight: 300;
    
    padding-inline-start: 10px;
    display: flex;
    flex-direction: column;
    list-style-type: initial;
    
    margin: 8px 0 10px 4px;
    list-style: none;
}

.swiftui-fundamentals-banner ul li::before {
    content: "✦";
    color: var(--light-blue);
    font-weight: bold;
    display: inline-block;
    width: 1.7rem;
    margin-left: -1em;
}

.swiftui-fundamentals-banner ul li {
    margin: 2px 0;
}

.article-page article a.swiftui-fundamentals-banner {
    color: var(--body-text-color);
}

.swiftui-fundamentals-banner .book-image img {
    max-height: 230px;
    object-fit: contain;
}

@media (prefers-color-scheme: light) {
    .swiftui-fundamentals-banner-wide {
        background: linear-gradient(white, white) padding-box,
        linear-gradient(45deg, #50AEEA, #62D9BA) border-box;
        border: 2px solid transparent;
    }
    
    .swiftui-fundamentals-banner .book-author {
        font-weight: 400;
        color: #828282;
    }
    
    .article-page article a.swiftui-fundamentals-banner ul {
        font-weight: 400;
    }
    
    .article-page .swiftui-fundamentals-banner .price {
        color: #5CBEBB;
        font-weight: 300;
    }
    
    .article-page .swiftui-fundamentals-banner .tagline {
        font-weight: 700;
        background: -webkit-linear-gradient(45deg, #50AEEA, #5CBEBB);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

@media screen and (max-width: 700px) {
    .swiftui-fundamentals-banner-wide {
        display: none;
    }
    
    .swiftui-fundamentals-banner-narrow {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        text-align: center;
        
        margin: 30px 20px 30px 20px;
        padding: 10px 28px 16px 28px;
        
        background: linear-gradient(#2a2a2a, #2a2a2a) padding-box,
        linear-gradient(45deg, #50AEEA, #62D9BA) border-box;
        border-radius: 8px;
        border: 1px solid transparent;
        color: var(--body-text-color);
        
        position: relative;
    }
    
    .article-page .swiftui-fundamentals-banner .swiftui-fundamentals-banner-narrow .book-title {
        font-size: 1.5rem;
        font-weight: 400;
        
        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-size: 1.5rem;
        font-weight: 500;
        color: var(--body-text-color);
        
        padding: 14px 0 0 0;
    }
    
    .swiftui-fundamentals-banner .book-image img {
        max-height: 220px;
        object-fit: contain;
    }
    
    .article-page .swiftui-fundamentals-banner .swiftui-fundamentals-banner-narrow p.book-description {
        font-size: 1.1rem;
        font-weight: 400;
        padding: 8px 0 6px 0;
        line-height: 1.3rem;
    }
    
    .article-page .swiftui-fundamentals-banner-narrow .price-container {
        position: absolute;
        right: 10px;
        bottom: 10px;
    }
    
    .article-page .swiftui-fundamentals-banner-narrow .price-container.promo {
        position: inherit;
        right: 0px;
        bottom: 10px;
        top: 2px;
    }
    
    @media (prefers-color-scheme: light) {
        .swiftui-fundamentals-banner-narrow {
            background: linear-gradient(white, white) padding-box,
            linear-gradient(45deg, #50AEEA, #62D9BA) border-box;
            border: 2px solid transparent;
        }
        
        .article-page .swiftui-fundamentals-banner .price {
            color: #5FA8B6;
            font-weight: 300;
        }
        
        .swiftui-fundamentals-banner .book-author {
            color: #554967;
        }
    }
    
    .article-page .swiftui-fundamentals-banner .tagline.promotion {
        font-weight: 600;
        font-size: 1.3rem;
        line-height: 2rem;
    }
}

.tags-list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

ul.tags-list {
    list-style-type: none;
    padding-inline-start: 0;
    
    margin: 0 0 0 0;
}

ul.tags-list li {
    margin: 0;
    
    display: flex;
    align-items: center;
}

.tag {
    color: white;
    margin: 4px 8px 0 0;
    
    font-size: 0.8rem;
    font-weight: 500;
    
    padding: 4px 6px 4px 6px;
    border-radius: 6px;
    
    background-color: var(--tag-background);
}

a.tag {
    text-decoration: none;
}

.terms-privacy-page h1 {
    font-family: 'Alegreya', serif;
    font-size: 3rem;
    font-weight: 400;
    color: var(--purple);
    
    margin: 0;
    padding: 10px 0 10px 0;
}

.terms-privacy-page section {
    padding: 10px 0 10px 0;
}

.terms-privacy-page h2 {
    padding: 0 0 10px 0;
    font-size: 1.5rem;
    font-weight: 400;
    margin: 0;
}

.terms-privacy-page p {
    font-size: 1.2rem;
    line-height: 1.5em;
    font-weight: 300;
    margin: 12px 0;
}

.terms-privacy-page a {
    color: var(--yellow);
    text-decoration: none;
    
    font-size: 1rem;
    line-height: 1.4em;
    font-weight: 400;
}

.terms-privacy-page ul {
    font-size: 1.1rem;
    line-height: 1.5em;
    font-weight: 300;
}

@media screen and (max-width: 700px) {
    .terms-privacy-page {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .terms-privacy-page h1 {
        font-size: 2.4rem;
    }
    
    .terms-privacy-page h2 {
        font-size: 1.4rem;
    }
    
    .terms-privacy-page p {
        font-size: 1.1rem;
    }
}
p.update-banner {
    font-size: 1.1rem;
    font-weight: 300;
    padding: 8px 16px;
    
    border-radius: 8px;
    background-color: var(--banner-background);
    
    margin: 10px 0;
}

@media screen and (max-width: 700px) {
    p.update-banner {
        padding: 8px 20px;
        border-radius: 0;
    }
}

@media screen and (max-width: 600px) {
    p.update-banner {
        font-size: 1rem;
    }
}