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

@media screen and (max-width: 1040px) {
    .article-images.xcode img {
        max-width: calc(100vw - 40px);
        max-width: calc(100svw - 40px);
    }
}

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

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

.article-images.xcode {
    margin: 20px 0;
}
.article-page {
    padding-top: 10px;
}

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

.article-page h2 {
    padding: 30px 0 10px 0;
    font-size: 1.5rem;
    font-weight: 300;
    margin: 0;
    color: var(--secondary-purple);
}

.article-page h3 {
    padding: 20px 0 10px 0;
    font-size: 1.2rem;
    font-weight: 500;
    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.9rem;
    font-size: 1.1rem;
    
    margin: 0;
    padding: 10px 20px 10px 20px;
    
    list-style-type: circle;
}

.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 */
}

.anchor {
    display: none;
}

@media screen and (max-width: 700px) {
    .article-page h1 {
        font-size: 2rem;
        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;
        
        font-size: 1.1rem;
    }
    
    .article-page article ul {
        padding-left: 40px;
        padding-right: 20px;
    }
    
    .article-page ol {
        padding-left: 40px;
        padding-right: 20px;
    }
}
.assign-copies-page h1 {
    font-family: 'Alegreya', serif;
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--purple);
    
    margin: 0;
    padding: 10px 0 10px 0;
}

.assign-copies-page h2 {
    font-weight: 300;
    font-size: 1.5rem;
    padding: 20px 0 0px 0;
}

.input-field {
    padding: 14px 0 14px 0;
}

.input-field label {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-weight: 300;
    font-size: 1.1rem;
}

.input-hint {
    font-weight: 300;
    font-size: 0.9rem;
    line-height: 1.1rem;
}

p.input-hint {
    margin: 0;
}

.input-field .email-submission-info {
    padding: 6px 0 6px 0;
}

.assign-copies-page .email-form button {
    font-size: 1rem;
    padding: 8px 30px 8px 30px;
}

.assign-copies-page p.email-usage-info {
    width: 70%;
}

.assign-button {
    padding: 10px 0 20px 0;
}

p.email-support {
    font-weight: 300;
    font-size: 1rem;
    margin: 0;
    
    line-height: 1.5rem;
    width: 70%;
}

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

@media screen and (max-width: 700px) {
    .assign-copies-page {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .assign-copies-page h1 {
        font-size: 2rem;
        line-height: 2.4rem;
    }
    
    .assign-copies-page h2 {
        font-size: 1.4rem;
        padding: 20px 0 0px 0;
    }
    
    .email-form .input-field input {
        margin: 4px 0;
        font-size: 1rem;
        width: calc(100% - 20px);
    }
    
    .assign-copies-page .email-form button {
        font-size: 0.9rem;
        padding: 8px 30px 8px 30px;
        width: 80%;
    }

    .assign-copies-page p.email-usage-info {
        width: 100%;
    }
    
    .assign-button {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    p.email-support {
        width: 100%;
    }
}
.book-download {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    
    padding: 0;
}

.book-download a {
    text-decoration: none;
    color: var(--body-text-color);
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 500;
    
    margin: 20px 28px 0 0;
}

.book-download a:hover {
    color: var(--yellow);
}

.link-label {
    display: flex;
    align-items: center;
}

.link-label div {
    display: flex;
    align-items: center;
}

.book-download a svg {
    margin-right: 8px;
    fill: var(--body-text-color);
}

.book-download a:hover svg {
    fill: var(--yellow);
}

a.full-download {
    color: black;
    background-color: var(--button-color);
    padding: 8px 14px;
    border-radius: 10px;
}

a.full-download:hover {
    color: black;
}

a.full-download svg {
    fill: black;
}

a.full-download:hover svg {
    fill: black;
}

@media screen and (max-width: 700px) {
    .book-download a {
        margin: 16px 24px 0 0;
    }
}
nav.book-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px 10px 20px;
    
    max-width: 100%;
    
    background-color: var(--chapter-header-background);
    position: relative;
}

.book-title-link {
    font-size: 1rem;
    color: var(--chapter-header-text-color);
    font-weight: 300;
    padding: 0;
    border-bottom: 0px solid var(--body-text-color);
}

.book-title-link:hover {
    color: var(--chapter-header-hover-color);
}

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

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

button#navigation-menu svg {
    fill: var(--chapter-menu-button-color);
    width: 30px;
}

button#navigation-menu svg:hover {
    fill: var(--chapter-header-hover-color);
}

#book-navigation-links {
    display: none;
}

#book-navigation-links.open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    background-color: var(--chapter-header-background);
    position: absolute;
    width: 470px;
    top: 100%;
    right: 0;
    padding: 10px 20px 10px 20px;
    margin-top: 0;
    
    overflow: auto;
    height: calc(90vh - 100%);
    height: calc(90svh - 100%);
    border-radius: 0 0 0 10px;
    border-top: 1px solid var(--gray-border);
}

#book-navigation-links ul {
    list-style: none;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
}

#book-navigation-links .site-links li {
    margin: 0;
}

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

#book-navigation-links a {
    text-decoration: none;
}

#book-navigation-links a:hover {
    color: var(--yellow);
}

#book-navigation-links .table-of-contents h1 {
    margin: 14px 0 10px 0;
    font-size: 1.3rem;
    color: var(--nav-h1-color);
    font-weight: 400;
}

#book-navigation-links .table-of-contents .chapter-title {
    color: var(--chapter-header-text-color);
    font-size: 1.1rem;
}

#book-navigation-links .table-of-contents .chapter-title:hover {
    color: var(--chapter-header-hover-color);
}

#book-navigation-links .table-of-contents .chapter-title.main {
    padding-top: 10px;
}

#book-navigation-links .table-of-contents .chapter-title.subchapter {
    font-size: 1rem;
    line-height: 1.5rem;
}

#book-navigation-links .table-of-contents .chapter-title.selected span {
    color: var(--purple);
    font-weight: 400;
}

#book-navigation-links .table-of-contents li {
    margin: 10px 0 10px 0;
}

.previous-next {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 50px;
    padding-bottom: 10px;
}

.previous-next a {
    text-decoration: none;
    color: var(--yellow);
}

.previous-link-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    text-align: right;
}

.next-link-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    text-align: left;
}

#book-navigation-links .site-navigation-link.table {
    font-size: 1rem;
}

#book-navigation-links .main-links li {
    margin: 0;
    padding: 10px 0 10px 0;
}

#book-navigation-links .chapter-links {
    margin-top: -10px;
}



@media screen and (max-width: 700px) {
    #book-navigation-links.open {
        width: 100vw;
        width: 100svw;
        height: calc(100vh - 100%);
        height: calc(100svh - 100%);
        right: auto;
        left: 0;
        box-sizing: border-box;
        padding: 10px 20px 20px 20px;
        border-radius: 0;
    }
    
    nav.book-navigation {
        padding: 11px 20px 11px 20px;
    }

    button#navigation-menu {
        height: 28px;
    }

    button#navigation-menu svg {
        width: 28px;
    }
    
    .previous-next {
        padding: 0 20px;
        gap: 30px;
        font-size: 0.9rem;
    }
}


#book-navigation-links .table-of-contents.hidden {
    display: none;
}
.book-page h1 {
    font-family: 'Alegreya', serif;
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--purple);
    
    margin: 0;
    padding: 10px 0 10px 0;
}

.book-page h2 {
    font-weight: 400;
    padding: 40px 0 6px 0;
    margin: 0;
    font-size: 1.5rem;
}

.downloads-section h2 {
    font-size: 1.3rem;
}

