@charset "utf-8";
/* The Punctuation Guide - Responsive, Print, and Theme Styles (2026) */
/* Scope: breakpoint layout changes, print layout rules, and color-scheme theming. */

@media screen and (max-width: 768px) {
  .contains-page-nav {
    display: block;
  }

  #page-navigation {
    display: none;
  }

  nav#site-wide-nav {
    display: block;
  }

  nav#site-wide-nav ul:last-child {
    border-top: 2px solid var(--color-border);
  }

  nav#site-wide-nav ul.site-wide-nav-items:first-child li:last-child a.active {
    border-right: none;
  }

  nav#site-wide-nav ul.site-wide-nav-items:last-child li:first-child a.active {
    border-left: none;
  }

  .end-of-sentence,
  .style-matter {
    display: none;
  }

  .end-of-sentence-row {
    display: table-row;
    text-align: center;
  }

  .end-of-sentence-row span {
    padding: 10px;
  }

  .end-of-sentence-row td {
    background: #959595;
    color: black;
  }

  .end-is-abbreviation span::after { content: "ending with an abbreviation"; }
  .end-is-title-question span::after { content: "ending with a name or title of work ending with a question mark"; }
  .end-is-quotation-question span::after { content: "ending with a quotation ending with a question mark"; }
  .end-is-title-exclamation span::after { content: "ending with a name or title of work ending with an exclamation point"; }
  .end-is-quotation-exclamation span::after { content: "ending with a quotation ending with an exclamation point"; }
  .end-is-quotation-period span::after { content: "ending with a quotation ending with a period (not abbreviation) or no punctuation"; }
  .end-is-quotation-abbreviation span::after { content: "ending with a quotation ending with an abbreviation"; }
  .end-is-parenthetical span::after { content: "ending with a parenthetical"; }

  span.chicago-serial-comma::after { content: " when listing more than two items"; }
  span.ap-serial-comma::after { content: " when listing more than two items"; }
  span.chicago-abbreviations::after { content: " when forming abbreviations"; }
  span.ap-abbreviations::after { content: " when forming abbreviations"; }
  span.chicago-apostrophe-s::after { content: " to form possessives of singular proper nouns ending in s"; }
  span.ap-apostrophe-s::after { content: " to form possessives of singular proper nouns ending in s"; }

  .terminal-chart-intro::after {
    content: " (On mobile devices, the chart might be easier to read if you rotate your device.)";
  }
}

@media screen and (max-width: 480px) {
  html#front-page main {
    display: block;
  }

  nav#front-page-nav {
    display: block;
    margin: 0 0 5em 1em;
  }

  nav#front-page-nav section {
    width: 100%;
    max-width: 100%;
    margin-top: 7.5%;
  }

  #front-page-nav section > div:nth-child(2) {
    padding-top: 5px;
  }

  div#site-title {
    padding-top: 40px;
    padding-bottom: 15px;
  }

  .site-wide-nav-items a {
    min-width: 0;
  }

  .example {
    padding-left: 0;
    padding-right: 0;
  }

  div.example > span {
    border-radius: 5px 0 5px 0;
  }

  #titles-container {
    display: block;
  }

  span#return-to-top-text {
    display: none;
  }

  #terminal-punctuation-table {
    overflow-x: scroll;
    padding: 0;
  }

  table {
    overflow-x: scroll;
  }
}

@media screen and (max-width: 359px) {
  .other-matters div,
  #front-page-nav section > div:nth-child(2) {
    margin-left: 0;
  }

  nav#front-page-nav a::before {
    display: none;
  }

  #main-content {
    margin-left: 1px;
    margin-right: 1px;
  }
}