.book-subtitle {
    font-weight: 300;
    font-size: 1.3rem;
    color: var(--secondary-text-color);
    margin: 0;
    line-height: 1.5rem;
}

a.read-online-link {
    text-decoration: none;
}

.read-online h2 {
    font-family: 'Alegreya', serif;
    font-size: 2rem;
    font-weight: 400;
    color: var(--blue);
}

.book-page .update-note {
    color: var(--secondary-text-color);
    margin: 24px 0 4px 0;
    font-size: 0.9rem;
}

.book-page .update-note a {
    color: var(--yellow);
    text-decoration: none;
}

.book-page .releases-link {
    font-weight: 200;
    font-size: 0.9rem;
    display: block;
    padding: 10px 0 0 0;
}

.book-page .releases-link a {
    text-decoration: none;
    color: var(--yellow);
    font-weight: 300;
}


@media screen and (max-width: 700px) {
    .book-page {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .book-page h1 {
        font-size: 2.2rem;
        line-height: 2.4rem;
    }
    
    .book-subtitle {
        padding-top: 10px;
        font-size: 1.2rem;
    }
    
    .book-page h2 {
        font-weight: 400;
        padding: 40px 0 6px 0;
        margin: 0;
        font-size: 1.4rem;
    }
    
    .read-online h2 {
        font-size: 1.8rem;
        padding: 40px 0 0 0;
        margin: 0;
    }
}
.books-bundle-banner-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    
    padding: 0 0 20px 0;
}

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

@media (prefers-color-scheme: dark) {
    .books-bundle-banner {
        background: linear-gradient(#2a2a2a, #2a2a2a) padding-box,
        linear-gradient(45deg, #5B7AD5, #9B6CE0) border-box;
        border: 1px solid transparent;
    }
}

.books-bundle-banner {
    border-radius: 8px;
    padding: 14px 28px 24px 28px;
    margin: 30px 0 20px 0;
    
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: center;
    align-self: stretch;
}

.books-bundle-banner .book-list {
    display: flex;
    flex-direction: column;
}

.books-bundle-banner .book-list {
    padding: 28px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.books-bundle-banner p.book-title {
    margin: 0;
    padding: 0px 0 2px 0;
    font-weight: 400;
    font-size: 1.1rem;
}

.books-bundle-banner p.book-description {
    margin: 0;
    font-weight: 200;
    padding: 4px 0 0px 0;
    font-size: 1rem;
}

.books-bundle-banner p.tagline {
    font-size: 1.2rem;
    text-transform: uppercase;
    padding: 8px 0 4px 0;
    display: flex;
    justify-content: space-between;
    align-self: stretch;
    align-items: flex-start;
    margin-block-start: 0;
    margin-block-end: 0;
}

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

.books-bundle-banner .bundle-book-images {
    position: relative;
    height: 200px;
    width: 190px;
    margin-top: 10px;
}

.books-bundle-banner a {
    color: var(--yellow);
    font-weight: 400;
    font-size: 1.1rem;
    text-transform: uppercase;
}

.books-bundle-banner .buy-button a {
    color: var(--yellow);
    font-weight: 600;
    font-size: 1.2rem;
    text-transform: uppercase;
}

.books-bundle-banner .buy-button a {
    color: var(--yellow);
    font-weight: 600;
    font-size: 1.15rem;
    text-transform: uppercase;
}

.books-bundle-banner-container .bundles-link {
    font-size: 1.04rem;
}

.books-bundle-banner .book-image img {
    max-height: 260px;
}

@media screen and (max-width: 700px) {
    .books-bundle-banner-container {
        align-items: center;
    }

    .books-bundle-banner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 16px 12px 14px 12px;
    }
    
    .books-bundle-banner .tagline {
        font-size: 1.2rem;
    }
    
    .books-bundle-banner p.book-title {
        font-size: 1rem;
        padding: 0 0 2px 0;
        font-weight: 500;
    }
    
    .books-bundle-banner p.book-description {
        font-size: 0.88rem;
        line-height: 1.1rem;
    }
    
    .books-bundle-banner .buy-button a {
        font-size: 1.2rem;
    }
    
    .books-bundle-banner .book-image img {
        max-height: 200px;
    }
}
.books-page h1 {
    font-family: 'Alegreya', serif;
    font-size: 3rem;
    font-weight: 400;
    color: var(--purple);
    
    margin: 0;
    padding: 10px 0 10px 0;
}

.books-page .promotion {
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: 500;
    
    background: -webkit-linear-gradient(45deg, #B980F2, #FF7C79, #F9B24E);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    padding: 0;
    margin: 30px 0 0 0;
}

.books-page .old-price {
    text-decoration: line-through;
    padding: 0 10px 0 0;
}

.books-page .promo-price {
    font-weight: 400;
    
    background: -webkit-linear-gradient(45deg, #9B6CE0, #ff907b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

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

.books-page .author-name {
    font-size: 0.9rem;
    margin-top: 6px;
}

.books-page .update-note {
    color: var(--purple);
    font-weight: 500;
}

.book-image-description {
    display: flex;
    align-items: stretch;
    gap: 16px;
}

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

.book-image img {
    max-height: 330px;
    object-fit: contain;
}

.book-title-description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    justify-content: space-around;
}

.price {
    font-size: 1.2rem;
    color: var(--secondary-text-color);
    font-weight: 200;
}

.books-page h2 {
    font-size: 1.5rem;
    margin-block-start: 0;
    margin-block-end: 0;
}

.books-page a.book-title {
    color: var(--body-text-color);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.book-description {
    font-size: 1.07rem;
    line-height: 1.5rem;
    font-weight: 300;
}

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


.books-page .bundle-section {
    margin: 16px 0;
}

.books-page .books-bundle-banner .price.promo-price {
    font-weight: 600;
    font-size: 1.15rem;
    text-transform: uppercase;
}

.release-dates {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: flex-start;
    font-size: 0.8rem;
    font-weight: 300;
    margin: 8px 0;
}

@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;
        padding: 30px 0 30px 0;
    }
    
    .book-image-description {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    
    .book-title-description {
        align-items: center;
        gap: 24px;
        margin: 20px 0 10px 0;
    }
    
    .books-page a.book-title {
        gap: 10px;
    }
    
    .book-image {
        margin: 0 0 -20px 0px;
    }
    
    .book-image img {
        width: 220px;
    }
    
    .books-page h2 {
        font-size: 1.4rem;
    }
    
    .books-page .coming-soon {
        font-size: 1.3rem;
    }
    
    .book-description {
        font-size: 1rem;
        line-height: 2rem;
    }
    
    .price {
        font-size: 1.2rem;
    }
    
    .book-title-description .price {
        margin-top: -10px;

    }
    
    .books-page .promotion {
        text-align: center;
    }
    
    .release-dates {
        margin: 0;
    }
    
    .books-page .books-bundle-banner .stripe-link .dash {
        display: none;
    }
    
    .books-page .books-bundle-banner .promo-price {
        font-size: 1rem;
        line-height: 1.8rem;
    }
    
    .books-page .promotion {
        font-size: 1.8rem;
    }
}
.bundle-page h1 {
    font-family: 'Alegreya', serif;
    font-size: 3rem;
    font-weight: 400;
    color: var(--purple);
    
    margin: 0;
    padding: 10px 0 10px 0;
}

.bundle-page .promotion {
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: 500;
    
    background: -webkit-linear-gradient(45deg, #B980F2, #FF7C79, #F9B24E);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    padding: 0;
    margin: 30px 0 0 0;
}

.bundle-page h2 {
    font-size: 1.5rem;
    margin-block-start: 0;
    margin-block-end: 0.5em;
}

.bundle-page a {
    color: var(--yellow);
    text-decoration: none;
}

.bundle-page .bundle-section {
    margin: 0;
    padding: 20px 0;
}

.bundle-page .books-bundle {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: stretch;
    align-self: stretch;
    
    padding: 14px 28px 24px 28px;
    margin: 30px 0 30px 0;
}

.bundle-page .books-bundle .bundle-text-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    flex: 2;
    gap: 0px;
    justify-content: space-around;
}

.bundle-page .books-bundle .price {
    font-size: 1.2rem;
    color: var(--secondary-text-color);
    font-weight: 200;
}

.bundle-page .books-bundle .bundle-book-images {
    position: relative;
    height: 260px;
    min-width: 222px;
}

.bundle-page .books-bundle .bundle-book-images .book-image img {
    height: 260px;
}

.bundle-page .books-bundle .bundle-book-images .book-image {
    top: 0;
    position: absolute;
}

/* For 2 items */
.bundle-page .books-bundle .bundle-book-images .book-image:first-child:nth-last-child(2) {
  transform: translate(-20px, 15px);
  z-index: 1;
}

.bundle-page .books-bundle .bundle-book-images .book-image:last-child:nth-child(2) {
  transform: translate(20px, -15px);
  z-index: 2;
}

/* For 3 items */
.bundle-page .books-bundle .bundle-book-images .book-image:first-child:nth-last-child(3) {
  transform: translate(-60px, 20px);
  z-index: 0;
}

.bundle-page .books-bundle .bundle-book-images .book-image:nth-child(2):nth-last-child(2) {
  transform: translate(0, 0);
  z-index: 1;
}

.bundle-page .books-bundle .bundle-book-images .book-image:last-child:nth-child(3) {
  transform: translate(60px, 30px);
  z-index: 2;
}

/* For single image */
.bundle-page .books-bundle .bundle-book-images .book-image:only-child {
  transform: translate(0, 0);
  z-index: 1;
}

.bundle-page .books-bundle .books-bundle-licensees-header {
    font-size: 1.3rem;
    font-weight: 300;
}

.bundle-page .books-bundle a {
    color: var(--yellow);
}

.bundle-page .books-bundle .books-bundle-license-saving {
    font-weight: 300;
    font-size: 0.8rem;
    color: var(--secondary-text-color);
}

.bundle-page .books-bundle.promotion .books-bundle-license-saving {
    text-align: center;
}

.bundle-page .books-bundle a.book-link {
    background-color: var(--button-color);
    color: black;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 10px 20px 10px 20px;
    text-transform: uppercase;
    border-radius: 10px;
}

.bundle-page .book-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px 0 20px 0;
}

.bundle-page .buy-button a {
    display: block;
}

.bundle-page .book-list a.book-title {
    margin: 0;
    padding: 0px 0 2px 0;
    font-weight: 500;
    font-size: 1.1rem;
    color: var(--light-blue);
}

.bundle-page .books-bundle p.book-description {
    margin: 0;
    font-weight: 300;
    font-size: 0.9rem;
}

@media (prefers-color-scheme: light) {
    .bundle-page .book-list a.book-title {
        color: var(--secondary-purple);
    }
    
    .bundle-page .books-bundle p.book-description {
        font-weight: 400;
    }
}

.bundle-page .buy-and-savings {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.bundle-page .buy-and-savings.promo {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
}

.bundle-page .buy-and-savings .savings {
    font-size: 0.8rem;
    color: var(--secondary-text-color);
    font-weight: 200;
}

.bundle-page .buy-and-savings .savings.promo {
    font-size: 1.1rem;
    line-height: 2rem;
    font-weight: 400;
    
    background: -webkit-linear-gradient(45deg, #9B6CE0, #ff907b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (prefers-color-scheme: light) {
    .bundle-page .buy-and-savings .savings.promo {
        font-weight: 500;
        
        background: -webkit-linear-gradient(45deg, #9B6CE0, #FF7D67);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

@media screen and (max-width: 700px) {
    .bundle-page {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .bundle-page h1 {
        font-size: 2.4rem;
    }
    
    .bundle-page .books-bundle {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 8px 10px 8px 10px;
    }
    
    .bundle-page .books-bundle .tagline {
        font-size: 0.9rem;
    }
    
    .bundle-page .books-bundle p.book-description {
        font-size: 0.9rem;
        line-height: 1.2rem;
        padding-top: 8px;
    }
    
    .bundle-page .books-bundle .bundle-book-images .book-image img {
        height: 220px;
    }
    
    .bundle-page .books-bundle .bundle-book-images {
        height: 220px;
        margin-top: 0;
        margin-bottom: 20px;
    }
    
    .bundle-page .books-bundle p.tagline-price {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 8px 0 8px 0;
    }
    
    .bundle-page .books-bundle .bundle-text-container {
        align-items: center;
        gap: 16px;
    }
    
    .bundle-page .books-bundle .buy-button {
        align-items: center;
    }
    
    .bundle-page .book-image-description {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    
    .bundle-page .book-title-description {
        align-items: center;
        gap: 24px;
        margin: 20px 0 10px 0;
    }
    
    .bundle-page a.book-title {
        gap: 10px;
    }
    
    .bundle-page .book-image {
        margin: 0 0 -20px 0px;
    }
    
    .bundle-page .book-image img {
        width: 220px;
    }
    
    .bundle-page h2 {
        font-size: 1.4rem;
        padding: 0 20px;
    }
    
    .bundle-page .coming-soon {
        font-size: 1.3rem;
    }
    
    .bundle-page .book-description {
        font-size: 1rem;
        line-height: 2rem;
    }
    
    .bundle-page .price {
        font-size: 1.2rem;
    }
    
    .bundle-page .book-title-description .price {
        margin-top: -10px;

    }
    
    .bundle-page .promotion {
        text-align: center;
    }
    
    .bundle-page .book-list {
        gap: 16px;
        padding: 0 0 12px 0;
    }
    
    .bundle-page .book-list a.book-title {
        font-size: 1.2rem;
    }
    
    .bundle-page .buy-and-savings.promo {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
    }
    
    .bundle-page .promotion {
        font-size: 1.8rem;
    }
}
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;
    }
}
.email-form form {
    padding: 6px 0 6px 0;
    display: flex;
}

.email-form 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;
}

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

.email-form 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;
}

p.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);
}

.email-submission-info span {
    display: none;
}

.target-message {
    display: none;
}

.email-submission-info span:target {
    display: block;
}

.target-message:target {
    display: block;
    
    padding-top: 70px!important;
    margin-top: -40px!important;
}

.target-message:target p {
    font-weight: 300;
    margin: 20px 0 10px 0;
    font-size: 1.1rem;
    line-height: 1.7rem;
    padding: 10px 20px 10px 20px;
    border-radius: 10px;
    background-color: var(--banner-background);
}

.target-message:target .book-title {
    font-weight: 500;
}

@media screen and (max-width: 700px) {
    .email-form form {
        flex-direction: column;
        align-items: center;
        padding: 0;
    }
    
    .email-submission-info {
        width: 100%;
    }
    
    .email-form input {
        width: 90%;
        margin: 0 0px 20px 0px;
        
        font-size: 0.9rem;
    }
    
    .email-form 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%;
    }
    
    .target-message:target p {
        font-weight: 300;
        margin: 10px 0 10px 0;
        font-size: 1rem;
        line-height: 1.5rem;
        padding: 10px 20px 10px 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;
}

.book-footer {
    width: 100%;
    padding: 0px 20px 0px 20px;
}

.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;
}

.footer-links a:hover {
    color: var(--yellow);
}

.book-footer a {
    font-size: 0.9rem;
}

@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-links svg:hover {
    fill: var(--yellow);
}

.footer-copyright {
    font-size: 0.8rem;
    font-weight: 300;
    opacity: 0.7;
    display: flex;
    align-items: flex-end;
    line-height: 1.4rem;
}
.further-reading {
    padding: 14px 0;
    border-top: 1px solid var(--purple-border);
    border-bottom: 1px solid var(--purple-border);
    
    margin: 40px 0 40px 0;
}
.further-reading-section {
    padding: 10px;
}

.further-reading-title {
    font-size: 1.2rem;
    font-weight: 400;
    margin: 0;
    padding: 0;
}

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

.further-reading li {
    margin: 2px 14px;
    padding: 0;
}

.further-reading p {
    padding: 0;
}

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

.further-reading a:hover {
    color: var(--yellow);
}

@media screen and (max-width: 700px) {
    .further-reading {
        padding: 10px 0;
        margin: 30px 0 20px 0;
    }
    
    .further-reading-title {
        padding: 0 20px;
        font-size: 1.1rem;
    }
    
    .further-reading ul {
        margin: 8px 24px 0 24px;
    }
    
    .further-reading li {
        margin: 0px 14px;
        padding: 0;
    }
    
    .further-reading a {
        font-size: 1rem;
    }
}
header {
    position: fixed;
    top: 0;
    width: 100%;
    
    display: flex;
    justify-content: center;
    z-index: 100;
}

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

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

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

ul.site-navigation-links {
    list-style-type: none;
    padding-inline-start: 0;
    padding: 5px 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);
}
.book-author h2 {
    font-weight: 400;
    font-size: 1.4rem;
    margin: 40px 0 26px 0;
}

.book-author {
    font-weight: 300;
    font-size: 1.1rem;
    line-height: 1.7rem;
}

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

.author-header {
    color: var(--secondary-text-color);
    font-weight: 300;
    font-size: 1rem;
    
    display: flex;
    align-items: center;
    
    margin-top: 10px;
}

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

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

.author-header img {
    height: 80px;
    width: 80px;
    
    margin-right: 10px;
}

@media screen and (max-width: 700px) {
    .book-author h2 {
        font-size: 1.2rem;
        margin: 30px 0 20px 0;
    }
    
    .book-author {
        font-size: 1rem;
    }
    
    .author-header img {
        height: 70px;
        width: 70px;
    }
    
    .author-header {
        font-size: 0.9rem;
    }
    
    .author-header a {
        font-size: 1rem;
    }
    
    .author-header .name-and-info a {
        margin: 0;
    }
}
.book-intro-image {
    display: flex;
    gap: 30px;
    align-items: center;
    
    padding: 30px 10px 30px 10px;
}

.book-intro-image .book-image img {
    max-height: 320px;
}

@media screen and (max-width: 700px) {
    .book-marketing-page .book-intro-image {
        flex-direction: column;
    }
}
.book-marketing-page h1 {
    font-family: 'Alegreya', serif;
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--purple);
    
    margin: 0;
    padding: 10px 0 10px 0;
}

.book-marketing-page .book-subtitle {
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 1.5rem;
    color: var(--body-text-color);
}

.book-marketing-page .update-note {
    margin: 20px 0 10px 0;
    color: var(--pink);
    font-weight: 500;
    font-size: 1.2rem;
}

.book-marketing-page ul.short-intro {
    padding-inline-start: 10px;
    display: flex;
    flex-direction: column;
    list-style-type: initial;
    
    margin: 30px 10px 30px 10px;
    
    font-weight: 300;
    font-size: 1.1rem;
    line-height: 1.5rem;
    
    list-style: none;
}

.book-marketing-page.swift-gems ul.short-intro {
    margin: 30px 20px 30px 20px;
    
    font-size: 1.1rem;
}

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

.book-marketing-page .short-intro li {
    margin: 8px 0;
}

.book-marketing-page.swift-gems .short-intro li {
    margin: 6px 0;
}

.book-marketing-page .questions-callout {
    font-weight: 300;
    font-size: 1.1rem;
    line-height: 1.5rem;
    
    margin: 50px 0 20px 0;
}

.book-marketing-page .questions-callout a {
    text-decoration: none;
    font-weight: 400;
    color: var(--yellow);
}

.updated-promo {
    color: var(--light-blue);
}

.book-marketing-page .release-dates {
    padding: 14px 0 0 0;
}

@media screen and (max-width: 700px) {
    .book-marketing-page {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .book-marketing-page .release-dates {
        text-align: center;
        font-size: 0.75rem;
        padding: 20px 0 0 0;
    }
    
    .book-marketing-page h1 {
        font-size: 2.3rem;
        line-height: 2.4rem;
        text-align: center;
    }
    
    .book-marketing-page .book-subtitle {
        font-size: 1.2rem;
        text-align: center;
        padding-top: 10px;
    }
    
    .book-marketing-page ul.short-intro {
        font-size: 1rem;
        margin: 16px 0px 18px 0px;
        
        line-height: 1.4rem;
    }
    
    .book-marketing-page.swift-gems ul.short-intro {
        font-size: 1rem;
        margin: 16px 0px 18px 0px;
        
        line-height: 1.4rem;
    }
    
    .book-marketing-page .short-intro li {
        margin: 6px 0;
    }
    
    .book-marketing-page .questions-callout {
        font-size: 1rem;
        
        margin: 40px 0 10px 0;
    }
}
.book-table-of-contents h2 {
    font-family: 'Alegreya', serif;
    font-weight: 400;
    font-size: 1.9rem;
    margin: 36px 0 20px 0;
    color: var(--blue);
}

.swift-gems .book-table-of-contents h2 {
    color: var(--body-text-color);
    font-family: inherit;
    font-size: 1.5rem;
}

.book-table-of-contents ul.table-of-contents li {
    margin: 12px 0 12px 0;
    line-height: 1.4rem;
}

.book-table-of-contents .num-of-pages {
    padding: 0 0 0 10px;
    font-size: 0.9rem;
    color: var(--secondary-text-color);
    white-space: nowrap;
}

@media screen and (max-width: 700px) {
    .book-table-of-contents h2 {
        font-size: 1.6rem;
        margin: 26px 0 10px 0;
    }
    
    .swift-gems .book-table-of-contents h2 {
        font-size: 1.3rem;
        margin: 26px 0 20px 0;
    }
    
    .book-table-of-contents .num-of-pages {
        padding: 0 0 0 6px;
        font-size: 0.8rem;
    }
}
.buy-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    
    border-top: 1px solid var(--purple-border);
    border-bottom: 1px solid var(--purple-border);
    padding: 16px 20px;
}

.buy-buttons .old-price {
    text-decoration: line-through;
    padding: 0 4px 0 6px;
    font-weight: 400;
}

.buy-buttons .promo-price {
    font-weight: 700;
}

.buy-individual {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.buy-individual a.buy {
    background: var(--button-color);
    color: black;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
    padding: 10px 16px;
    text-transform: uppercase;
    text-decoration: none;
    min-width: 240px;
    text-align: center;
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
}

@media (prefers-color-scheme: light) {
    .buy-individual a.buy {
        font-weight: 500;
        padding: 10px 18px;
    }
}

.buy-buttons .request-access {
    font-weight: 300;
    font-size: 0.9rem;
    padding: 16px 0 0 0;
}

.buy-buttons .request-access a {
    text-decoration: none;
    color: var(--yellow);
    font-weight: 400;
}

.team-licenses {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.buy-team-licenses {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
}

.buy-volume {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.team-licensees-header {
    font-size: 1.3rem;
    font-weight: 300;
    padding: 20px 0 10px 0
}

.buy-volume a {
    color: var(--yellow);
    font-size: 0.9rem;
    font-weight: 400;
    border: 1px solid var(--yellow);
    border-radius: 10px;
    padding: 8px 16px;
    text-transform: uppercase;
    text-decoration: none;
    min-width: 200px;
    text-align: center;
}

@media (prefers-color-scheme: light) {
    .buy-volume a {
        font-weight: 500;
        border: 2px solid var(--yellow);
    }
}

.license-hint {
    font-weight: 300;
    font-size: 0.9rem;
    color: var(--body-text-color);
    line-height: 1.3rem;
}

.license-saving {
    font-weight: 300;
    font-size: 0.8rem;
    color: var(--secondary-text-color);
}

.large-purchase {
    font-weight: 300;
    font-size: 1rem;
    text-align: center;
}

p.large-purchase {
    margin: 0;
    padding: 20px 0 0 0;
}

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

.book-bundle {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.book-bundle .bundle-licensees-header {
    font-size: 1.3rem;
    font-weight: 300;
    padding: 20px 0 10px 0
}


.book-bundle a {
    color: var(--yellow);
    text-decoration: none;
}

.book-bundle a.stripe-link {
    border: 1px solid var(--yellow);
    color: var(--yellow);
    font-size: 0.9rem;
    font-weight: 400;
    border-radius: 10px;
    padding: 8px 16px;
    text-transform: uppercase;
    text-decoration: none;
    min-width: 200px;
    text-align: center;
}

@media (prefers-color-scheme: light) {
    .book-bundle a.stripe-link {
        font-weight: 500;
        border: 2px solid var(--yellow);
    }
}

@media screen and (max-width: 700px) {
    .buy-buttons {
        border: none;
        border-radius: 0;
        padding: 0;
    }
    
    .buy-individual {
        width: calc(100% - 40px);
    }
    
    .buy-individual a.buy {
        min-width: 100%;
        font-size: 1rem;
        padding: 10px 20px;
    }
    
    .buy-team-licenses {
        flex-direction: column;
        gap: 20px;
        width: calc(100% - 40px);
    }
    
    .buy-volume a {
        min-width: 100%;
        font-size: 0.9rem;
    }
    
    .book-bundle a.stripe-link {
        min-width: calc(100% - 40px);
        font-size: 0.9rem;
        border: 1px solid var(--yellow);
        margin: 0 20px 0 20px;
    }
    
    @media (prefers-color-scheme: light) {
        .book-bundle a.stripe-link {
            font-weight: 500;
            border: 2px solid var(--yellow);
        }
    }
    
    .team-licensees-header {
        font-size: 1.2rem;
        font-weight: 300;
        padding: 14px 0 8px 0
    }
    
    .license-hint {
        text-align: center;
    }
}

.content-summary h2 {
    font-weight: 400;
    font-size: 1.4rem;
    margin: 40px 0 20px 0;
}

.content-summary ul {
    padding-inline-start: 10px;
    display: flex;
    flex-direction: column;
    list-style-type: initial;
    
    margin: 0 10px 0 10px;
    
    font-weight: 300;
    font-size: 1.1rem;
    line-height: 1.4rem;
    
    list-style: none;
}

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

.content-summary li {
    margin: 6px 0;
}

@media screen and (max-width: 700px) {
    .content-summary h2 {
        font-size: 1.2rem;
        margin: 30px 0 10px 0;
    }
    
    .content-summary ul {
        margin: 0;
        
        font-size: 1rem;
    }
    
    .swift-gems .content-summary ul {
        margin: 0 4px 0 4px;
    }
}
.free-sample-callout {
    font-size: 1rem;
    font-weight: 300;
    margin: 0 0 20px 0;
    line-height: 1.7rem;
    text-align: center;
    font-style: italic;
}

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

.free-sample-tag {
    font-size: 0.7rem;
    padding: 2px 6px;
    color: var(--yellow) !important;
    border: 1px solid var(--yellow);
    border-radius: 8px;
    margin-left: 8px;
    white-space: nowrap;
}

.chapter-links .free-sample-tag {
    border-radius: 6px;
}

@media (prefers-color-scheme: light) {
    .free-sample-tag {
        font-weight: 500;
    }
}

@media screen and (max-width: 700px) {
    .free-sample-callout {
        margin: 0 0 40px 0;
    }
    
    .free-sample-tag {
        font-size: 0.6rem;
        padding: 1px 4px;
        border-radius: 6px;
    }
}
.purchase-description h2 {
    font-weight: 400;
    font-size: 1.5rem;
    margin: 40px 0 20px 0;
}

.swift-gems .purchase-description h2 {
    font-size: 1.4rem;
}

.purchase-description ul {
    padding-inline-start: 10px;
    display: flex;
    flex-direction: column;
    list-style-type: initial;
    
    margin: 0 10px 0 10px;
    
    font-weight: 300;
    font-size: 1.2rem;
    line-height: 1.5rem;
    
    list-style: none;
}

.swift-gems .purchase-description ul {
    font-size: 1.1rem;
}

.purchase-description ul li::before {
    content: "✓";
    color: var(--yellow);
    font-weight: bold;
    display: inline-block;
    width: 1.7rem;
    margin-left: -1em;
}

.purchase-description li {
    margin: 6px 0;
}

@media screen and (max-width: 700px) {
    .purchase-description h2 {
        font-weight: 400;
        font-size: 1.3rem;
        margin: 30px 0 10px 0;
    }
    
    .swift-gems .purchase-description h2 {
        font-size: 1.3rem;
    }
    
    .purchase-description ul {
        
        margin: 0 6px 0 6px;
        
        font-weight: 300;
        font-size: 1.1rem;
        line-height: 1.4rem;
    }
    
    .swift-gems .purchase-description ul {
        margin: 0 6px 0 6px;
    }
}
.requirements h2 {
    font-weight: 400;
    font-size: 1.4rem;
    margin: 40px 0 20px 0;
}

.requirements {
    font-weight: 300;
    font-size: 1.1rem;
    line-height: 1.7rem;
}

@media screen and (max-width: 700px) {
    .requirements h2 {
        font-size: 1.2rem;
        margin: 30px 0 10px 0;
    }
    
    .requirements {
        font-size: 1rem;
        line-height: 1.6rem;
    }
}

.testimonials {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-direction: row;
    align-items: stretch;
    flex-wrap: wrap;
    margin: 50px 0 20px 0;
    font-size: 0.9rem;
}

.testimonials::-webkit-scrollbar {
  display: none;
}


.testimonials .testimonial {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px;
    position: relative;
    text-align: left;
    background: var(--code-background);
    flex: 1 1 0px;
    min-width: min(calc(90vw - 32px), 360px);
    max-width: min(calc(90vw - 32px), 360px);
    border-radius: 16px;
}

.testimonial .testimonial-top {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    align-self: stretch;
}

.testimonial .testimonial-title {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.testimonial .testimonial-title {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 5px;
    margin-block-start: 0.2em;
    margin-block-end: 0.2em;
}

.testimonial .testimonial-header {
    display: flex;
    width: 100%;
}

.testimonials .testimonial span {
    text-align: left;
}

.testimonial .testimonial-header p {
    font-size: 0.8rem;
    opacity: 0.8;
}

.testimonial .testimonial-header .rating {
    display: flex;
    justify-content: flex-end;
}

.testimonial .testimonial-header .rating .star {
    color: gold;
}

.testimonial .testimonial-header .user-icon {
    width: 30pt;
    height: 30pt;
    border-radius: 30pt;
}

.testimonial .testimonial-top .source-logo {
    height: 16px;
}

.testimonial .testimonial-top .source-logo:not(.invert) {
    filter: invert(1);
}


@media (prefers-color-scheme: dark) {
    .testimonial .testimonial-top .source-logo.invert {
        filter: invert(1);
    }
    
    .testimonial .testimonial-top .source-logo:not(.invert) {
        filter: unset;
    }
}

.testimonial .testimonial-names {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 6pt;
    margin-top: 1pt;
    margin-bottom: 1pt;
}

.testimonial .testimonial-names .user-name {
    opacity: 0.8;
    font-size: 0.8rem;
    font-weight: 300;
}

.testimonial .testimonial-names .display-name {
    font-weight: 500;
}

.testimonial p.testimonial-text {
    margin: 10px 0 10px 0;
    font-weight: 300;
    font-size: 0.9rem;
    line-height: 1.3rem;
    padding-bottom: 4px
}


.testimonial.mini p.testimonial-text {
    font-weight: 500;
    font-size: 3rem;
    text-align: center;
    align-self: center;
    line-height: unset;
    line-height: 4rem;
}

.testimonial-footer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-grow:1;
    align-items: flex-end;
    flex-direction: row;
}

.testimonial .testimonial-footer span {
    font-size: 0.8rem;
    color: #777;
    padding: 0px 0px 0px 0px;
}


.testimonial {
    text-decoration: none;
    color: var(--body-text-color);
}
.preview-chapter-page {
    padding-top: 10px;
}

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

.preview-chapter-page .contents ul {
    font-size: 1.2rem;
    line-height: 1.5rem;
    font-weight: 300;
    padding: 10px 0;
    margin: 10px 30px 0 30px;
    color: var(--secondary-text-color);
    list-style-type: circle;
}

.preview-chapter-page .contents li {
    margin: 10px 0 10px 0;
}

.preview-chapter-page .book-purchase-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    
    padding: 20px 0 20px 0;
    border-top: 1px solid var(--purple-border);
    margin-top: 40px;
    line-height: 1.4rem;
}

.book-swiftui-fundamentals .preview-chapter-page .book-purchase-info {
    margin-top: 20px;
    padding-bottom: 30px;
}

.preview-chapter-page .purchase-callout {
    font-size: 1.2rem;
    font-weight: 400;
}

.preview-chapter-page a.book-link {
    text-decoration: none;
    color: black;
    font-weight: 500;
    width: fit-content;
    padding: 10px 20px 10px 20px;
    text-transform: uppercase;
    border-radius: 10px;
    background-color: var(--button-color);
    font-size: 0.9rem;
}

.preview-chapter-page .request-access {
    font-weight: 300;
    font-size: 1rem;
}

.preview-chapter-page .request-access a {
    text-decoration: none;
    font-weight: 400;
    color: var(--yellow);
}

@media screen and (max-width: 700px) {
    .preview-chapter-page {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .preview-chapter-page h1 {
        font-size: 2rem;
        padding: 10px 0 0 0;
    }
    
    .preview-chapter-page .contents ul {
        font-size: 1.1rem;
        margin: 10px 20px 0 20px;
    }
    
    .preview-chapter-page .book-purchase-info {
        margin-top: 30px;
        align-items: center;
        text-align: center;
    }
    
    .preview-chapter-page .purchase-callout {
        font-size: 1.1rem;
        font-weight: 400;
    }
    
    .preview-chapter-page a.book-link {
        padding: 8px 16px 8px 16px;
    }
}

.promotion .books-page h {
    font-size: 1.6rem;
}

@media screen and (max-width: 700px) {
    .promotion .books-page h {
        font-size: 1.4rem;
    }
}

.promotion .book-description {
    padding-top: 0px;
}

.promotion .books-page .book-header {
    display: flex;
    gap: 40px;
    justify-content: space-between;
    align-self: stretch;
}

.promotion .books-page .book-headline-list {
    display: flex;
    align-self: stretch;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    justify-content: space-around;
}

.promotion .books-page .book-header svg {
    width: 130px;
}

.promotion .promotion-sticker-narrow {
    display: none;
}

@media screen and (max-width: 700px) {
    .promotion .book-image-sticker {
        position: relative;
        padding-bottom: 20px;
    }

    .promotion .promotion-sticker-narrow {
        display: block;
        position: absolute;
        top: 155px;
        right: -40px;
    }
    
    .promotion .books-page .book-headline-list {
        align-items: center;
    }

    .promotion .promotion-sticker-narrow svg {
        width: 130px;
    }


    .promotion .promotion-sticker-wide {
        display: none;
    }

    .promotion .books-page .book-header {
        display: flex;
        gap: 0px;
        justify-content: center;
        padding-bottom: 40px;
    }
}

.promotion .promotion-sticker {
    rotate: 0deg;
}

.promotion-banner {
    padding: 14px 20px 14px 20px;
    background-color: #FF7D67;
    border-radius: 8px;
    color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    margin: 40px 0 20px 0;

    background: linear-gradient(45deg, #E88793, #BC95F7);
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

.promotion-banner .promotion-offer {
    font-weight: 700;
    font-size: 1.6rem;
    text-shadow: 0.5px 0.5px 0.1px black;
    letter-spacing: 0.9px;
}

.promotion-banner .offer-dates {
    font-weight: 700;
    font-size: 1.1rem;
}

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

.promotion .buy-now-callout {
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #BC95F7;

    padding: 20px 0 10px 0;
    text-align: center;

    text-shadow: 0.5px 0.5px 2px black;
}

.promotion a.buy-now-callout {
    text-decoration: none;
}

@media (prefers-color-scheme: light) {
    .promotion-banner {
        background: linear-gradient(45deg, #FFA9B4, #D5B9FD);
        box-shadow: 0.5px 0.5px 0.5px 0.1px rgba(0, 0, 0, 0.2);
    }

    .promotion-banner .promotion-offer {
        font-weight: 600;
        text-shadow: 0.4px 0.4px 0.1px black;
    }

    .promotion-banner .offer-dates {
        font-weight: 600;
        font-size: 1.1rem;
    }

    .promotion .buy-now-callout {
        color: #9B6CE0;

        text-shadow: 0.1px 0.1px 0.5px black;
    }
}

@media screen and (max-width: 700px) {
    .promotion-banner {
        padding: 14px 20px 14px 20px;
        border-radius: 12px;
        margin: 30px 0 16px 0;

    }

    .promotion-banner .promotion-offer {
        font-size: 1.4rem;
        letter-spacing: 0.3px;
        text-shadow: 0.3px 0.3px 0.05px black;
    }

    .promotion-banner .offer-dates {
        font-weight: 700;
        font-size: 1rem;
    }
}


.promotion .buy-buttons .request-access a {
    text-align: center;
}

.promotion .discount-info {
    font-weight: 300;
    font-size: 0.9rem;
    color: var(--body-text-color);
    text-align: center;
}

@media (prefers-color-scheme: light) {
    .promotion .free-sample-tag {
        font-weight: 500;
    }
}

.promotion .preview-chapter-page .promotion-info {
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #BC95F7;

    padding: 10px 0 8px 0;

    text-shadow: 0.5px 0.5px 2px black;
}

.promotion .preview-chapter-page a.promotion-info {
    text-decoration: none;
}

@media (prefers-color-scheme: light) {
    .promotion .preview-chapter-page .promotion-info {
        color: #9B6CE0;

        text-shadow: 0.1px 0.1px 0.5px black;
    }
}

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

.promotion .license-saving {
    text-align: center;
}
.purchase-complete-page h1 {
    font-family: 'Alegreya', serif;
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--purple);
    
    margin: 0;
    padding: 10px 0 10px 0;
}

.purchase-complete-page h2 {
    font-weight: 400;
    font-size: 1.6rem;
    margin: 40px 0 10px 0;
    color: var(--blue);
}

.purchase-complete-page .purchase-thank-you {
    font-weight: 300;
    font-size: 1.1rem;
    line-height: 1.5rem;
}

@media screen and (max-width: 700px) {
    .purchase-complete-page {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .purchase-complete-page h1 {
        font-size: 2rem;
        line-height: 2.4rem;
    }
    
    .purchase-complete-page .purchase-thank-you {
        font-size: 1.1rem;
    }
    
    .purchase-complete-page h2 {
        font-size: 1.4rem;
        margin: 30px 0 10px 0;
    }
}


.purchase-complete-page .request-access {
    font-weight: 300;
    font-size: 0.9rem;
    line-height: 1.4rem;
    
    padding: 16px 0 0 0;
    margin-top: 5vh;
    display: block;
}

.purchase-complete-page .request-access a {
    text-decoration: none;
    color: var(--yellow);
    font-weight: 400;
}
.releases-page h1 {
    font-family: 'Alegreya', serif;
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--purple);
    
    margin: 0;
    padding: 10px 0 10px 0;
}

.releases-section {
    padding: 20px 0 20px 0;
}

.releases-page h2 {
    font-weight: 400;
    font-size: 1.5rem;
    padding: 0px 0 0px 0;
}


.releases-page h3 {
    font-weight: 400;
    font-size: 1.2rem;
    margin: 0;
}


.releases-page .releases {
    display: flex;
    flex-direction: column;
    gap: 36px;
}


.releases-page .release-note {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 20px;
}

.releases-page .release-note p {
    font-weight: 300;
    font-size: 1rem;
    margin: 0;
    
    line-height: 1.5rem;
    padding-top: 6px;
}

.releases-page .release-note ul {
    margin: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
    padding: 0 20px;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.6rem;
}

.releases-page .release-note ul a {
    text-decoration: none;
    color: var(--body-text-color);
}

.releases-page .release-note ul a:hover {
    color: var(--yellow);
}

.releases-page .release-note ul li::marker {
    content: "→ ";
    color: var(--blue);
}

@media screen and (max-width: 700px) {
    .releases-page {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .releases-page h1 {
        font-size: 2rem;
        line-height: 2.4rem;
    }
    
    .releases-page h2 {
        font-size: 1.4rem;
    }
}

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

.request-access-page h2 {
    font-weight: 300;
    font-size: 1.5rem;
    margin: 40px 0 10px 0;
}

.request-access-page .email-callout {
    font-weight: 300;
    font-size: 1.1rem;
    line-height: 1.5rem;
}

.request-access-page .form-hint {
    font-weight: 300;
    font-size: 0.9rem;
    line-height: 1.4rem;
}

.request-access-page .form-hint a {
    font-weight: 400;
    text-decoration: none;
    color: var(--yellow);
}

.request-access-page form {
    margin: 30px 0 10px 0;
}

.request-access-page .cookie-info {
    color: var(--secondary-text-color);
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 300;
}

@media screen and (max-width: 700px) {
    .request-access-page {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .request-access-page h1 {
        font-size: 2rem;
        line-height: 2.4rem;
    }
    
    .request-access-page h2 {
        font-size: 1.4rem;
        margin: 30px 0 10px 0;
    }
    
    .request-access-page .email-callout {
        font-size: 1.1rem;
    }
    
    .request-access-page .email-form button {
        font-size: 0.9rem;
        padding: 8px 20px 8px 20px;
        width: 80%;
    }
    
    .request-access-page .email-form input {
        font-size: 1rem;
        width: calc(100% - 20px);
    }
    
    .request-access-page .cookie-info {
        font-size: 0.9rem;
        line-height: 1.5rem;
    }
    
    .request-access-page form {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}
.sample-info {
    border-bottom: 1px solid var(--purple-border);
    padding: 0 0 20px 0;
    border-bottom: 1px solid var(--purple-border);
    line-height: 1.6rem;
    font-size: 1.2rem;
    font-weight: 300;
}

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

.sample-download-link {
    display: flex;
    gap: 10px;
    align-items: center;
    
    color: var(--yellow);
    font-size: 0.8rem;
    font-weight: 400;
    border: 1px solid var(--yellow);
    border-radius: 10px;
    padding: 6px 12px;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    width: fit-content;
}

@media (prefers-color-scheme: light) {
    .sample-download-link {
        border: 2px solid var(--yellow);
    }
    
    a.sample-download-link {
        font-weight: 500;
    }
}

.sample-download-link div {
    display: flex;
    align-items: center;
}

.sample-download-link svg {
    fill: var(--yellow);
    width: 20px;
    height: 20px;
}

.sample-info .book-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media screen and (max-width: 700px) {
    .sample-info {
        font-size: 1.1rem;
    }
    
    .sample-info .book-info {
        gap: 10px;
    }
    
    .sample-info .request-access {
        font-size: 0.9rem;
    }
}

.free-sample {
    font-size: 1.2rem;
    font-weight: 300;
    color: var(--secondary-text-color);
    font-style: italic;
}

@media screen and (max-width: 700px) {
    .free-sample {
        font-size: 1.1rem;
    }
}
.sample-subchapter {
    
}

.sample-subchapter h2 {
    padding: 30px 0 10px 0;
    font-size: 1.4rem;
    font-weight: 400;
    margin: 0;
}

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

p.sample-intro {
    font-size: 1.1rem;
    line-height: 1.7rem;
    padding: 10px 20px 10px 20px;
    border-radius: 10px;
    margin-bottom: 10px;
    background-color: var(--banner-background);
}

p.sample-intro a {
    color: var(--yellow);
    font-weight: 400;
    text-decoration: none;
}

p.sample-intro strong {
    font-weight: 500;
}

.preview-chapter-page.sample .further-reading p {
    font-size: 1.2rem;
    line-height: 1.8rem;
    font-weight: 300;
    padding: 0;
    margin: 0px;
}

@media screen and (max-width: 700px) {
    .preview-chapter-page.sample {
        padding: 10px 0 0 0;
    }
    
    .preview-chapter-page.sample h1 {
        padding: 10px 20px 0 20px;
    }
    
    .preview-chapter-page.sample .sample-info {
        padding: 0 20px 20px 20px;
    }
    
    .preview-chapter-page.sample .free-sample {
        padding: 0 20px 0 20px;
    }
    
    .sample-subchapter p {
        padding: 10px 20px 10px 20px;
        font-size: 1.1rem;
    }
    
    .sample-subchapter h2 {
        padding: 30px 20px 10px 20px;
        font-size: 1.3rem;
    }
    
    p.sample-intro {
        font-size: 1rem;
        line-height: 1.7rem;
        padding: 10px 20px 10px 20px;
        border-radius: 0px;
        margin-bottom: 10px;
        background-color: var(--banner-background);
    }
}

.tips-sample-info {
    font-size: 1.1rem;
}

.preview-read-tips-callout h2 {
    font-size: 1.6rem;
    font-weight: 400;
}

.preview-read-tips-callout ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

.preview-read-tips-callout li {
    margin: 10px 0px;
    font-size: 1.1rem;
    font-weight: 300;
    padding: 4px 0px;
    margin: 0px;
}

.preview-read-tips-callout li a {
    color: var(--body-text-color);
}

.preview-read-tips-callout li a::before {
    content: "✦";
    color: var(--blue);
    font-weight: bold;
    display: inline-block;
    width: 1.7rem;
    margin-left: 20px;
}

.preview-read-tips-callout li a:hover {
    color: var(--yellow);
}

@media screen and (max-width: 700px) {
    .preview-read-tips-callout h2 {
        font-size: 1.4rem;
    }
}

.book-swift-gems .sample-info {
    border-top: 1px solid var(--purple-border);
    border-bottom: 0px solid var(--purple-border);
    margin-top: 30px;
    padding-top: 10px;
}
input#search-box {
    background-color: var(--chapter-header-background);
    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;
    width: 100%;
    
    margin: 20px 0 10px 0;
}

input#search-box:focus {
    border: 1px solid var(--body-text-color);
    outline: none !important;
    outline-style: none;
}

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

#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: 1.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: 1rem;
}

.search-result-chapter-title {
    font-size: 0.8rem;
    color: var(--secondary-text-color);
}
#site-navigation-menu {
    display: none;
}

button#site-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;
    }
    
    ul.site-navigation-links {
        padding: 0;
    }
    
    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#site-navigation-menu {
        cursor: pointer;
        border: none;
        background-color: transparent;
        padding: 10px;
        height: 50px;
        
        display: block;
        
        margin-right: 10px;
    }
    
    button#site-navigation-menu svg {
        fill: var(--yellow);
        width: 32px;
    }
    
    @media (prefers-color-scheme: light) {
        button#site-navigation-menu svg {
            width: 34px;
        }
    }
    
    header.menu-expanded button#site-navigation-menu svg {
        fill: var(--header-inverted-text-color);
    }
    
    header.inverted button#site-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;
    }
    
    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;
    }
}
html {
    font-size: 1em;
    min-height: 100%;
}

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: #fcfdff;
    
    --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;
    --light-blue: #3F8DBE;
    --yellow: #FF9B00;
    
    --red: #F25757;
    --green: #17B890;
    --indigo: #4663B7;
    --orange: #FF765F;
    --lightGreen: #90B494;
    --brown: #94594E;
    
    --purple-border: #BC95F7;
    --gray-border: #B6B6B6;
    
    --header-text-color: #ffa800;
    --header-inverted-text-color: black;
    --header-inverted-background: #FFD65E;
    
    --chapter-header-background: #D6D6D6;
    --chapter-header-text-color: black;
    --chapter-menu-button-color: black;
    --chapter-header-hover-color: #F97A00;
    --nav-h1-color: var(--body-text-color);
    
    --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);
}