@media screen and (min-width: 768px) {
  div#top-ten-tips a {
    position: absolute;
    top: -70px;
    right: -70px;
    height: 155px;
    width: 155px;
    background: var(--color-text-dark);
    border-radius: 100%;
    text-align: center;
    padding: 4.5em 1.5em 0 1.5em;
    transform: rotate(40deg);
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-tap-highlight-color: transparent;
  }

  div#top-ten-tips a:link,
  div#top-ten-tips a:visited {
    border: none;
    color: #E3E3E3;
  }

  div#top-ten-tips a:hover,
  div#top-ten-tips a:focus {
    border: none;
    color: #E3E3E3;
    transform: scale(1.3) rotate(40deg);
  }

  div#top-ten-tips a:active {
    border: none;
    color: #E3E3E3;
    transform: scale(1) rotate(40deg);
  }
}

@media screen and (min-width: 1050px) {
  div#site-title {
    padding-top: 4%;
  }

  #site-wide-nav {
    padding-left: 6%;
    padding-right: 6%;
  }

  nav#site-wide-nav ul.site-wide-nav-items:first-child li:first-child a.active {
    border-left: 2px solid var(--color-border);
  }

  nav#site-wide-nav ul.site-wide-nav-items:last-child li:last-child a.active {
    border-right: 2px solid var(--color-border);
  }
}

@media screen and (min-width: 1600px) {
  #site-wide-nav {
    padding-left: 12%;
    padding-right: 12%;
  }

  #main-content {
    max-width: 1110px;
  }

  div#top-ten-tips a {
    position: absolute;
    top: -175px;
    right: -175px;
    height: 350px;
    width: 350px;
    padding-top: 5.4em;
  }

  #site-title span:first-child {
    padding-left: 0;
  }

  div.example .example-text:first-of-type {
    padding-top: 40px;
  }
}

@media print {
  div#site-title:after {
    content: "ThePunctuationGuide.com";
  }

  div#site-title span,
  #site-wide-nav,
  #page-navigation,
  footer,
  .chart-break {
    display: none;
  }

  body {
    margin: 4em;
  }

  div.example {
    border: thin black solid;
    padding: 10px;
    margin-bottom: 5px;
    page-break-inside: avoid;
  }

  .chart-example {
    margin-top: 5px;
  }

  article:after,
  #site-title:after,
  #terminal-punctuation-table:after {
    content: "This material is copyright © 2023 by thepunctuationguide.com.";
  }

  article,
  tr {
    page-break-inside: avoid;
  }

  section {
    page-break-after: always;
  }
}