@media (prefers-color-scheme: dark) {
    :root {
        --body-text-color: white;
        --background-color: #252527;
        
        --secondary-text-color: #B6B6B6;
        --tertiary-text-color: #444444;
        
        --code-comment: #646464;
        
        --code-background: #171717;
        --code-in-paragraph: #212121;
        --banner-background: #444444;
        
        --purple: #B39DFF;
        --secondary-purple: #D2B3FF;
        
        --pink: #F4718B;
        --blue: #6BB4E2;
        --light-blue: #B1DDF8;
        --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);
        --gray-border: #646464;
        
        --header-text-color: var(--yellow);
        --header-inverted-text-color: var(--yellow);
        --header-inverted-background: #1D1E20;
        
        --chapter-header-background: #202020;
        --chapter-header-text-color: white;
        --chapter-menu-button-color: var(--yellow);
        --chapter-header-hover-color: var(--yellow);
        
        --nav-h1-color: var(--secondary-text-color);
        
        --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);
    }
}

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

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

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

.light-image.narrow-image {
    display: none;
}

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

.dark-image.narrow-image {
    display: none;
}

@media screen and (max-width: 700px) {
    .light-image.wide-image {
        display: none;
    }
    
    .light-image.narrow-image {
        display: var(--light-image-display);
    }
    
    .dark-image.wide-image {
        display: none;
    }
    
    .dark-image.narrow-image {
        display: var(--dark-image-display);
    }
}


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

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