@media (prefers-color-scheme: dark) {
  html {
    background-color: var(--color-dark-bg);
    color: #E5E5E5;
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    color: #CDCDCD;
  }

  div#site-title {
    background-color: #232323;
  }

  #site-title span {
    color: var(--color-primary);
  }

  #site-wide-nav {
    background: var(--color-dark-nav);
  }

  .site-wide-nav-items a {
    background: var(--color-dark-nav);
  }

  .site-wide-nav-items a:link,
  .site-wide-nav-items a:visited {
    color: #d9d9d9;
  }

  .site-wide-nav-items a:hover,
  .site-wide-nav-items a:focus {
    color: var(--color-primary);
    background: #4F4F4F;
  }

  .site-wide-nav-items a:link.active,
  .site-wide-nav-items a.active {
    color: var(--color-primary);
    background: var(--color-dark-nav);
    border-left: none;
    border-right: none;
  }

  .site-wide-nav-items ul.dropdown-content a {
    color: #E4E4E4;
    border: 0 !important;
  }

  nav#site-wide-nav ul.site-wide-nav-items:first-child li:first-child a.active {
    border-left: none;
  }

  nav#site-wide-nav ul.site-wide-nav-items:last-child li:last-child a.active {
    border-right: none;
  }

  .site-wide-nav-items ul.dropdown-content {
    border: 1px solid #4A4A4A;
    background: rgba(20, 20, 20, 0.94);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  }

  .site-wide-nav-items ul.dropdown-content a:hover,
  .site-wide-nav-items ul.dropdown-content a:focus {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.08);
  }

  .example {
    background: var(--color-dark-example);
    color: #BFBFBF;
  }

  footer {
    background-color: black;
    color: white;
  }

  footer a:link,
  footer a:visited {
    color: #A1A1A1;
    border-bottom: 2px solid #5F5F5F;
  }

  footer a:hover,
  footer a:focus {
    color: white;
    border-bottom: 4px solid grey;
  }

  #copyright {
    color: #AAAAAA;
  }

  #main-content a:link,
  nav#front-page-nav a:link,
  #main-content a:visited,
  nav#front-page-nav a:visited {
    color: #CECECE;
    border-bottom: 2px solid #5F5F5F;
  }

  #main-content a:hover,
  nav#front-page-nav a:hover,
  #main-content a:focus,
  nav#front-page-nav a:focus {
    color: white;
    border-bottom: 4px solid grey;
    transition: all 0.2s ease;
  }

  nav#front-page-nav section {
    background: var(--color-dark-example);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }

  nav#front-page-nav section:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  }

  nav#front-page-nav section .category {
    color: #949494;
    text-shadow: 1px 1px 1px black;
  }

  #front-page-nav section > div:nth-child(2) {
    color: #949494;
  }

  nav#front-page-nav a::before {
    color: #D5D5D5;
    text-shadow: 1px 1px 1px black;
  }

  .internal-example {
    color: #D7D7D7;
  }

  span.erroneous-punctuation {
    color: #FFA6A6;
  }

  .erroneous-punctuation::before,
  .missing-punctuation::before {
    border: 2px solid #FFA6A6;
    animation: blink-dark 2s infinite;
  }

  .erroneous-punctuation::after,
  .missing-punctuation::after {
    content: attr(data-content);
    position: relative;
    z-index: auto;
  }

  @keyframes blink-dark {
    0% { opacity: .2; }
    50% { opacity: .4; }
    100% { opacity: .2; }
  }

  div#top-ten-tips a:hover,
  div#top-ten-tips a:focus {
    color: white;
  }

  div#top-ten-tips a:active {
    color: #3B3B3B;
  }

  #page-navigation a {
    color: #9B9B9B;
  }

  #page-navigation a:hover {
    background-color: var(--color-dark-bg);
    color: white;
  }

  #page-navigation li.active {
    background-color: var(--color-dark-bg);
  }

  #page-navigation li.active a {
    color: white;
  }

  #titles-container h2 {
    background: #959595;
    color: black;
  }

  #titles-container div {
    background: var(--color-dark-example);
  }

  td {
    border: 3px solid var(--color-dark-bg);
    background: var(--color-dark-example);
  }

  th {
    background: #959595;
    color: black;
    border: 3px solid var(--color-dark-bg);
  }

  .chart-example {
    background: black;
  }

  span#site-title-pilcrow {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.88 19'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bstroke:%23FFD530;fill:%23FFD530;stroke-miterlimit:10;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3ELayer 2 (2)pilcrow-smaller%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_2-2' data-name='Layer 2'%3E%3Cpath class='cls-1' d='M11.8,3.31H1.61L2.59.5h10.2ZM2.88,18.5H.7L7,.5H9.18Zm4.4,0H5.1L11.41.5h2.17Zm4.08-8.28H8.41L11.82.5h2.95a4.23,4.23,0,0,1,2.4.62,2.76,2.76,0,0,1,1.14,1.73A4.76,4.76,0,0,1,18,5.37a7,7,0,0,1-1.5,2.5A7.17,7.17,0,0,1,14.18,9.6,6.58,6.58,0,0,1,11.36,10.22Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  }
}

@media (prefers-color-scheme: dark) and (min-width: 768px) {
  div#top-ten-tips a {
    background: var(--color-primary);
    color: var(--color-dark-bg);
    box-shadow: 2px 2px 2px black;
  }

  div#top-ten-tips a:link,
  div#top-ten-tips a:visited {
    color: var(--color-dark-bg);
  }

  div#top-ten-tips a:hover,
  div#top-ten-tips a:focus {
    color: black;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}