.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%;
}

.container.chapter-page {
    max-width: 1000px;
}

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

@media screen and (max-width: 700px) {
    .container {
        padding: 0;
    }
    
    body.menu-expanded {
        overflow: hidden;
        height: 100vh;
        height: 100svh;
        position: fixed;
    }
}

.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);
}


h1 {
    /* Gradient text */
    background: linear-gradient(90deg, #a16cdd 0%, #5c5fee 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; /* for Firefox */
    color: transparent;
}

@media (prefers-color-scheme: dark) {
    h1 {
        /* Gradient text */
        background: linear-gradient(90deg, #c39efa 0%, #a1a3fc 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text; /* for Firefox */
        color: transparent;
    }
}
ul.table-of-contents {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul.table-of-contents li {
    margin: 20px 0 20px 0;
}

.swift-gems ul.table-of-contents li {
    margin: 10px 0 10px 0;
}

.table-of-contents a {
    text-decoration: none;
}

.table-of-contents .chapter-title {
    color: var(--body-text-color);
    font-size: 1.2rem;
    font-weight: 300;
    
    display: flex;
    align-items: center;
}

.table-of-contents.main .chapter-title {
    font-size: 1.3rem;
}

.swift-gems .table-of-contents.main .chapter-title {
    font-size: 1.3rem;
    font-weight: 400;
    
    margin: 30px 0 20px 0;
}

.swift-gems .table-of-contents.main .chapter-title.subchapter {
    font-size: 1.1rem;
    font-weight: 300;
    
    padding: 4px 0 4px 0;
    
    margin: 0;
}

.swift-gems .table-of-contents.main .chapter-title.subchapter::before {
    content: "✦";
    color: var(--blue);
    font-weight: bold;
    display: inline-block;
    width: 1.7rem;
    margin-left: 20px;
}

.table-of-contents .chapter-number {
    margin-right: 10px;
}

.table-of-contents .subchapter {
    margin-left: 20px;
    font-size: 1.1rem;
}

.book-swift-gems .table-of-contents .subchapter {
    margin-left: 26px;
}

.table-of-contents.main .subchapter {
    margin-left: 20px;
    font-size: 1.2rem;
}

.swift-gems .table-of-contents.main .subchapter {
    margin-left: 0px;
}

.table-of-contents .chapter-title:hover {
    color: var(--yellow);
}

.table-of-contents .chapter-description a p {
    margin-top: 8px;
    font-weight: 200;
    font-size: 1rem;
    color: var(--secondary-text-color);
    line-height: 1.3rem;
}

.swift-gems .table-of-contents .chapter-description {
    font-size: 1rem;
}

.table-of-contents .chapter-description li {
    margin: 6px 0 6px 0;
}

.table-of-contents .chapter-description.subchapter {
    font-size: 1rem;
}


@media screen and (max-width: 700px) {
    ul.table-of-contents li {
        margin: 20px 0 20px 0;
    }
    
    .table-of-contents .chapter-number {
        margin-right: 6px;
    }
    
    .table-of-contents .chapter-title {
        font-size: 1.1rem;
        align-items: flex-start;
    }
    
    .table-of-contents.main .chapter-title {
        font-size: 1.1rem;
    }
    
    .table-of-contents .subchapter {
        font-size: 1rem;
    }
    
    .table-of-contents.main .subchapter {
        font-size: 1rem;
        margin-left: 10px;
    }
    
    ul.table-of-contents li .subchapter {
        margin: -2px 0 0px 10px;
    }
    
    .table-of-contents .chapter-description a {
        font-size: 0.9rem;
    }
    
    .table-of-contents .chapter-description.subchapter {
        font-size: 0.9rem;
        margin-top: 8px;
    }
    
    .table-of-contents .chapter-description ul {
        padding: 0 0 0 24px;
    }
    
    .table-of-contents .chapter-description li {
        margin: 4px 0 4px 0;
    }
    
}