@charset "UTF-8";
/*-------------------------------------------*/
/* CSS Created by Penny Arcade - 03-15-2023 -*/
/* www.penny-arcade.com ---------------------*/
/*-------------------------------------------*/
/*--------------------*/
/* General -----------*/
/*--------------------*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: background-color 250ms ease-out, background 250ms ease-out, font-size 250ms ease-out, line-height 250ms ease-out, border-color 250ms ease-out; }

body {
  background: #010a1a;
  transition: background-color 250ms ease-out;
  color: #ccced1;
  font-family: proxima-nova, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px; }
  body.menu-open {
    overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  font-family: rockwell, serif;
  font-weight: 700; }

h3 {
  color: #818FA6; }

a {
  color: #00c6f2;
  transition: all 150ms ease-out; }

a:hover {
  color: #007cbf;
  transition: all 80ms ease-in; }

hr {
  display: none; }

address, cite {
  font-style: normal; }

img, fieldset {
  border: none; }

iframe, button {
  border: 0; }

button {
  background: none;
  cursor: pointer; }

img, svg {
  display: block; }

img {
  transition: opacity 150ms ease-in; }

sup {
  font-size: 50%; }

.justify {
  text-align: justify !important; }

.underline {
  text-decoration: underline !important; }

.list-style-none {
  list-style-type: none !important; }

.list-style-upper-alpha {
  list-style-type: upper-alpha !important; }

.list-style-lower-alpha {
  list-style-type: lower-alpha !important; }

/*---------------*/
/* Font Settings */
/*---------------*/
.font-serif {
  font-family: mrs-eaves-xl-serif, serif; }

.font-large {
  font-size: 20px;
  line-height: 30px; }
  .font-large .replies section div p {
    font-size: 18px;
    line-height: 24px; }
  .font-large .content .details,
  .font-large .related-comic p {
    font-size: 20px;
    line-height: 26px; }
  .font-large .archive .content .post-text p {
    font-size: 18px;
    line-height: 26px; }
  .font-large #search .results .result .txt h4 {
    font-size: 22px;
    line-height: 30px; }
  .font-large #search .results .result .txt p {
    font-size: 18px;
    line-height: 22px; }
  @media only screen and (max-width: 348px) {
    .font-large {
      font-size: 18px;
      line-height: 28px; }
      .font-large #news .content footer .details,
      .font-large .content .details {
        font-size: 18px;
        line-height: 24px; }
      .font-large #news .content footer .tags li,
      .font-large .content .tags li,
      .font-large .tags li {
        font-size: 16px;
        line-height: 16px; } }
  @media only screen and (min-width: 421px) {
    .font-large {
      font-size: 20px;
      line-height: 30px; } }
  @media only screen and (min-width: 720px) {
    .font-large {
      font-size: 20px;
      line-height: 30px; }
      .font-large #sidebar {
        font-size: 20px;
        line-height: 30px; }
      .font-large #search .results .result .txt h4 {
        font-size: 24px;
        line-height: 30px; } }
  @media only screen and (min-width: 901px) {
    .font-large {
      font-size: 20px;
      line-height: 30px; }
      .font-large #podcasts .archive p, .font-large #stories .archive p, .font-large #video .archive p, .font-large #podcast-episode .archive p {
        font-size: 20px;
        line-height: 30px; } }
  @media only screen and (min-width: 1025px) {
    .font-large {
      font-size: 22px;
      line-height: 34px; }
      .font-large .replies section div p {
        font-size: 20px;
        line-height: 30px; }
      .font-large #main #news.paginated .content.featured .post-text {
        font-size: 22px;
        line-height: 34px; }
      .font-large #main #news.paginated .content.featured .details {
        font-size: 22px;
        line-height: 30px; }
      .font-large #main #news.paginated .content .post-text {
        font-size: 20px;
        line-height: 30px; }
      .font-large #main #news.paginated .content .details {
        font-size: 20px;
        line-height: 26px; }
      .font-large .content .details, .font-large #search .details, .font-large #about .details, .font-large #comic.remix .details {
        font-size: 22px;
        line-height: 30px; }
      .font-large #podcasts .shows p, .font-large #video .shows p, .font-large #stories .shows p {
        font-size: 20px;
        line-height: 30px; }
      .font-large #podcasts .episodes p, .font-large #podcasts .episodes .details, .font-large #video .episodes p, .font-large #video .episodes .details, .font-large #stories .episodes p, .font-large #stories .episodes .details {
        font-size: 20px;
        line-height: 30px; }
      .font-large .archive-features .comic-remix {
        font-size: 22px;
        line-height: 34px; }
      .font-large .archive-features .nostalgia p, .font-large .archive-features .first-comic p {
        font-size: 20px;
        line-height: 30px; }
      .font-large #search .results .result .txt h4 {
        font-size: 26px;
        line-height: 34px; }
      .font-large #search .results .result .txt p {
        font-size: 20px;
        line-height: 22px; } }
  @media only screen and (min-width: 1281px) {
    .font-large {
      font-size: 24px;
      line-height: 38px; }
      .font-large .archive-features .comic-remix p {
        font-size: 22px;
        line-height: 34px; }
      .font-large .replies section div p {
        font-size: 22px;
        line-height: 34px; }
      .font-large #main #news.paginated .content.featured .post-text {
        font-size: 24px;
        line-height: 38px; }
      .font-large #main #news.paginated .content.featured .details {
        font-size: 24px;
        line-height: 34px; }
      .font-large #main #news.paginated .content .post-text {
        font-size: 22px;
        line-height: 34px; }
      .font-large #main #news.paginated .content .details {
        font-size: 22px;
        line-height: 30px; }
      .font-large .content .details, .font-large .search-form .details, .font-large #search .details, .font-large #about .details, .font-large #comic.remix .details {
        font-size: 24px;
        line-height: 34px; }
      .font-large #podcasts .shows p, .font-large #video .shows p, .font-large #stories .shows p {
        font-size: 22px;
        line-height: 34px; }
      .font-large #podcasts .archive .content .details, .font-large #podcasts .episodes .content .details, .font-large #video .archive .content .details, .font-large #video .episodes .content .details, .font-large #stories .archive .content .details, .font-large #stories .episodes .content .details {
        font-size: 22px;
        line-height: 30px; } }
  @media only screen and (min-width: 1439px) {
    .font-large {
      font-size: 26px;
      line-height: 42px; }
      .font-large #stories .featured .post-text p,
      .font-large #about .about p,
      .font-large #news .featured .post-text p {
        font-size: 26px;
        line-height: 42px; }
      .font-large .content .details, .font-large .search-form .details, .font-large #search .details, .font-large #about .details, .font-large #comic.remix .details,
      .font-large #main #news.paginated .content.featured .details {
        font-size: 26px;
        line-height: 38px; } }

/*-----------*/
/* Day Theme */
/*-----------*/
.theme-day {
  background: #ffffff;
  color: #000000; }
  .theme-day h3 {
    color: #697586; }
  .theme-day a {
    color: #007cbf; }
  .theme-day a:hover {
    color: black; }
  .theme-day .orange-btn,
  .theme-day #aria-skip a:focus,
  .theme-day #aria-skip a:active {
    box-shadow: 0 0 0px 0px #ff6200, inset 0 0 0px 0px white, 0px 3px 6px rgba(0, 0, 0, 0.25); }
    .theme-day .orange-btn:hover, .theme-day .orange-btn:focus,
    .theme-day #aria-skip a:focus:hover,
    .theme-day #aria-skip a:focus:focus,
    .theme-day #aria-skip a:active:hover,
    .theme-day #aria-skip a:active:focus {
      box-shadow: 0 0 0px 3px #ff6200, inset 0 0 0px 3px white, 0px 3px 6px rgba(0, 0, 0, 0.4); }
  .theme-day .outline-btn {
    border: 2px solid #697586;
    color: #697586 !important; }
    .theme-day .outline-btn svg {
      fill: #697586; }
    .theme-day .outline-btn.landscape-btn svg, .theme-day .outline-btn.buy-print-btn svg {
      fill: #697586; }
    .theme-day .outline-btn.download-btn svg, .theme-day .outline-btn.share-btn svg {
      stroke: #697586; }
    .theme-day .outline-btn:hover, .theme-day .outline-btn:focus {
      border-color: #697586 !important;
      background-color: #697586 !important;
      color: #ffffff !important; }
      .theme-day .outline-btn:hover.buy-print-btn svg, .theme-day .outline-btn:focus.buy-print-btn svg {
        stroke: none !important; }
      .theme-day .outline-btn:hover svg, .theme-day .outline-btn:focus svg {
        transition: all 80ms ease-in;
        fill: #ffffff !important;
        stroke: #ffffff !important; }
    .theme-day .outline-btn.twitter-share-btn:hover, .theme-day .outline-btn.twitter-share-btn:focus, .theme-day .outline-btn.fb-share-btn:hover, .theme-day .outline-btn.fb-share-btn:focus {
      color: #ffffff !important;
      border-color: #697586 !important;
      background-color: #697586 !important; }
      .theme-day .outline-btn.twitter-share-btn:hover svg, .theme-day .outline-btn.twitter-share-btn:focus svg, .theme-day .outline-btn.fb-share-btn:hover svg, .theme-day .outline-btn.fb-share-btn:focus svg {
        fill: #ffffff !important; }
  .theme-day .share-btns > div > button, .theme-day .share-btns > div > a {
    stroke: #697586;
    box-shadow: 0 0 0 0 #e8eaed; }
    .theme-day .share-btns > div > button:hover, .theme-day .share-btns > div > button:focus, .theme-day .share-btns > div > a:hover, .theme-day .share-btns > div > a:focus {
      box-shadow: 0 0 0 8px #e8eaed;
      background-color: #e8eaed; }
      .theme-day .share-btns > div > button:hover svg, .theme-day .share-btns > div > button:focus svg, .theme-day .share-btns > div > a:hover svg, .theme-day .share-btns > div > a:focus svg {
        fill: #ff6200 !important;
        stroke: #ff6200 !important; }
    .theme-day .share-btns > div > button.settings-btn svg, .theme-day .share-btns > div > a.settings-btn svg {
      fill: #697586; }
  .theme-day .share-menu, .theme-day .download-menu, .theme-day .settings-menu {
    background: #e8eaed;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.25); }
    .theme-day .share-menu .icon-close, .theme-day .download-menu .icon-close, .theme-day .settings-menu .icon-close {
      box-shadow: 0 0 0 0 #ffffff; }
      .theme-day .share-menu .icon-close svg, .theme-day .download-menu .icon-close svg, .theme-day .settings-menu .icon-close svg {
        stroke: #697586; }
      .theme-day .share-menu .icon-close:hover, .theme-day .share-menu .icon-close:focus, .theme-day .download-menu .icon-close:hover, .theme-day .download-menu .icon-close:focus, .theme-day .settings-menu .icon-close:hover, .theme-day .settings-menu .icon-close:focus {
        transition: all 80ms ease-in;
        background-color: #ffffff;
        box-shadow: 0 0 0 6px #ffffff; }
        .theme-day .share-menu .icon-close:hover svg, .theme-day .share-menu .icon-close:focus svg, .theme-day .download-menu .icon-close:hover svg, .theme-day .download-menu .icon-close:focus svg, .theme-day .settings-menu .icon-close:hover svg, .theme-day .settings-menu .icon-close:focus svg {
          stroke: !important;
          transition: all 80ms ease-in; }
    .theme-day .share-menu p.permalink, .theme-day .download-menu p.permalink, .theme-day .settings-menu p.permalink {
      color: #010a1a; }
      .theme-day .share-menu p.permalink svg, .theme-day .download-menu p.permalink svg, .theme-day .settings-menu p.permalink svg {
        stroke: #010a1a; }
  .theme-day .download-menu svg {
    fill: #deaa00; }
  .theme-day .download-menu .btn-list a {
    border-color: #010a1a;
    color: #010a1a !important; }
    .theme-day .download-menu .btn-list a:hover, .theme-day .download-menu .btn-list a:focus {
      background-color: #deaa00 !important;
      border-color: #deaa00 !important; }
  .theme-day form p.field-wrap {
    border-color: #697586; }
  .theme-day form input.orange-btn {
    box-shadow: 0 0 0px 0px #ff6200, 0px 1px 2px rgba(0, 0, 0, 0.5), inset 0 0 0px 0px white; }
    .theme-day form input.orange-btn:hover {
      box-shadow: 0 0 0px 3px #ff6200, 0px 3px 6px rgba(0, 0, 0, 0.7), inset 0 0 0px 3px white; }
  .theme-day .site-login .content header .details {
    color: #f24900; }
  .theme-day .site-login form {
    background: #e8eaed;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3); }
    .theme-day .site-login form .form-group .help-block-error {
      color: #c72800; }
    .theme-day .site-login form input {
      border-color: #ccced1; }
      .theme-day .site-login form input:hover, .theme-day .site-login form input:focus {
        border-color: #729121; }
  .theme-day .checkbox {
    color: #010a1a; }
    .theme-day .checkbox .checkmark {
      border-color: #697586; }
    .theme-day .checkbox input:focus + .checkmark,
    .theme-day .checkbox:hover input ~ .checkmark {
      box-shadow: 0px 0px 0px 2px #010a1a; }
  .theme-day #cookies {
    box-shadow: 0px -3px 8px rgba(0, 0, 0, 0.3); }
    .theme-day #cookies .outline-btn.allow {
      border-color: #003e80;
      background: #003e80; }
  .theme-day .ad .ad-txt {
    color: #697586; }
  .theme-day #header {
    background: #ffffff; }
    .theme-day #header #nav a {
      color: #003e80; }
    .theme-day #header #nav .nav-div:before {
      background: #ccced1; }
    .theme-day #header #nav .font-settings li button {
      box-shadow: 0 0 0 0 #e8eaed, 0 0 0 0 #f24900; }
      .theme-day #header #nav .font-settings li button svg {
        fill: #003e80; }
      .theme-day #header #nav .font-settings li button:hover svg, .theme-day #header #nav .font-settings li button:focus svg {
        fill: #f24900 !important; }
      .theme-day #header #nav .font-settings li button:focus {
        box-shadow: 0 0 0 2px #e8eaed, 0 0 0 4px #f24900; }
      .theme-day #header #nav .font-settings li button.selected {
        border-color: #003e80 !important; }
    .theme-day #header #nav .cpa-link svg {
      fill: #deaa00; }
    .theme-day #header #nav .btn-display-mode {
      box-shadow: 0 0 0 0 #ffffff, 0 0 0 0 #f24900; }
      .theme-day #header #nav .btn-display-mode span {
        border-color: #003e80; }
      .theme-day #header #nav .btn-display-mode .night {
        background: #003e80; }
      .theme-day #header #nav .btn-display-mode .day svg {
        fill: #003e80; }
      .theme-day #header #nav .btn-display-mode:hover, .theme-day #header #nav .btn-display-mode:focus {
        box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f24900;
        outline: none;
        transition: all 80ms ease-in; }
    .theme-day #header #nav #nav-mobile-menu-open:after {
      box-shadow: -1px 0px 3px rgba(0, 0, 0, 0.25); }
    .theme-day #header #nav #nav-mobile-menu-open:before {
      background-image: linear-gradient(360deg, rgba(0, 0, 0, 0.2), transparent 24px); }
    .theme-day #header #nav #nav-mobile-menu-open .menu-main .main-link {
      text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); }
    .theme-day #header #nav #nav-mobile-menu-open li.current-page a {
      color: #f24900; }
    .theme-day #header #nav #nav-mobile-menu-open .nav-grid a:hover, .theme-day #header #nav #nav-mobile-menu-open .nav-grid a:focus {
      color: #f24900; }
      .theme-day #header #nav #nav-mobile-menu-open .nav-grid a:hover svg, .theme-day #header #nav #nav-mobile-menu-open .nav-grid a:focus svg {
        fill: #f24900; }
    .theme-day #header #nav #nav-mobile-menu-open .nav-grid a:focus {
      box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f24900; }
    .theme-day #header #nav #nav-mobile-menu-open .menu-sub .brand-link a svg {
      fill: #003e80; }
    .theme-day #header #nav #nav-mobile-menu-open .menu-sub .brand-link a:hover svg, .theme-day #header #nav #nav-mobile-menu-open .menu-sub .brand-link a:focus svg {
      fill: #f24900; }
    .theme-day #header #nav #nav-mobile-menu-open .font-settings svg {
      fill: #003e80 !important; }
    .theme-day #header #nav #nav-mobile-menu-open .font-settings li:first-child {
      border-color: #ccced1; }
    .theme-day #header #nav #nav-mobile-menu-open .font-settings li button {
      box-shadow: 0 0 0 0 #ffffff, 0 0 0 0 #f24900; }
      .theme-day #header #nav #nav-mobile-menu-open .font-settings li button:hover svg, .theme-day #header #nav #nav-mobile-menu-open .font-settings li button:focus svg {
        fill: #f24900 !important; }
      .theme-day #header #nav #nav-mobile-menu-open .font-settings li button:focus {
        box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f24900; }
      .theme-day #header #nav #nav-mobile-menu-open .font-settings li button.selected:hover, .theme-day #header #nav #nav-mobile-menu-open .font-settings li button.selected:focus {
        border-color: #f24900 !important; }
    .theme-day #header #nav-desktop a {
      color: #031f4d; }
    .theme-day #header #nav-desktop .nav-wrap {
      background: #e8eaed;
      color: #697586; }
    .theme-day #header #nav-desktop #live-now a {
      color: #031f4d; }
    .theme-day #header #nav-desktop #live-now p {
      border-color: #ccced1; }
    .theme-day #header #nav-desktop .menu-sub a {
      color: #697586; }
      .theme-day #header #nav-desktop .menu-sub a:hover, .theme-day #header #nav-desktop .menu-sub a:focus {
        color: #010a1a; }
        .theme-day #header #nav-desktop .menu-sub a:hover svg, .theme-day #header #nav-desktop .menu-sub a:focus svg {
          fill: #010a1a !important; }
    .theme-day #header #nav-desktop .menu-sub .about-link {
      border-color: #ccced1; }
    .theme-day #header #nav-desktop .menu-sub .brand-link a svg {
      fill: #697586; }
    .theme-day #header #nav-desktop .menu-display .cpa-link {
      border-color: #ccced1; }
    .theme-day #header #nav-desktop .menu-display .btn-font-settings svg {
      fill: #031f4d;
      box-shadow: 0 0 0 0 #e8eaed, 0 0 0 0 #f24900; }
    .theme-day #header #nav-desktop .menu-display .btn-font-settings:hover svg, .theme-day #header #nav-desktop .menu-display .btn-font-settings:focus svg {
      box-shadow: 0 0 0 2px #e8eaed, 0 0 0 4px #f24900; }
    .theme-day #header #nav-desktop .menu-display .font-settings {
      background: #e8eaed;
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.25); }
      .theme-day #header #nav-desktop .menu-display .font-settings svg {
        fill: #031f4d; }
      .theme-day #header #nav-desktop .menu-display .font-settings li:first-child {
        border-color: #ccced1; }
      .theme-day #header #nav-desktop .menu-display .font-settings li button.selected {
        border-color: #031f4d !important; }
        .theme-day #header #nav-desktop .menu-display .font-settings li button.selected:hover, .theme-day #header #nav-desktop .menu-display .font-settings li button.selected:focus {
          border-color: #f24900 !important; }
      .theme-day #header #nav-desktop .menu-display .font-settings .icon-close svg {
        stroke: #697586; }
      .theme-day #header #nav-desktop .menu-display .font-settings .icon-close:hover svg, .theme-day #header #nav-desktop .menu-display .font-settings .icon-close:focus svg {
        stroke: #f24900; }
    .theme-day #header #nav-desktop .btn-display-mode {
      box-shadow: 0 0 0 0 #e8eaed, 0 0 0 0 #f24900; }
      .theme-day #header #nav-desktop .btn-display-mode:hover, .theme-day #header #nav-desktop .btn-display-mode:focus {
        box-shadow: 0 0 0 2px #e8eaed, 0 0 0 4px #f24900; }
      .theme-day #header #nav-desktop .btn-display-mode span {
        border-color: #031f4d; }
      .theme-day #header #nav-desktop .btn-display-mode .night {
        background: #031f4d; }
      .theme-day #header #nav-desktop .btn-display-mode .day svg {
        fill: #031f4d; }
  .theme-day .home-page #sidebar .twitch-live, .theme-day .home-page #sidebar #highlight-reel,
  .theme-day .twitch-live,
  .theme-day #highlight-reel {
    background: rgba(131, 78, 240, 0.1);
    box-shadow: inset 6px 0 0 #834ef0; }
    .theme-day .home-page #sidebar .twitch-live #live-now, .theme-day .home-page #sidebar #highlight-reel #live-now, .theme-day .home-page #sidebar .twitch-live #live-now a, .theme-day .home-page #sidebar #highlight-reel #live-now a,
    .theme-day .twitch-live #live-now,
    .theme-day #highlight-reel #live-now,
    .theme-day .twitch-live #live-now a,
    .theme-day #highlight-reel #live-now a {
      color: #834ef0; }
    .theme-day .home-page #sidebar .twitch-live .video-info, .theme-day .home-page #sidebar #highlight-reel .video-info,
    .theme-day .twitch-live .video-info,
    .theme-day #highlight-reel .video-info {
      color: #010a1a; }
  .theme-day .home-page #sidebar .twitch-live, .theme-day .home-page #sidebar #highlight-reel {
    box-shadow: inset 8px 0 0 #834ef0; }
  .theme-day #highlight-reel {
    background: #e8eaed; }
    .theme-day #highlight-reel .txt p:first-child {
      color: #697586; }
  .theme-day #latest-comics {
    box-shadow: inset 0 -16px 0px #ffffff; }
    .theme-day #latest-comics .comics {
      box-shadow: 0 0 0 0 #ffffff, 0 0 0 0 #ff6200, 0px 3px 6px rgba(0, 0, 0, 0.25); }
      .theme-day #latest-comics .comics:hover, .theme-day #latest-comics .comics:focus {
        box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #ff6200, 0px 6px 6px rgba(0, 0, 0, 0.25); }
  .theme-day #main h1 a:focus, .theme-day #main h2 a:focus, .theme-day #main h3 a:focus, .theme-day #main h4 a:focus, .theme-day #main h5 a:focus, .theme-day #main h6 a:focus,
  .theme-day #main .details a:focus,
  .theme-day #main .tags a:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 4px #007cbf; }
  .theme-day #main .details a:hover, .theme-day #main .details a:focus {
    color: black; }
  .theme-day #main .post-text a:hover, .theme-day #main .post-text a:focus {
    color: black;
    box-shadow: 0 0 0 2px white, 0 0 0 4px #007cbf; }
  .theme-day #main .replies section div p a:hover, .theme-day #main .replies section div p a:focus {
    color: black;
    box-shadow: 0 0 0 2px #e8eaed, 0 0 0 4px #007cbf; }
  .theme-day #main .featured .post-text a {
    color: #f24900; }
    .theme-day #main .featured .post-text a:hover, .theme-day #main .featured .post-text a:focus {
      color: black;
      box-shadow: 0 0 0 2px white, 0 0 0 4px #f24900; }
  .theme-day #main .featured h1 a:focus,
  .theme-day #main .featured .details a:focus,
  .theme-day #main .featured .tags a:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 4px #f24900; }
  .theme-day .content .avatar img {
    border-color: #ffffff; }
  .theme-day .content header h1, .theme-day .content header h1 a, .theme-day .content header h2, .theme-day .content header h2 a, .theme-day .content header h4, .theme-day .content header h4 a {
    color: #010a1a; }
  .theme-day .content .details, .theme-day .content .details a {
    color: #007cbf; }
  .theme-day .content .tags li a {
    color: #697586;
    border-color: #697586; }
    .theme-day .content .tags li a:hover, .theme-day .content .tags li a:focus {
      color: white;
      background: #697586; }
  .theme-day .content .post-text h1, .theme-day .content .post-text h2, .theme-day .content .post-text h3, .theme-day .content .post-text h4, .theme-day .content .post-text h5, .theme-day .content .post-text h6 {
    color: #010a1a; }
  .theme-day .content.featured .details, .theme-day .content.featured .details a {
    color: #f24900; }
  .theme-day .hero-img {
    box-shadow: 0 0 0 0 #ffffff, 0 0 0 0 #ff6200, 0px 3px 6px rgba(0, 0, 0, 0.25); }
  .theme-day #main.podcasts-page .hero-img:hover, .theme-day #main.podcasts-page .hero-img:focus,
  .theme-day #main.video-page .hero-img:hover,
  .theme-day #main.video-page .hero-img:focus,
  .theme-day #main.stories-page .hero-img:hover,
  .theme-day #main.stories-page .hero-img:focus,
  .theme-day #main.stories-universe-page .hero-img:hover,
  .theme-day #main.stories-universe-page .hero-img:focus {
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #ff6200, 0px 6px 6px rgba(0, 0, 0, 0.25); }
  .theme-day #main.about-page .stories a:hover .hero-img, .theme-day #main.about-page .stories a:focus .hero-img {
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #ff6200, 0px 6px 6px rgba(0, 0, 0, 0.25); }
  .theme-day #comic .content.featured .tags:after {
    background: linear-gradient(to left, white 8%, rgba(255, 255, 255, 0) 100%); }
  .theme-day #comic .content.featured .pagination.top, .theme-day #comic .content.featured .pagination.btm {
    border-color: #e8eaed; }
  .theme-day #news .avatar img,
  .theme-day #news .avatar .reply-bubble,
  .theme-day #news .featured .avatar img,
  .theme-day #news .featured .avatar .reply-bubble, .theme-day #comic .avatar img,
  .theme-day #comic .avatar .reply-bubble,
  .theme-day #comic .featured .avatar img,
  .theme-day #comic .featured .avatar .reply-bubble {
    border-color: #ffffff; }
  .theme-day #news .avatar .reply-bubble:hover, .theme-day #news .avatar .reply-bubble:focus,
  .theme-day #news .featured .avatar .reply-bubble:hover,
  .theme-day #news .featured .avatar .reply-bubble:focus, .theme-day #comic .avatar .reply-bubble:hover, .theme-day #comic .avatar .reply-bubble:focus,
  .theme-day #comic .featured .avatar .reply-bubble:hover,
  .theme-day #comic .featured .avatar .reply-bubble:focus {
    background-color: white;
    color: #f24900;
    box-shadow: 0 0 0 2px white;
    border-color: #f24900; }
  .theme-day #news .featured .avatar .reply-bubble:hover, .theme-day #news .featured .avatar .reply-bubble:focus, .theme-day #comic .featured .avatar .reply-bubble:hover, .theme-day #comic .featured .avatar .reply-bubble:focus {
    box-shadow: 0 0 0 3px white; }
  .theme-day .news-post-page .post-body .related-comic, .theme-day #about .work .related-comic {
    background: #e8eaed;
    box-shadow: 0 0 0 0 #ffffff, 0 0 0 0 #ff6200, 0px 3px 6px rgba(0, 0, 0, 0.25); }
    .theme-day .news-post-page .post-body .related-comic svg, .theme-day #about .work .related-comic svg {
      stroke: #697586; }
    .theme-day .news-post-page .post-body .related-comic:hover, .theme-day .news-post-page .post-body .related-comic:focus, .theme-day #about .work .related-comic:hover, .theme-day #about .work .related-comic:focus {
      box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #ff6200, 0px 6px 6px rgba(0, 0, 0, 0.25); }
      .theme-day .news-post-page .post-body .related-comic:hover .img, .theme-day .news-post-page .post-body .related-comic:focus .img, .theme-day #about .work .related-comic:hover .img, .theme-day #about .work .related-comic:focus .img {
        box-shadow: 0 0 0 0 white, 0px 3px 6px rgba(0, 0, 0, 0.25); }
  .theme-day .related-comic p, .theme-day .related-comic:link, .theme-day .related-comic:visited {
    color: #697586; }
  .theme-day .related-comic .img {
    box-shadow: 0 0 0 0 #ffffff, 0 0 0 0 #ff6200, 0px 3px 6px rgba(0, 0, 0, 0.25); }
  .theme-day .related-comic:hover p, .theme-day .related-comic:focus p {
    color: #010a1a !important; }
    .theme-day .related-comic:hover p svg, .theme-day .related-comic:focus p svg {
      stroke: #010a1a !important; }
  .theme-day .related-comic:link, .theme-day .related-comic:visited {
    color: #010a1a; }
  .theme-day .related-comic:hover .img, .theme-day .related-comic:focus .img {
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #ff6200, 0px 6px 6px rgba(0, 0, 0, 0.25); }
    .theme-day .related-comic:hover .img img, .theme-day .related-comic:focus .img img {
      transition: transfƒorm 80ms ease-in;
      transform: scale(1.1, 1.1); }
  .theme-day .replies.reply-form .reply-btn {
    color: white !important;
    background-color: #729121 !important;
    border-color: #729121 !important; }
    .theme-day .replies.reply-form .reply-btn:hover, .theme-day .replies.reply-form .reply-btn:focus {
      color: #729121 !important; }
  .theme-day .replies.reply-form input[type="text"] {
    border-color: #ccced1; }
    .theme-day .replies.reply-form input[type="text"]:hover, .theme-day .replies.reply-form input[type="text"]:focus {
      border-color: #729121; }
  .theme-day .replies section.gabe > p {
    color: #deaa00; }
  .theme-day .replies section.tycho > p {
    color: #007cbf; }
  .theme-day .replies section div p,
  .theme-day .replies section.author-reply div p:first-child:after,
  .theme-day .replies section.reply div p:first-child:after {
    background: #e8eaed; }
  .theme-day .pagination .pages li.current-page a {
    background-color: #697586;
    color: #ffffff; }
  .theme-day .pagination .pages li a {
    background-color: #e8eaed;
    color: #697586; }
    .theme-day .pagination .pages li a:hover, .theme-day .pagination .pages li a:focus {
      color: white;
      background: #f24900; }
  .theme-day .pagination .pages li.ellip {
    color: #697586; }
  .theme-day .post-nav li a {
    background: #e8eaed;
    box-shadow: 0 0 0 0 #ffffff, 0 0 0 0 #ff6200, 0px 3px 6px rgba(0, 0, 0, 0.25); }
    .theme-day .post-nav li a h4 {
      color: #010a1a; }
    .theme-day .post-nav li a .author {
      color: #697586; }
    .theme-day .post-nav li a:hover, .theme-day .post-nav li a:focus {
      box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #ff6200, 0px 6px 6px rgba(0, 0, 0, 0.25); }
  .theme-day .related-posts > ul > li {
    border-color: #e8eaed !important; }
    .theme-day .related-posts > ul > li h4 a {
      color: #010a1a; }
  .theme-day .related-posts .author, .theme-day .related-posts .author a {
    color: #007cbf; }
  .theme-day .related-posts .avatar img, .theme-day .related-posts .avatar .reply-bubble {
    border-color: #ffffff; }
  .theme-day .related-posts .avatar .reply-bubble:hover, .theme-day .related-posts .avatar .reply-bubble:focus {
    background-color: white;
    color: #f24900;
    box-shadow: 0 0 0 2px white;
    border-color: #f24900; }
  .theme-day .related-posts .tags li a {
    color: #697586;
    border-color: #697586; }
    .theme-day .related-posts .tags li a:hover, .theme-day .related-posts .tags li a:focus {
      color: white;
      background: #697586; }
  .theme-day #podcasts .featured .schedule svg, .theme-day #video .featured .schedule svg {
    fill: #f24900; }
  .theme-day .seasons, .theme-day .archive-features .browse-by-year, .archive-features .theme-day .browse-by-year {
    border-color: #e8eaed; }
    .theme-day .seasons a, .theme-day .archive-features .browse-by-year a, .archive-features .theme-day .browse-by-year a {
      background: #e8eaed;
      color: #697586; }
      .theme-day .seasons a.selected, .theme-day .archive-features .browse-by-year a.selected, .archive-features .theme-day .browse-by-year a.selected {
        color: #ffffff;
        background: #697586; }
        .theme-day .seasons a.selected:hover, .theme-day .archive-features .browse-by-year a.selected:hover, .archive-features .theme-day .browse-by-year a.selected:hover, .theme-day .seasons a.selected:focus, .theme-day .archive-features .browse-by-year a.selected:focus, .archive-features .theme-day .browse-by-year a.selected:focus {
          background-color: #f24900;
          color: white; }
      .theme-day .seasons a:hover, .theme-day .archive-features .browse-by-year a:hover, .archive-features .theme-day .browse-by-year a:hover, .theme-day .seasons a:focus, .theme-day .archive-features .browse-by-year a:focus, .archive-features .theme-day .browse-by-year a:focus {
        background-color: #f24900; }
  .theme-day #podcasts .episodes .content .post-body .details {
    color: #000000; }
    .theme-day #podcasts .episodes .content .post-body .details svg {
      fill: #000000; }
  .theme-day #podcast-episode .featured:after {
    background: #e8eaed; }
  .theme-day .player {
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.25);
    background: #e8eaed; }
  .theme-day #about article h1, .theme-day #about article h2 {
    color: #010a1a; }
  .theme-day #about .bio, .theme-day #about .about {
    border-color: #e8eaed; }
    .theme-day #about .bio .logo-penny-arcade, .theme-day #about .about .logo-penny-arcade {
      fill: #007cbf; }
    .theme-day #about .bio .avatar img, .theme-day #about .about .avatar img {
      border-color: #ffffff; }
    .theme-day #about .bio a, .theme-day #about .about a {
      color: #f24900; }
      .theme-day #about .bio a:hover, .theme-day #about .bio a:focus, .theme-day #about .about a:hover, .theme-day #about .about a:focus {
        color: black;
        box-shadow: 0 0 0 2px white, 0 0 0 4px #f24900; }
  .theme-day #about .stories {
    border-color: #e8eaed; }
    .theme-day #about .stories ul li a {
      color: #010a1a; }
  .theme-day #comic.remix h1 {
    color: #010a1a; }
  .theme-day #comic.remix div.timestamp p {
    border-color: #e8eaed;
    color: #697586; }
  .theme-day #comic.remix p.timestamp {
    color: #697586; }
  .theme-day #comic.remix .reroll .details {
    color: #f24900; }
  .theme-day #comic.remix .reroll p a {
    color: #f24900; }
    .theme-day #comic.remix .reroll p a:hover, .theme-day #comic.remix .reroll p a:focus {
      color: black;
      box-shadow: 0 0 0 2px white, 0 0 0 4px #f24900; }
  .theme-day #comic.remix .reroll .info {
    color: #697586; }
    .theme-day #comic.remix .reroll .info:before {
      color: white;
      background: #697586; }
  .theme-day #comic.remix .sources li {
    border-color: #e8eaed; }
    .theme-day #comic.remix .sources li .details {
      color: #007cbf; }
      .theme-day #comic.remix .sources li .details:first-child {
        color: #697586; }
    .theme-day #comic.remix .sources li h2 a {
      color: #010a1a; }
  .theme-day #comic.remix .panel-lock:before {
    background-color: #697586; }
  .theme-day #comic.remix .panel-lock:hover:after, .theme-day #comic.remix .panel-lock:focus:after {
    background-color: rgba(159, 170, 187, 0.85);
    border-color: #697586; }
  .theme-day #comic.remix .panel-lock.locked:hover:after, .theme-day #comic.remix .panel-lock.locked:focus:after {
    background-color: rgba(255, 161, 102, 0.85);
    border-color: #f24900; }
  @media (pointer: coarse) {
    .theme-day #comic.remix .panel-lock:hover:after, .theme-day #comic.remix .panel-lock:focus:after {
      transition: border 150ms ease-out, background-color 150ms ease-out, background-size 250ms cubic-bezier(0.5, 6, 0.01, -0.8);
      opacity: 0;
      animation: lock-fade-out-day 1.5s ease-out 1; }
    @keyframes lock-fade-out-day {
      0% {
        opacity: 1; }
      80% {
        opacity: 1; }
      99% {
        opacity: 0;
        background-color: rgba(159, 170, 187, 0.85);
        border: 3px dashed #697586; }
      100% {
        background-color: rgba(255, 161, 102, 0.85);
        border: 3px solid #f24900; } }
    .theme-day #comic.remix .panel-lock.locked:hover:after, .theme-day #comic.remix .panel-lock.locked:focus:after {
      animation: unlock-fade-out-day 1.5s ease-out 1; }
    @keyframes unlock-fade-out-day {
      0% {
        opacity: 1; }
      80% {
        opacity: 1; }
      99% {
        opacity: 0;
        background-color: rgba(255, 161, 102, 0.85);
        border: 3px solid #f24900; }
      100% {
        background-color: rgba(159, 170, 187, 0.85);
        border: 3px dashed #697586; } } }
  .theme-day .archive-features > div {
    border-color: #e8eaed; }
  .theme-day .archive-features .recent-topics li a {
    color: #697586;
    border-color: #697586; }
    .theme-day .archive-features .recent-topics li a:hover, .theme-day .archive-features .recent-topics li a:focus {
      color: white;
      background-color: #697586; }
  .theme-day #archive .topics ul li a {
    color: #010a1a; }
    .theme-day #archive .topics ul li a .border {
      box-shadow: 0 0 0 0 #ffffff, 0 0 0 0 #ff6200; }
    .theme-day #archive .topics ul li a:hover .avatar, .theme-day #archive .topics ul li a:focus .avatar {
      box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.25); }
      .theme-day #archive .topics ul li a:hover .avatar .border, .theme-day #archive .topics ul li a:focus .avatar .border {
        box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px #ff6200;
        background: white; }
  .theme-day #archive .topics ul li .avatar {
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.25); }
    .theme-day #archive .topics ul li .avatar img {
      border-color: #ffffff; }
  .theme-day .search-form {
    background-color: #e8eaed;
    background-image: linear-gradient(135deg, #e8eaed 25%, transparent 25%), linear-gradient(45deg, #ffffff 75%, #e8eaed 75%); }
    .theme-day .search-form h1 {
      color: #010a1a; }
  .theme-day #search .search-term p, .theme-day #search .search-term .refine, .theme-day #search .search-term .refine button {
    color: #697586; }
  .theme-day #search .search-term h2 {
    color: #010a1a; }
  .theme-day #search .search-term .refine button:hover, .theme-day #search .search-term .refine button:focus {
    color: #007cbf; }
  .theme-day #search .search-term .refine button:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 4px #007cbf; }
  .theme-day #search .results {
    border-color: #e8eaed; }
    .theme-day #search .results * {
      border-color: #e8eaed !important; }
    .theme-day #search .results .result .txt a {
      color: #010a1a; }
    .theme-day #search .results .result .txt .snippet {
      color: #697586; }
    .theme-day #search .results .result .txt p {
      color: #007cbf; }
    .theme-day #search .results .result .img a {
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.25);
      background: #007cbf; }
  .theme-day #sidebar {
    color: #000000;
    background-color: #e8eaed;
    background-image: linear-gradient(-45deg, #e8eaed 25%, transparent 25%), linear-gradient(45deg, #e8eaed 25%, #ffffff 25%); }
    .theme-day #sidebar h3 {
      color: #007cbf; }
  .theme-day .comic-remix .img-comic-remix {
    box-shadow: 0 0 0 0 #ffffff, 0 0 0 0 #ff6200, inset 0 0 0 6px white, inset 6px 0 0 6px white, 0px 3px 6px rgba(0, 0, 0, 0.25); }
    .theme-day .comic-remix .img-comic-remix:hover, .theme-day .comic-remix .img-comic-remix:focus {
      color: white;
      box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #ff6200, inset 0 0 0 6px white, inset 6px 0 0 6px white, 0px 6px 6px rgba(0, 0, 0, 0.5); }
  .theme-day .nostalgia .related-comic .txt p, .theme-day .first-comic .related-comic .txt p {
    color: #007cbf; }
    .theme-day .nostalgia .related-comic .txt p svg, .theme-day .first-comic .related-comic .txt p svg {
      stroke: #007cbf; }
  .theme-day .nostalgia .related-comic .txt h4, .theme-day .first-comic .related-comic .txt h4 {
    color: #010a1a; }
  .theme-day #footer {
    color: #010a1a; }
    .theme-day #footer a {
      color: #000000; }
    .theme-day #footer a:hover, .theme-day #footer a:focus {
      color: #f24900; }
  .theme-day .footer-social-wrap #social-links a:hover, .theme-day .footer-social-wrap #social-links a:focus {
    color: #f24900; }
  .theme-day .footer-social-wrap #social-links .gabe a:hover, .theme-day .footer-social-wrap #social-links .gabe a:focus {
    color: #deaa00; }
  .theme-day .footer-social-wrap #social-links .gabe svg {
    fill: #deaa00; }
  .theme-day .footer-social-wrap #social-links .tycho a:hover, .theme-day .footer-social-wrap #social-links .tycho a:focus {
    color: #007cbf; }
  .theme-day .footer-social-wrap #social-links .tycho svg {
    fill: #007cbf; }
  .theme-day .footer-social-wrap #social-links svg {
    fill: #f24900; }
  .theme-day .footer-social-wrap #social-links h3 {
    color: #010a1a; }
  .theme-day .footer-social-wrap #social-links:after {
    background-color: #ccced1; }
  .theme-day .footer-nav-wrap #copyright {
    color: #697586; }
  .theme-day .footer-nav-wrap .logo-penny-arcade svg {
    fill: #007cbf; }
  .theme-day .footer-nav-wrap #footer-nav li a:hover, .theme-day .footer-nav-wrap #footer-nav li a:focus {
    color: #697586; }
  .theme-day #newsletter {
    color: #000000;
    background-color: #e8eaed;
    background-image: linear-gradient(-45deg, #e8eaed 25%, transparent 25%), linear-gradient(45deg, #e8eaed 25%, #ffffff 25%); }
    .theme-day #newsletter h3 {
      color: #007cbf; }
    .theme-day #newsletter p.sml, .theme-day #newsletter p.sml a {
      color: #697586; }
    .theme-day #newsletter p.sml a:hover,
    .theme-day #newsletter p.sml a:focus {
      color: #000000; }
  @media only screen and (min-width: 349px) {
    .theme-day #comic.remix .outline-btn.download-btn {
      border-color: #697586; } }
  @media only screen and (min-width: 421px) {
    .theme-day #comic.remix .outline-btn.share-btn {
      border-color: #697586; } }
  @media only screen and (min-width: 720px) {
    .theme-day .orange-btn:hover {
      box-shadow: 0 0 0px 4px #ff6200, inset 0 0 0px 4px white, 0px 3px 6px rgba(0, 0, 0, 0.4); }
    .theme-day #main.podcasts-page .hero-img:hover, .theme-day #main.podcasts-page .hero-img:focus,
    .theme-day #main.video-page .hero-img:hover,
    .theme-day #main.video-page .hero-img:focus,
    .theme-day #main.stories-page .hero-img:hover,
    .theme-day #main.stories-page .hero-img:focus,
    .theme-day #main.stories-universe-page .hero-img:hover,
    .theme-day #main.stories-universe-page .hero-img:focus {
      box-shadow: 0 0 0 4px #ffffff, 0 0 0 8px #ff6200, 0px 8px 6px rgba(0, 0, 0, 0.25); }
    .theme-day #main.about-page .stories a:hover .hero-img, .theme-day #main.about-page .stories a:focus .hero-img {
      box-shadow: 0 0 0 4px #ffffff, 0 0 0 8px #ff6200, 0px 8px 6px rgba(0, 0, 0, 0.25); }
    .theme-day .post-nav li a:hover, .theme-day .post-nav li a:focus,
    .theme-day .news-post-page .post-body .related-comic:hover,
    .theme-day .news-post-page .post-body .related-comic:focus,
    .theme-day #about .work .related-comic:hover,
    .theme-day #about .work .related-comic:focus {
      box-shadow: 0 0 0 4px #ffffff, 0 0 0 8px #ff6200, 0px 8px 6px rgba(0, 0, 0, 0.25); }
    .theme-day .related-comic:hover .img, .theme-day .related-comic:focus .img {
      box-shadow: 0 0 0 4px #ffffff, 0 0 0 8px #ff6200, 0px 8px 6px rgba(0, 0, 0, 0.25); }
    .theme-day .twitch-live, .theme-day #highlight-reel {
      box-shadow: inset 8px 0 0 #834ef0; }
    .theme-day.has-sidebar #newsletter {
      background-color: #e8eaed;
      background-image: linear-gradient(-45deg, #e8eaed 25%, transparent 25%), linear-gradient(45deg, #e8eaed 25%, #ffffff 25%); }
    .theme-day #main #news.paginated .posts {
      border-color: #e8eaed; }
    .theme-day #latest-comics {
      box-shadow: inset 0 -8px 0px #ffffff; }
      .theme-day #latest-comics .comics:hover, .theme-day #latest-comics .comics:focus {
        box-shadow: 0 0 0 4px #ffffff, 0 0 0 8px #ff6200, 0px 8px 6px rgba(0, 0, 0, 0.25); }
    .theme-day #podcasts .shows .content:after, .theme-day #podcasts .archive .content:after, .theme-day #podcasts .episodes .content:after, .theme-day #stories .shows .content:after, .theme-day #stories .archive .content:after, .theme-day #stories .episodes .content:after, .theme-day #video .shows .content:after, .theme-day #video .archive .content:after, .theme-day #video .episodes .content:after {
      background: #e8eaed; }
    .theme-day #comic .content.featured .pagination .outline-btn.share-btn, .theme-day #comic .content.featured .pagination .outline-btn.download-btn {
      border-color: #697586; }
    .theme-day #about .contact {
      border-color: #e8eaed; }
    .theme-day #archive .topics ul li a:hover .avatar .border, .theme-day #archive .topics ul li a:focus .avatar .border {
      box-shadow: 0 0 0 2px #ffffff, 0 0 0 6px #ff6200; }
    .theme-day #sidebar {
      color: #000000 !important; }
      .theme-day #sidebar .comic-remix-wrap, .theme-day #sidebar .related-comic {
        background: #e8eaed;
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.25); }
      .theme-day #sidebar .comic-remix .img-comic-remix:hover, .theme-day #sidebar .comic-remix .img-comic-remix:focus {
        box-shadow: 0 0 0 4px #ffffff, 0 0 0 8px #ff6200, inset 0 0 0 6px white, inset 6px 0 0 6px white, 0px 8px 6px rgba(0, 0, 0, 0.5); } }
  @media only screen and (min-width: 901px) {
    .theme-day #latest-comics {
      box-shadow: inset 0 -16px 0px #ffffff; }
    .theme-day #footer .footer-social-wrap {
      background-color: #e8eaed;
      background-image: linear-gradient(-45deg, #e8eaed 25%, transparent 25%), linear-gradient(45deg, #e8eaed 25%, #ffffff 25%); }
    .theme-day #archive .topics ul li a:hover .avatar .border, .theme-day #archive .topics ul li a:focus .avatar .border {
      box-shadow: 0 0 0 0px #ffffff, 0 0 0 7px #00c6f2; } }
  @media only screen and (min-width: 1281px) {
    .theme-day #archive .topics ul li a:hover .avatar .border, .theme-day #archive .topics ul li a:focus .avatar .border {
      box-shadow: 0 0 0 0px #ffffff, 0 0 0 8px #ff6200; }
    .theme-day .related-posts .avatar .reply-bubble:hover, .theme-day .related-posts .avatar .reply-bubble:focus {
      background-color: white;
      color: #f24900;
      box-shadow: 0 0 0 3px white;
      border-color: #f24900; } }
  @media screen and (prefers-reduced-motion: reduce) {
    .theme-day .orange-btn:hover, .theme-day .orange-btn:focus,
    .theme-day .post-nav li a:hover,
    .theme-day .post-nav li a:focus {
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.4), 0 0 0 4px #697586 !important; }
    .theme-day .related-comic:hover .img, .theme-day .related-comic:focus .img {
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.4), 0 0 0 4px #697586 !important; }
    .theme-day .news-post-page .post-body .related-comic:hover, .theme-day .news-post-page .post-body .related-comic:focus, .theme-day #about .work .related-comic:hover, .theme-day #about .work .related-comic:focus {
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.4), 0 0 0 4px #697586 !important; }
    .theme-day .comic-remix .img-comic-remix:hover, .theme-day .comic-remix .img-comic-remix:focus {
      box-shadow: inset 0 0 0 6px #ffffff, inset 6px 0 0 6px #ffffff, 0px 3px 6px rgba(0, 0, 0, 0.4), 0 0 0 4px #697586 !important; }
    .theme-day #comic.remix .panel-lock.locked:hover:after, .theme-day #comic.remix .panel-lock.locked:focus:after {
      background-color: rgba(159, 120, 96, 0.85); }
    .theme-day #archive .topics ul li a:hover .avatar .border, .theme-day #archive .topics ul li a:focus .avatar .border {
      background: #697586 !important; }
    .theme-day #main.podcasts-page .hero-img:hover, .theme-day #main.podcasts-page .hero-img:focus,
    .theme-day #main.video-page .hero-img:hover,
    .theme-day #main.video-page .hero-img:focus,
    .theme-day #main.stories-page .hero-img:hover,
    .theme-day #main.stories-page .hero-img:focus,
    .theme-day #main.stories-universe-page .archive .hero-img:hover,
    .theme-day #main.stories-universe-page .archive .hero-img:focus {
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.4), 0 0 0 4px #697586 !important; }
    .theme-day #main.about-page .stories a:hover .hero-img, .theme-day #main.about-page .stories a:focus .hero-img {
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.4), 0 0 0 4px #697586 !important; }
    .theme-day .post-text a:hover, .theme-day .post-text a:focus, .theme-day .about a:hover, .theme-day .about a:focus, .theme-day .remix .reroll p a:hover, .theme-day .remix .reroll p a:focus {
      box-shadow: 0 0 0 2px white, 0 0 0 4px #697586 !important; }
    .theme-day h1 a:focus, .theme-day h2 a:focus, .theme-day h3 a:focus, .theme-day h4 a:focus, .theme-day h5 a:focus, .theme-day h6 a:focus,
    .theme-day .details a:focus,
    .theme-day .replies section div p a:focus,
    .theme-day .tags a:focus {
      box-shadow: 0 0 0 2px white, 0 0 0 4px #697586 !important; }
    .theme-day .replies section div p a:hover, .theme-day .replies section div p a:focus {
      box-shadow: 0 0 0 2px #e8eaed, 0 0 0 4px #697586 !important; }
    .theme-day input[type="search"],
    .theme-day input[type="text"],
    .theme-day input[type="email"],
    .theme-day textarea {
      box-shadow: inset 0 0 0 0 #697586 !important; }
      .theme-day input[type="search"]:focus,
      .theme-day input[type="text"]:focus,
      .theme-day input[type="email"]:focus,
      .theme-day textarea:focus {
        box-shadow: inset 0 0 0 3px #ccced1 !important; }
    .theme-day .checkbox input:focus + .checkmark,
    .theme-day .checkbox:hover input ~ .checkmark {
      box-shadow: 0px 0px 0px 2px #697586 !important; }
    .theme-day #nav-desktop .menu-display .btn-font-settings:hover svg, .theme-day #nav-desktop .menu-display .btn-font-settings:focus svg {
      box-shadow: 0 0 0 2px #e8eaed, 0 0 0 4px #697586 !important; }
    .theme-day .btn-display-mode:hover, .theme-day .btn-display-mode:focus {
      box-shadow: 0 0 0 2px #e8eaed, 0 0 0 4px #697586 !important; } }

#dimensions {
  height: 44px;
  padding: 8px;
  font-size: 18px !important;
  line-height: 24px !important; }

.link-offset {
  margin-top: -128px;
  height: 128px;
  width: 100%; }

/*--------------------*/
/* Buttons -----------*/
/*--------------------*/
.orange-btn,
#aria-skip a:focus,
#aria-skip a:active {
  background: #ff6200 linear-gradient(130deg, #ffbd2b 0%, #ff8c00 25%, #ff6200 65%, #f24900 100%);
  font-family: proxima-nova, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 18px;
  line-height: 24px;
  color: #ffffff !important;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  border: none;
  padding: 8px 16px;
  display: inline-block;
  border-radius: 48px;
  transition: box-shadow 150ms ease-in;
  box-shadow: 0 0 0px 0px white, 0px 3px 6px rgba(0, 0, 0, 0.85); }
  .orange-btn:hover, .orange-btn:focus,
  #aria-skip a:focus:hover,
  #aria-skip a:focus:focus,
  #aria-skip a:active:hover,
  #aria-skip a:active:focus {
    outline: none;
    z-index: 3;
    transition: box-shadow 250ms cubic-bezier(0.5, 4, 0.01, -0.8);
    box-shadow: 0 0 0 3px white, 0px 3px 6px rgba(0, 0, 0, 0.85); }
  .orange-btn svg,
  #aria-skip a:focus svg,
  #aria-skip a:active svg {
    fill: #ffffff;
    margin-right: 6px;
    float: left; }
  .orange-btn.play,
  #aria-skip a:focus.play,
  #aria-skip a:active.play {
    padding-left: 16px; }
    .orange-btn.play svg,
    #aria-skip a:focus.play svg,
    #aria-skip a:active.play svg {
      width: 20px;
      margin: 1px 6px -1px 0; }
  .orange-btn.more-news,
  #aria-skip a:focus.more-news,
  #aria-skip a:active.more-news {
    font-size: 22px;
    line-height: 36px;
    margin: 0 auto;
    display: block;
    width: 216px;
    padding: 10px 32px; }
  .orange-btn.dice,
  #aria-skip a:focus.dice,
  #aria-skip a:active.dice {
    padding-left: 8px; }
    .orange-btn.dice svg,
    #aria-skip a:focus.dice svg,
    #aria-skip a:active.dice svg {
      height: 28px;
      margin: -2px 6px -2px 0; }
  .orange-btn.print,
  #aria-skip a:focus.print,
  #aria-skip a:active.print {
    padding-left: 16px; }
    .orange-btn.print svg,
    #aria-skip a:focus.print svg,
    #aria-skip a:active.print svg {
      width: 35px;
      margin: -1px 12px 0 0;
      margin: 4px 8px 0 0; }
  .orange-btn.random,
  #aria-skip a:focus.random,
  #aria-skip a:active.random {
    padding-left: 8px; }
    .orange-btn.random svg,
    #aria-skip a:focus.random svg,
    #aria-skip a:active.random svg {
      height: 32px;
      margin: -4px 4px -4px 0; }

.btn-list {
  margin: 20px 0 8px 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap; }
  .btn-list li {
    margin: 0 8px 8px 0; }
    .btn-list li:last-child {
      margin-right: 0; }

.outline-btn {
  border: 2px solid #818FA6;
  cursor: pointer;
  border-radius: 44px;
  font-size: 16px;
  line-height: 16px;
  font-family: proxima-nova, Helvetica, sans-serif;
  font-weight: 500;
  text-decoration: none;
  padding: 6px 16px;
  color: #818FA6 !important;
  display: flex;
  align-items: center;
  transition: all 150ms ease-out; }
  .outline-btn svg {
    transition: all 150ms ease-out;
    fill: #818FA6;
    margin-right: 6px; }
  .outline-btn:hover, .outline-btn:focus {
    outline: none;
    color: #010a1a !important;
    background-color: #818FA6 !important;
    transition: all 80ms ease-in; }
    .outline-btn:hover svg, .outline-btn:focus svg {
      transition: all 80ms ease-in;
      fill: #010a1a !important;
      stroke: #010a1a !important; }
    .outline-btn:hover.landscape-btn svg, .outline-btn:hover.youtube-btn svg, .outline-btn:hover.twitch-btn svg, .outline-btn:hover.twitter-share-btn svg, .outline-btn:hover.fb-share-btn svg, .outline-btn:hover.rss-btn svg, .outline-btn:focus.landscape-btn svg, .outline-btn:focus.youtube-btn svg, .outline-btn:focus.twitch-btn svg, .outline-btn:focus.twitter-share-btn svg, .outline-btn:focus.fb-share-btn svg, .outline-btn:focus.rss-btn svg {
      stroke: none !important; }
  .outline-btn.youtube-btn, .outline-btn.twitch-btn {
    padding-left: 9px;
    padding-right: 9px; }
    .outline-btn.youtube-btn svg, .outline-btn.twitch-btn svg {
      width: 13px; }
  .outline-btn.twitter-share-btn, .outline-btn.fb-share-btn {
    padding-left: 10px;
    padding-right: 12px; }
    .outline-btn.twitter-share-btn:hover, .outline-btn.twitter-share-btn:focus, .outline-btn.fb-share-btn:hover, .outline-btn.fb-share-btn:focus {
      color: #010a1a !important;
      border-color: #818FA6 !important;
      background-color: #818FA6 !important; }
      .outline-btn.twitter-share-btn:hover svg, .outline-btn.twitter-share-btn:focus svg, .outline-btn.fb-share-btn:hover svg, .outline-btn.fb-share-btn:focus svg {
        fill: #010a1a !important; }
  .outline-btn.twitter-share-btn {
    border-color: #1d9bf0;
    background-color: #1d9bf0;
    color: white !important; }
    .outline-btn.twitter-share-btn svg {
      fill: white; }
  .outline-btn.fb-share-btn {
    border-color: #1877f2;
    background-color: #1877f2;
    color: white !important; }
    .outline-btn.fb-share-btn svg {
      fill: white; }
  .outline-btn.rss-btn svg {
    width: 11px; }
  .outline-btn.landscape-btn, .outline-btn.download-btn, .outline-btn.share-btn {
    font-size: 14px;
    line-height: 14px;
    display: flex;
    text-align: left;
    padding: 1px 10px 2px 8px;
    height: 40px;
    width: 138px; }
    .outline-btn.landscape-btn svg, .outline-btn.download-btn svg, .outline-btn.share-btn svg {
      fill: #818FA6;
      width: 40px;
      margin-top: -3px; }
      .outline-btn.landscape-btn svg.icon-portrait, .outline-btn.download-btn svg.icon-portrait, .outline-btn.share-btn svg.icon-portrait {
        display: none; }
    .outline-btn.landscape-btn:hover, .outline-btn.download-btn:hover, .outline-btn.share-btn:hover {
      cursor: pointer; }
  .outline-btn.download-btn svg, .outline-btn.share-btn svg {
    stroke: #818FA6;
    margin-top: 0; }
  .outline-btn.share-btn, .outline-btn.download-btn {
    width: 18px;
    height: auto;
    border: 0;
    padding: 0; }
    .outline-btn.share-btn svg, .outline-btn.download-btn svg {
      margin: 0; }
  .outline-btn.buy-print-btn {
    font-size: 14px;
    line-height: 14px;
    height: 40px;
    width: 138px;
    padding: 1px 10px 2px 10px; }
    .outline-btn.buy-print-btn svg {
      fill: #818FA6;
      stroke: none !important;
      width: 33px;
      margin: 4px 8px 0 0; }

.share-btns {
  position: relative;
  display: flex;
  justify-content: flex-end; }
  .share-btns .download-menu-wrap, .share-btns .settings-menu-wrap {
    margin-right: 16px; }
  .share-btns > div > button,
  .share-btns > div > a {
    width: 18px;
    height: 28px;
    margin-top: -2px;
    stroke: #818FA6;
    display: block;
    box-shadow: 0 0 0 0 #141E2F;
    border-radius: 0px;
    transition: all 150ms ease-out; }
    .share-btns > div > button.download-btn, .share-btns > div > button.share-btn, .share-btns > div > button.settings-btn,
    .share-btns > div > a.download-btn,
    .share-btns > div > a.share-btn,
    .share-btns > div > a.settings-btn {
      position: relative; }
      .share-btns > div > button.download-btn svg, .share-btns > div > button.share-btn svg, .share-btns > div > button.settings-btn svg,
      .share-btns > div > a.download-btn svg,
      .share-btns > div > a.share-btn svg,
      .share-btns > div > a.settings-btn svg {
        position: absolute;
        top: 0;
        left: 0; }
    .share-btns > div > button svg,
    .share-btns > div > a svg {
      transition: all 150ms ease-out; }
    .share-btns > div > button:hover, .share-btns > div > button:focus,
    .share-btns > div > a:hover,
    .share-btns > div > a:focus {
      outline: none;
      border-radius: 36px;
      box-shadow: 0 0 0 8px #141E2F;
      background-color: #141E2F;
      transition: all 80ms ease-in; }
      .share-btns > div > button:hover svg, .share-btns > div > button:focus svg,
      .share-btns > div > a:hover svg,
      .share-btns > div > a:focus svg {
        transition: all 80ms ease-in;
        fill: #ff6200 !important;
        stroke: #ff6200 !important; }
    .share-btns > div > button.settings-btn svg,
    .share-btns > div > a.settings-btn svg {
      top: 5px;
      fill: #818FA6; }

/*------------------------*/
/* Share & Download Menus */
/*------------------------*/
.share-menu, .download-menu, .settings-menu {
  display: none;
  background: #141E2F;
  font-size: 14px;
  line-height: 18px;
  border-radius: 12px;
  position: absolute;
  padding: 14px 9px 16px 16px;
  gap: 0 20px;
  grid-template-columns: 1fr 1fr 24px;
  right: -12px;
  top: -12px;
  width: 40vw;
  min-width: 264px;
  max-width: 312px;
  z-index: 3;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.5); }
  .share-menu.open, .download-menu.open, .settings-menu.open {
    display: grid; }
  .share-menu .btn-list li, .download-menu .btn-list li, .settings-menu .btn-list li {
    margin-bottom: 0; }
  .share-menu .icon-close, .download-menu .icon-close, .settings-menu .icon-close {
    width: 24px;
    height: 22px;
    grid-column: 3;
    grid-row: 1;
    margin-top: 0;
    border-radius: 16px; }
    .share-menu .icon-close svg, .download-menu .icon-close svg, .settings-menu .icon-close svg {
      width: 18px;
      display: block;
      margin: 0 auto;
      stroke: #ffffff;
      transition: all 150ms ease-out;
      box-shadow: 0 0 0 0 #010a1a; }
    .share-menu .icon-close:hover, .share-menu .icon-close:focus, .download-menu .icon-close:hover, .download-menu .icon-close:focus, .settings-menu .icon-close:hover, .settings-menu .icon-close:focus {
      transition: all 80ms ease-in;
      background-color: #010a1a;
      box-shadow: 0 0 0 6px #010a1a; }
      .share-menu .icon-close:hover svg, .share-menu .icon-close:focus svg, .download-menu .icon-close:hover svg, .download-menu .icon-close:focus svg, .settings-menu .icon-close:hover svg, .settings-menu .icon-close:focus svg {
        stroke: #ff6200 !important;
        transition: all 80ms ease-in; }
  .share-menu .permalink, .download-menu .permalink, .settings-menu .permalink {
    grid-column: 1 / -1; }
  .share-menu p.permalink, .download-menu p.permalink, .settings-menu p.permalink {
    margin: 18px 0 4px 0;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    color: white;
    font-weight: 600; }
    .share-menu p.permalink svg, .download-menu p.permalink svg, .settings-menu p.permalink svg {
      margin-right: 6px;
      stroke: #ffffff; }
  .share-menu a.permalink, .download-menu a.permalink, .settings-menu a.permalink {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    margin-right: 8px;
    text-decoration: none; }
    .share-menu a.permalink:hover, .share-menu a.permalink:focus, .download-menu a.permalink:hover, .download-menu a.permalink:focus, .settings-menu a.permalink:hover, .settings-menu a.permalink:focus {
      outline: none;
      text-decoration: underline; }

.share-menu .btn-list {
  grid-row: 1;
  grid-column: 1 / span 2;
  margin: 4px 0 0 0; }

.download-menu {
  grid-template-columns: 1fr 1fr 24px; }
  .download-menu svg {
    fill: #ffcd00;
    height: 20px;
    width: auto;
    grid-column: 1;
    margin-top: 4px; }
  .download-menu p {
    grid-row: 2;
    grid-column: 1 / -1;
    margin-top: 8px;
    margin-right: 8px; }
  .download-menu .btn-list {
    grid-column: 1 / -1;
    margin: 12px 0 0 0; }
    .download-menu .btn-list a {
      border-color: #ffcd00;
      color: #ffcd00 !important;
      color: #ffcd00 !important; }
      .download-menu .btn-list a:hover, .download-menu .btn-list a:focus {
        background-color: #ffcd00 !important;
        color: #141E2F !important; }

.share-menu-wrap, .download-menu-wrap, .settings-menu-wrap {
  position: relative; }

.comic-option-btns .share-menu, .comic-option-btns .download-menu, .comic-option-btns .settings-menu {
  top: -3px; }

.comic-option-btns .download-menu-wrap > button, .comic-option-btns .download-menu-wrap > a,
.comic-option-btns .share-menu-wrap > button,
.comic-option-btns .share-menu-wrap > a,
.comic-option-btns .settings-menu-wrap > button,
.comic-option-btns .settings-menu-wrap > a {
  width: auto; }

/*--------------------*/
/* Forms -------------*/
/*--------------------*/
input[type="search"] {
  -webkit-appearance: textfield; }

.message {
  background: #00c6f2 linear-gradient(to top, #00c6f2 95%, #0087a6);
  color: #010a1a;
  text-align: center;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  font-weight: 700; }
  .message.success {
    background: #aede31 linear-gradient(to top, #aede31 95%, #81a81b); }
  .message.error {
    background: #ff704d linear-gradient(to top, #ff704d 95%, #cd2800); }
  .message button {
    transition: all 150ms ease-out;
    border-radius: 24px;
    width: 32px;
    height: 32px;
    align-self: center;
    box-shadow: 0 0 0 0px #ffffff; }
    .message button svg {
      stroke: #010a1a;
      display: block;
      margin: 0 auto; }
    .message button:hover, .message button:focus {
      outline: none;
      background: white;
      box-shadow: 0 0 0 3px #ffffff;
      transition: all 80ms ease-in;
      transform: scale(1.1, 1.1); }

form p.field-wrap {
  background: #ffffff;
  border-radius: 48px;
  width: 100%;
  height: 56px;
  display: flex;
  border: 3px solid #010a1a; }

form .field {
  font-family: proxima-nova, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #697586;
  background: none;
  padding: 20px 16px 20px 48px;
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 48px; }

form input[type="search"],
form input[type="text"],
form input[type="email"],
form textarea {
  box-shadow: inset 0 0 0 0 #ff6200;
  transition: all 150ms ease-out; }
  form input[type="search"]:focus,
  form input[type="text"]:focus,
  form input[type="email"]:focus,
  form textarea:focus {
    transition: all 80ms ease-in;
    outline: none;
    box-shadow: inset 0 0 0 3px #ff6200; }

form input.orange-btn {
  height: 40px;
  margin: 5px 5px 0 0;
  box-shadow: 0 0 0px 0px #ff6200, 0px 1px 2px rgba(0, 0, 0, 0.5), inset 0 0 0px 0px white; }
  form input.orange-btn:hover, form input.orange-btn:focus {
    box-shadow: 0 0 0px 3px #ff6200, 0px 3px 6px rgba(0, 0, 0, 0.7), inset 0 0 0px 3px white; }

form .admin-input, .site-login form input, .replies.reply-form form input[type="text"] {
  display: block;
  width: 100%;
  padding: 8px 16px;
  font-size: 16px;
  line-height: 18px;
  font-family: proxima-nova, Helvetica, sans-serif;
  font-weight: 400;
  color: #141E2F;
  border: 3px solid #818FA6;
  border-radius: 60px;
  outline: none;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8); }
  form .admin-input:hover, .site-login form input:hover, .replies.reply-form form input[type="text"]:hover, form .admin-input:focus, .site-login form input:focus, .replies.reply-form form input[type="text"]:focus {
    transition: all 150ms ease-out;
    border-color: #aede31; }

/*------------*/
/* Checkboxes */
/*------------*/
.checkboxes {
  font-family: proxima-nova, Helvetica, sans-serif;
  display: flex;
  max-width: 344px;
  flex: 1;
  margin: 20px auto 0 auto;
  padding: 0 12px;
  justify-content: space-between; }

.checkbox {
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  color: #ffffff;
  display: block;
  position: relative;
  padding-left: 35px;
  cursor: pointer; }
  .checkbox:hover, .checkbox:focus {
    text-decoration: underline; }
  .checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0; }
  .checkbox .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 24px;
    width: 24px;
    background-color: white;
    border: 2px solid #010a1a;
    border-radius: 4px;
    transition: all 150ms ease-out; }
    .checkbox .checkmark:after {
      display: block;
      position: absolute;
      content: "";
      display: none;
      left: 6px;
      top: 1px;
      width: 6px;
      height: 12px;
      border: solid white;
      border-width: 0 3px 3px 0;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg); }
  .checkbox input:focus + .checkmark,
  .checkbox:hover input ~ .checkmark {
    box-shadow: 0px 0px 0px 2px white;
    transition: all 80ms ease-in; }
  .checkbox input:checked ~ .checkmark {
    background-color: #ff6200;
    border-color: #ff6200; }
    .checkbox input:checked ~ .checkmark:after {
      display: block; }

/*--------------------*/
/* ARIA --------------*/
/*--------------------*/
#aria-skip a {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden; }

#aria-skip {
  display: flex;
  justify-content: center; }

#aria-skip a:focus,
#aria-skip a:active {
  outline: none;
  position: static;
  width: auto;
  height: auto;
  display: inline-block;
  margin: 16px 0; }

.aria-show {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden; }

/*---------*/
/* Cookies */
/*---------*/
#cookies {
  position: fixed;
  z-index: 4;
  bottom: 0;
  box-shadow: 0px -3px 8px rgba(0, 0, 0, 0.8);
  background: #007cbf;
  border-radius: 12px 12px 0 0;
  color: white;
  gap: 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  font-size: 16px;
  line-height: 20px;
  padding: 16px 16px 24px 16px; }
  #cookies p {
    grid-column: 1 / span 2; }
  #cookies .outline-btn {
    color: white !important;
    border-color: white;
    text-align: center;
    display: grid;
    padding: 8px 16px;
    height: auto; }
    #cookies .outline-btn:hover, #cookies .outline-btn:focus {
      background-color: #ffffff !important;
      color: #010a1a !important;
      border-color: #ffffff !important; }
    #cookies .outline-btn.allow {
      border-color: #010a1a;
      background: #010a1a; }

/*-----*/
/* Ads */
/*-----*/
.ad {
  overflow: hidden;
  width: 100%;
  margin: 16px 0; }
  .ad * {
    max-width: 100%; }
  .ad .ad-txt {
    color: #818FA6;
    font-size: 10px;
    line-height: 12px;
    font-size: 10px;
    line-height: 12px;
    display: block;
    text-align: center;
    margin-bottom: 2px; }
  .ad .ad-wrap {
    overflow: hidden;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center; }
    .ad .ad-wrap.ad-header {
      width: 320px;
      height: 100px; }
    .ad .ad-wrap.ad-sidebar {
      width: 320px;
      height: 100px; }
    .ad .ad-wrap.ad-body-1, .ad .ad-wrap.ad-body-2, .ad .ad-wrap.ad-body-3 {
      width: 320px;
      height: 100px; }
    .ad .ad-wrap.ad-archive {
      width: 320px;
      height: 100px; }
    .ad .ad-wrap.ad-news-feature {
      width: 300px;
      height: 250px; }

/*-----*/
/* Nav */
/*-----*/
#header {
  font-family: proxima-nova, Helvetica, sans-serif;
  background: #031f4d;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
  position: sticky !important;
  top: 0;
  height: 62px;
  z-index: 100; }
  #header .pa-icon, #header #nav-mobile-menu-open .nav-top .pa-logo {
    background: url("https://assets.penny-arcade.com/img/site/logo-pa.svg") center left no-repeat;
    background-size: 56px;
    height: 38px;
    width: 56px; }
  #header.menu-open {
    height: 100vh; }
    #header.menu-open #nav-mobile-menu-closed {
      display: none; }
    #header.menu-open #nav-mobile-menu-open {
      display: block; }
  #header #nav li {
    list-style: none; }
  #header #nav a {
    text-decoration: none;
    color: #ffffff; }
  #header #nav .nav-div:before {
    background: #003e80; }
  #header #nav .brand-link svg, #header #nav .font-settings svg {
    fill: #ffffff;
    transition: all 150ms ease-out; }
  #header #nav .cpa-link svg {
    fill: #ffcd00; }
  #header #nav .btn-display-mode span {
    border-color: #ffffff; }
  #header #nav .btn-display-mode .night {
    background: #031f4d; }
  #header #nav .btn-display-mode .day svg {
    fill: #031f4d; }
  #header #nav .font-settings li button.selected {
    border-color: #ffffff !important; }
    #header #nav .font-settings li button.selected:hover, #header #nav .font-settings li button.selected:focus {
      border-color: #33ebff !important; }
  #header #nav-mobile-menu-closed,
  #header #nav-desktop {
    background: #003e80;
    height: 56px; }
    #header #nav-mobile-menu-closed .menu-main,
    #header #nav-desktop .menu-main {
      padding-left: 12px;
      display: flex;
      height: 56px;
      justify-content: space-between;
      align-items: center;
      overflow: hidden; }
      #header #nav-mobile-menu-closed .menu-main li,
      #header #nav-desktop .menu-main li {
        height: 100%; }
        #header #nav-mobile-menu-closed .menu-main li.current-page:after,
        #header #nav-desktop .menu-main li.current-page:after {
          display: block;
          position: absolute;
          content: "";
          position: relative;
          background: #007cbf;
          background-image: linear-gradient(to top, #003e80 40%, #007cbf 65%);
          width: 14px;
          height: 14px;
          bottom: 8px;
          margin: 0 auto;
          border-radius: 10px; }
        #header #nav-mobile-menu-closed .menu-main li .icon-menu,
        #header #nav-desktop .menu-main li .icon-menu {
          background: url("https://assets.penny-arcade.com/img/site/icon-menu.svg") center no-repeat;
          background-size: 32px;
          width: 50px;
          height: 56px;
          margin-right: 1px;
          margin-top: 1px;
          transition: all 150ms ease-out; }
          #header #nav-mobile-menu-closed .menu-main li .icon-menu:hover, #header #nav-mobile-menu-closed .menu-main li .icon-menu:focus,
          #header #nav-desktop .menu-main li .icon-menu:hover,
          #header #nav-desktop .menu-main li .icon-menu:focus {
            transition: all 80ms ease-in;
            transform: scale(1.125, 1.125); }
        #header #nav-mobile-menu-closed .menu-main li a,
        #header #nav-desktop .menu-main li a {
          display: block;
          font-family: proxima-nova, Helvetica, sans-serif;
          font-weight: 800;
          font-size: 22px;
          line-height: 28px;
          text-align: center;
          text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
          text-transform: uppercase;
          color: #ffffff;
          text-decoration: none;
          height: 100%;
          height: 56px;
          padding: 14px 4px 8px 4px; }
          #header #nav-mobile-menu-closed .menu-main li a span,
          #header #nav-desktop .menu-main li a span {
            overflow: auto;
            padding: 0 12px;
            border-radius: 80px;
            transition: box-shadow 150ms ease-out;
            box-shadow: inset 0 0 0 0 #002966, 0 0 0 0 #002966; }
            #header #nav-mobile-menu-closed .menu-main li a span.aria-show,
            #header #nav-desktop .menu-main li a span.aria-show {
              padding: 0;
              overflow: hidden; }
          #header #nav-mobile-menu-closed .menu-main li a:hover, #header #nav-mobile-menu-closed .menu-main li a:focus,
          #header #nav-desktop .menu-main li a:hover,
          #header #nav-desktop .menu-main li a:focus {
            outline: none; }
            #header #nav-mobile-menu-closed .menu-main li a:hover span, #header #nav-mobile-menu-closed .menu-main li a:focus span,
            #header #nav-desktop .menu-main li a:hover span,
            #header #nav-desktop .menu-main li a:focus span {
              transition: box-shadow 250ms cubic-bezier(0.5, 6, 0.01, -0.8);
              box-shadow: inset 0 0 0 40px #031f4d, 0 0 0 2px #031f4d; }
    #header #nav-mobile-menu-closed:after,
    #header #nav-desktop:after {
      display: block;
      position: absolute;
      content: "";
      background: #ff6200 linear-gradient(to left, #ffbd2b 0%, #ff8c00 25%, #ff6200 65%, #f24900 100%);
      height: 6px;
      width: 100%;
      bottom: 0;
      left: 0; }
  #header #nav-mobile-menu-open {
    display: none;
    position: relative; }
    #header #nav-mobile-menu-open:after {
      display: block;
      position: absolute;
      content: "";
      background: #ff6200 linear-gradient(to top, #ffbd2b 0%, #ff8c00 25%, #ff6200 65%, #f24900 100%);
      width: 6px;
      height: 100vh;
      top: 0;
      right: 0;
      box-shadow: -1px 0px 3px rgba(0, 0, 0, 0.5);
      z-index: 3; }
    #header #nav-mobile-menu-open:before {
      display: block;
      position: absolute;
      content: "";
      width: 100%;
      height: 24px;
      bottom: 0;
      left: 0;
      z-index: 2;
      background-image: linear-gradient(360deg, rgba(0, 0, 0, 0.4), transparent 24px); }
    #header #nav-mobile-menu-open li.current-page a {
      text-decoration: underline;
      color: #33ebff; }
    #header #nav-mobile-menu-open .nav-top {
      padding: 12px 12px 20px 12px;
      display: grid;
      grid: auto / auto 30px;
      background-color: #003e80;
      position: relative; }
      #header #nav-mobile-menu-open .nav-top:after {
        display: block;
        position: absolute;
        content: "";
        width: 100%;
        height: 8px;
        bottom: -8px;
        background-image: linear-gradient(-135deg, #003e80 25%, transparent 25%), linear-gradient(135deg, #003e80 25%, transparent 25%);
        background-repeat: repeat-x;
        background-size: 16px 17px;
        z-index: 1; }
      #header #nav-mobile-menu-open .nav-top .icon-close {
        background: url("https://assets.penny-arcade.com/img/site/icon-close.svg") center no-repeat;
        background-size: 24px;
        width: 32px;
        height: 32px;
        transition: all 150ms ease-out; }
        #header #nav-mobile-menu-open .nav-top .icon-close:hover, #header #nav-mobile-menu-open .nav-top .icon-close:focus {
          transition: all 80ms ease-in;
          transform: scale(1.125, 1.125); }
      #header #nav-mobile-menu-open .nav-top .pa-logo {
        width: 280px;
        height: 32px;
        font-size: 24px;
        line-height: 32px; }
        #header #nav-mobile-menu-open .nav-top .pa-logo h1 {
          display: inline-block;
          color: #ffffff;
          font-size: 24px;
          line-height: 32px;
          text-transform: uppercase;
          padding: 0 0 0 68px; }
      #header #nav-mobile-menu-open .nav-top #nav-search {
        grid-column: span 2;
        margin-top: 12px; }
        #header #nav-mobile-menu-open .nav-top #nav-search p.field-wrap {
          height: 48px;
          border-color: #031f4d;
          background: #ffffff url("https://assets.penny-arcade.com/img/site/icon-search.svg") 12px center no-repeat; }
        #header #nav-mobile-menu-open .nav-top #nav-search .field {
          padding: 20px 16px 20px 48px;
          height: 42px;
          border-radius: 30px; }
        #header #nav-mobile-menu-open .nav-top #nav-search input.orange-btn {
          height: 36px;
          padding: 0 16px;
          margin: 3px 3px 0 0; }
    #header #nav-mobile-menu-open .nav-overflow {
      overflow: auto;
      height: calc(100vh - 124px); }
    #header #nav-mobile-menu-open .nav-grid {
      display: grid;
      align-items: start;
      justify-content: start;
      grid-auto-flow: dense;
      gap: 0 8px;
      grid-template-columns: repeat(2, 1fr);
      font-size: 20px;
      line-height: 36px;
      font-weight: 500;
      padding: 28px 24px 0 24px; }
      #header #nav-mobile-menu-open .nav-grid a {
        transition: all 150ms ease-out; }
      #header #nav-mobile-menu-open .nav-grid a:hover, #header #nav-mobile-menu-open .nav-grid a:focus {
        color: #33ebff;
        outline: none;
        transition: all 80ms ease-in;
        border-radius: 2px; }
        #header #nav-mobile-menu-open .nav-grid a:hover svg, #header #nav-mobile-menu-open .nav-grid a:focus svg {
          fill: #33ebff; }
      #header #nav-mobile-menu-open .nav-grid a:focus {
        box-shadow: 0 0 0 2px #031f4d, 0 0 0 4px #33ebff; }
      #header #nav-mobile-menu-open .nav-grid .nav-div {
        padding-top: 20px;
        margin-top: 12px;
        position: relative; }
        #header #nav-mobile-menu-open .nav-grid .nav-div:before {
          display: block;
          position: absolute;
          content: "";
          width: 36px;
          height: 2px;
          top: 0;
          left: 0; }
    #header #nav-mobile-menu-open .menu-main {
      padding-bottom: 24px;
      grid-row: 1 / span 2; }
      #header #nav-mobile-menu-open .menu-main .main-link {
        font-family: proxima-nova, Helvetica, sans-serif;
        font-weight: 800;
        font-size: 22px;
        line-height: 28px;
        text-align: center;
        text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
        text-transform: uppercase;
        color: #ffffff;
        text-decoration: none;
        margin-bottom: 12px;
        text-align: left; }
      #header #nav-mobile-menu-open .menu-main .nav-div {
        padding-top: 12px !important;
        margin-top: 16px !important; }
    #header #nav-mobile-menu-open .menu-sub .cpa-logo {
      margin: 4px 0 8px 0; }
    #header #nav-mobile-menu-open .menu-sub .brand-link {
      margin-bottom: 12px; }
      #header #nav-mobile-menu-open .menu-sub .brand-link:last-child {
        margin-bottom: 0; }
      #header #nav-mobile-menu-open .menu-sub .brand-link a {
        line-height: 24px;
        display: flex;
        align-items: center; }
        #header #nav-mobile-menu-open .menu-sub .brand-link a svg {
          margin-right: 6px; }
  #header #nav-desktop {
    height: auto;
    display: none;
    /*----------*/
    /* Live Now */
    /*----------*/ }
    #header #nav-desktop:after {
      height: 4px; }
    #header #nav-desktop .menu-main .pa-icon, #header #nav-desktop .menu-main #nav-mobile-menu-open .nav-top .pa-logo, #header #nav-mobile-menu-open .nav-top #nav-desktop .menu-main .pa-logo {
      border-radius: 8px;
      background-position: center; }
      #header #nav-desktop .menu-main .pa-icon:hover, #header #nav-desktop .menu-main #nav-mobile-menu-open .nav-top .pa-logo:hover, #header #nav-mobile-menu-open .nav-top #nav-desktop .menu-main .pa-logo:hover, #header #nav-desktop .menu-main .pa-icon:focus, #header #nav-desktop .menu-main #nav-mobile-menu-open .nav-top .pa-logo:focus, #header #nav-mobile-menu-open .nav-top #nav-desktop .menu-main .pa-logo:focus {
        border-radius: 80px;
        transform: scale(0.9, 0.9);
        background-color: #031f4d;
        background-size: 80%; }
    #header #nav-desktop .menu-main #nav-search {
      margin-top: 8px; }
      #header #nav-desktop .menu-main #nav-search p.field-wrap {
        background: #003e80;
        border-color: #002966;
        border-width: 2px;
        height: 40px;
        padding: 0;
        position: relative; }
        #header #nav-desktop .menu-main #nav-search p.field-wrap svg {
          position: absolute;
          z-index: 1;
          width: 20px;
          height: 20px;
          left: 10px;
          top: 8px; }
          #header #nav-desktop .menu-main #nav-search p.field-wrap svg path {
            fill: white; }
      #header #nav-desktop .menu-main #nav-search .field {
        padding: 0 12px 0 36px;
        width: 100%;
        min-width: 100px;
        border-radius: 30px;
        height: 36px;
        color: white;
        font-size: 16px; }
    #header #nav-desktop .nav-wrap {
      background: #031f4d;
      transition: background 250ms ease-out;
      height: 40px;
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      color: #818FA6;
      font-size: 14px;
      line-height: 24px; }
      #header #nav-desktop .nav-wrap a {
        font-weight: 500; }
      #header #nav-desktop .nav-wrap .menu-sub-wrap {
        display: flex;
        max-width: 500px;
        margin-right: 16px;
        flex-grow: 1; }
    #header #nav-desktop #live-now {
      font-family: proxima-nova, Helvetica, sans-serif;
      color: #9661ff; }
      #header #nav-desktop #live-now p {
        display: inline-block;
        position: relative;
        padding-right: 18px; }
      #header #nav-desktop #live-now:after, #header #nav-desktop #live-now p:after {
        display: block;
        position: absolute;
        content: "";
        background-color: red;
        border-radius: 50%;
        height: 10px;
        width: 10px;
        right: 0;
        top: 5px;
        box-shadow: 0 0 0 0 red;
        transform: scale(1);
        animation: light-pulse 4s ease-out infinite; }
      #header #nav-desktop #live-now:after {
        display: none; }
      #header #nav-desktop #live-now a {
        color: #9661ff;
        text-decoration: none; }

@keyframes light-pulse {
  0% {
    transform: scale(1.2);
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); }
  52.5% {
    transform: scale(1);
    box-shadow: 0 0 0 12px rgba(255, 0, 0, 0); }
  75% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
  100% {
    transform: scale(0.85);
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); } }
    #header #nav-desktop #live-now {
      display: none;
      padding: 0 16px 0 18px;
      color: #ffffff;
      align-items: center;
      height: 24px;
      align-self: center;
      position: relative; }
      #header #nav-desktop #live-now:after {
        display: block;
        left: 0;
        top: auto; }
      #header #nav-desktop #live-now a {
        color: #ffffff;
        font-size: 16px;
        line-height: 24px;
        font-weight: 800;
        text-transform: uppercase; }
        #header #nav-desktop #live-now a:hover, #header #nav-desktop #live-now a:focus {
          outline: none;
          color: red; }
      #header #nav-desktop #live-now p {
        border-right: 2px solid #003e80;
        transition: border-color 250ms ease-out;
        padding-right: 16px; }
        #header #nav-desktop #live-now p:after {
          display: none; }
    #header #nav-desktop .menu-sub {
      display: flex;
      flex-grow: 1;
      justify-content: space-between;
      align-items: center; }
      #header #nav-desktop .menu-sub a {
        color: #818FA6;
        display: flex;
        align-items: center; }
        #header #nav-desktop .menu-sub a:hover, #header #nav-desktop .menu-sub a:focus {
          outline: none;
          text-decoration: underline;
          color: white; }
          #header #nav-desktop .menu-sub a:hover svg, #header #nav-desktop .menu-sub a:focus svg {
            fill: white !important; }
      #header #nav-desktop .menu-sub .about-link {
        border-left: 2px solid #003e80;
        transition: border-color 250ms ease-out;
        padding-left: 16px; }
        #header #nav-desktop .menu-sub .about-link:last-child {
          border: 0;
          padding: 0; }
      #header #nav-desktop .menu-sub .brand-link a {
        display: flex;
        align-items: center; }
        #header #nav-desktop .menu-sub .brand-link a svg {
          margin-right: 6px;
          fill: #818FA6; }
      #header #nav-desktop .menu-sub .brand-link .logo-acq-inc {
        height: 16px;
        width: 11px; }
      #header #nav-desktop .menu-sub .brand-link .logo-pax {
        height: 14px;
        width: 14px; }
      #header #nav-desktop .menu-sub .brand-link .logo-childs-play {
        height: 14px;
        width: 20px; }
      #header #nav-desktop .menu-sub .brand-link .logo-pinny-arcade {
        height: 16px;
        width: 15px; }
    #header #nav-desktop .menu-display {
      display: flex;
      align-items: center;
      padding: 0 !important; }
      #header #nav-desktop .menu-display .cpa-link {
        border-right: 2px solid #003e80;
        transition: border-color 250ms ease-out;
        margin-right: 12px;
        padding-right: 16px;
        display: flex;
        align-items: center; }
        #header #nav-desktop .menu-display .cpa-link svg {
          width: auto;
          height: 16px;
          margin-right: 4px; }
        #header #nav-desktop .menu-display .cpa-link a {
          font-weight: 600; }
          #header #nav-desktop .menu-display .cpa-link a:hover, #header #nav-desktop .menu-display .cpa-link a:focus {
            outline: none;
            text-decoration: underline; }
      #header #nav-desktop .menu-display .logo-club-pa {
        height: 16px;
        width: 14px; }
      #header #nav-desktop .menu-display .btn-font-settings {
        padding: 7px 4px 4px 4px;
        margin-right: 12px; }
        #header #nav-desktop .menu-display .btn-font-settings svg {
          width: 22px;
          fill: #ffffff;
          transition: all 150ms ease-out;
          border-radius: 2px;
          box-shadow: 0 0 0 0 #031f4d, 0 0 0 0 #33ebff; }
        #header #nav-desktop .menu-display .btn-font-settings:hover, #header #nav-desktop .menu-display .btn-font-settings:focus {
          outline: none; }
          #header #nav-desktop .menu-display .btn-font-settings:hover svg, #header #nav-desktop .menu-display .btn-font-settings:focus svg {
            border-radius: 2px;
            box-shadow: 0 0 0 2px #031f4d, 0 0 0 4px #33ebff;
            outline: none;
            transition: all 80ms ease-in; }
    #header #nav-desktop .btn-display-mode {
      width: 56px;
      height: 24px;
      border-radius: 4px; }
      #header #nav-desktop .btn-display-mode span {
        border-width: 1px; }
      #header #nav-desktop .btn-display-mode .night {
        border-radius: 4px 0 0 4px; }
        #header #nav-desktop .btn-display-mode .night svg {
          height: 12px; }
      #header #nav-desktop .btn-display-mode .day {
        border-radius: 0 4px 4px 0; }
        #header #nav-desktop .btn-display-mode .day svg {
          height: 16px; }

.live #header #nav-desktop .nav-wrap .menu-sub-wrap {
  max-width: 620px; }

.live #header #nav-desktop #live-now {
  display: flex; }

.menu-display {
  padding-top: 20px;
  padding-bottom: 32px; }
  .menu-display.nav-div {
    margin-top: 16px !important; }
  .menu-display .font-settings p {
    text-transform: uppercase;
    font-size: 16px;
    line-height: 20px;
    font-weight: 800;
    color: #007cbf;
    margin: 14px 0 8px 0; }
  .menu-display .font-settings ul {
    display: flex; }
  .menu-display .font-settings li:first-child {
    margin-right: 12px;
    padding-right: 12px;
    border-right-width: 2px;
    border-right-style: solid;
    border-color: #003e80; }
  .menu-display .font-settings li button {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 26px;
    width: 30px;
    padding: 0 0 6px 0;
    border-bottom: 2px solid transparent;
    transition: all 80ms ease-in; }
    .menu-display .font-settings li button svg {
      transition: all 150ms ease-out; }
    .menu-display .font-settings li button:hover svg, .menu-display .font-settings li button:focus svg {
      fill: #33ebff !important;
      transition: all 80ms ease-in; }
    .menu-display .font-settings li button:focus {
      outline: none;
      box-shadow: 0 0 0 2px #031f4d, 0 0 0 4px #33ebff;
      border-radius: 2px; }

.btn-display-mode {
  transition: all 150ms ease-out;
  display: flex;
  align-items: stretch;
  width: 86px;
  height: 40px;
  box-shadow: 0 0 0 0 #031f4d, 0 0 0 0 #00c6f2;
  border-radius: 8px; }
  .btn-display-mode span {
    display: flex;
    border-width: 2px;
    border-style: solid;
    flex: 1; }
  .btn-display-mode span svg {
    display: block;
    flex: 1;
    align-self: center; }
  .btn-display-mode .night {
    border-radius: 8px 0 0 8px;
    border-right-width: 1px; }
    .btn-display-mode .night svg {
      fill: #ffffff; }
  .btn-display-mode .day {
    background: #ffffff;
    border-radius: 0 8px 8px 0;
    border-left-width: 1px; }
  .btn-display-mode:hover, .btn-display-mode:focus {
    box-shadow: 0 0 0 2px #031f4d, 0 0 0 4px #33ebff;
    outline: none;
    transition: all 80ms ease-in; }

#nav-desktop .menu-display .font-menu-wrap {
  position: relative; }
  #nav-desktop .menu-display .font-menu-wrap .font-settings {
    display: none;
    position: absolute;
    background: #031f4d;
    border-radius: 12px;
    z-index: 2;
    top: 0;
    right: 8px;
    width: 148px;
    padding: 24px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.5); }
    #nav-desktop .menu-display .font-menu-wrap .font-settings .icon-close {
      width: 24px;
      height: 24px;
      position: absolute;
      right: 5px;
      top: 7px; }
      #nav-desktop .menu-display .font-menu-wrap .font-settings .icon-close svg {
        width: 20px;
        height: 20px;
        stroke: #ffffff; }
      #nav-desktop .menu-display .font-menu-wrap .font-settings .icon-close:hover svg, #nav-desktop .menu-display .font-menu-wrap .font-settings .icon-close:focus svg {
        stroke: #33ebff; }

.club-pa #header .pa-icon, .club-pa #header #nav-mobile-menu-open .nav-top .pa-logo {
  background: url("https://assets.penny-arcade.com/img/site/logo-pa-cpa-member.svg") center left no-repeat; }

.club-pa #header #nav-mobile-menu-closed:after,
.club-pa #header #nav-desktop:after {
  background: #ff6200 linear-gradient(to left, #ff8c00 0%, #ffcd00 100%); }

/*------------------------*/
/* Home ------------------*/
/*------------------------*/
/*--------*/
/* Twitch */
/*--------*/
.home-page .twitch-live .video, .home-page #highlight-reel .video {
  height: 100%; }

.home-page #sidebar .twitch-live, .home-page #sidebar #highlight-reel {
  display: none; }

.home-page #sidebar .twitch-live, .home-page #sidebar #highlight-reel,
.twitch-live,
#highlight-reel {
  font-family: proxima-nova, Helvetica, sans-serif;
  background: rgba(150, 97, 255, 0.1);
  box-shadow: inset 6px 0 0 #9661ff;
  padding-left: 6px;
  margin-bottom: 32px;
  margin-top: 32px;
  align-items: center;
  font-size: 18px !important;
  line-height: 28px !important;
  /*----------*/
  /* Live Now */
  /*----------*/ }
  .home-page #sidebar .twitch-live #live-now, .home-page #sidebar #highlight-reel #live-now,
  .twitch-live #live-now, #highlight-reel #live-now {
    font-family: proxima-nova, Helvetica, sans-serif;
    color: #9661ff; }
    .home-page #sidebar .twitch-live #live-now p, .home-page #sidebar #highlight-reel #live-now p,
    .twitch-live #live-now p, #highlight-reel #live-now p {
      display: inline-block;
      position: relative;
      padding-right: 18px; }
    .home-page #sidebar .twitch-live #live-now:after, .home-page #sidebar #highlight-reel #live-now:after, .home-page #sidebar .twitch-live #live-now p:after, .home-page #sidebar #highlight-reel #live-now p:after,
    .twitch-live #live-now:after, #highlight-reel #live-now:after,
    .twitch-live #live-now p:after, #highlight-reel #live-now p:after {
      display: block;
      position: absolute;
      content: "";
      background-color: red;
      border-radius: 50%;
      height: 10px;
      width: 10px;
      right: 0;
      top: 5px;
      box-shadow: 0 0 0 0 red;
      transform: scale(1);
      animation: light-pulse 4s ease-out infinite; }
    .home-page #sidebar .twitch-live #live-now:after, .home-page #sidebar #highlight-reel #live-now:after,
    .twitch-live #live-now:after, #highlight-reel #live-now:after {
      display: none; }
    .home-page #sidebar .twitch-live #live-now a, .home-page #sidebar #highlight-reel #live-now a,
    .twitch-live #live-now a, #highlight-reel #live-now a {
      color: #9661ff;
      text-decoration: none; }

@keyframes light-pulse {
  0% {
    transform: scale(1.2);
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); }
  52.5% {
    transform: scale(1);
    box-shadow: 0 0 0 12px rgba(255, 0, 0, 0); }
  75% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
  100% {
    transform: scale(0.85);
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); } }
  .home-page #sidebar .twitch-live .video, .home-page #sidebar #highlight-reel .video,
  .twitch-live .video, #highlight-reel .video {
    width: 100%;
    background: black;
    line-height: 0;
    height: 0;
    padding-top: 56.25%;
    position: relative; }
    .home-page #sidebar .twitch-live .video .video-embed, .home-page #sidebar #highlight-reel .video .video-embed,
    .twitch-live .video .video-embed, #highlight-reel .video .video-embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
  .home-page #sidebar .twitch-live .txt, .home-page #sidebar #highlight-reel .txt,
  .twitch-live .txt, #highlight-reel .txt {
    display: block;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    text-decoration: none;
    padding: 24px 24px 24px 18px; }
    .home-page #sidebar .twitch-live .txt #live-now, .home-page #sidebar #highlight-reel .txt #live-now,
    .twitch-live .txt #live-now, #highlight-reel .txt #live-now {
      grid-template-columns: 1;
      align-self: end; }
    .home-page #sidebar .twitch-live .txt p:first-child, .home-page #sidebar #highlight-reel .txt p:first-child,
    .twitch-live .txt p:first-child, #highlight-reel .txt p:first-child {
      font-size: 20px;
      line-height: 20px;
      font-weight: 800;
      text-transform: uppercase; }
  .home-page #sidebar .twitch-live a.txt:hover, .home-page #sidebar #highlight-reel a.txt:hover,
  .twitch-live a.txt:hover, #highlight-reel a.txt:hover {
    background: rgba(150, 97, 255, 0.4);
    transition: all 150ms ease-in; }
    .home-page #sidebar .twitch-live a.txt:hover #live-now, .home-page #sidebar #highlight-reel a.txt:hover #live-now,
    .twitch-live a.txt:hover #live-now, #highlight-reel a.txt:hover #live-now {
      color: white; }
  .home-page #sidebar .twitch-live .video-info, .home-page #sidebar #highlight-reel .video-info,
  .twitch-live .video-info, #highlight-reel .video-info {
    color: #ffffff;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    margin-top: 4px; }

.home-page #sidebar .twitch-live, .home-page #sidebar #highlight-reel {
  box-shadow: inset 8px 0 0 #9661ff;
  padding-left: 8px; }
  .home-page #sidebar .twitch-live .txt, .home-page #sidebar #highlight-reel .txt {
    font-size: 18px;
    line-height: 28px;
    width: auto;
    height: auto; }

.home-page .twitch-live, .home-page #highlight-reel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0; }
  .home-page .twitch-live .txt, .home-page #highlight-reel .txt {
    grid-area: 1 / 2;
    padding: 16px 16px 24px 20px; }
    .home-page .twitch-live .txt p:first-child, .home-page #highlight-reel .txt p:first-child {
      font-size: 18px;
      line-height: 21px; }
  .home-page .twitch-live .video-info, .home-page #highlight-reel .video-info {
    font-size: 16px;
    line-height: 20px; }

/*-----------------*/
/* Hightlight Reel */
/*-----------------*/
#highlight-reel {
  background: #141E2F;
  box-shadow: none;
  position: relative;
  margin-top: 24px;
  grid-area: con-img; }
  #highlight-reel:before {
    display: block;
    position: absolute;
    content: "";
    background: #ff6200 linear-gradient(to bottom, #f24900 0%, #f24900 50%, #ff8c00 50%, #ff8c00 85%, #ffcd00 85%, #ffcd00 100%);
    width: 6px;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 6px 0 0 6px;
    z-index: 2;
    border-radius: 0; }
  #highlight-reel .video,
  #highlight-reel .txt {
    height: auto; }
  #highlight-reel .txt p:first-child {
    color: #818FA6;
    margin-bottom: 12px; }

/*---------------*/
/* Latest Comics */
/*---------------*/
#latest-comics {
  font-family: proxima-nova, Helvetica, sans-serif;
  background: #ff6200;
  color: #ffffff;
  text-transform: uppercase;
  display: grid;
  grid: "latest-head latest-head latest-head" "comic-1 comic-2 comic-3" / 1fr 1fr 1fr;
  gap: 6px;
  padding: 14px 6px 0 6px;
  margin-bottom: 24px;
  box-shadow: inset 0 -16px 0px #010a1a;
  transition: box-shadow 250ms ease-out; }
  #latest-comics header {
    padding: 0 6px 6px 6px;
    grid-area: latest-head;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    #latest-comics header h1 {
      font-size: 20px;
      line-height: 24px;
      text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
      padding-top: 1px; }
    #latest-comics header p {
      font-size: 12px;
      line-height: 12px;
      color: #010a1a;
      font-weight: 700;
      text-align: right;
      width: 30%; }
  #latest-comics .comic-1 {
    grid-area: comic-1; }
  #latest-comics .comic-2 {
    grid-area: comic-2; }
  #latest-comics .comic-3 {
    grid-area: comic-3; }
  #latest-comics .comics {
    min-height: 96px;
    border-radius: 8px;
    overflow: hidden;
    z-index: 0;
    height: 100%;
    background: white;
    transition: box-shadow 150ms ease-in;
    box-shadow: 0 0 0 0 #ff6200, 0 3px 6px rgba(0, 0, 0, 0.5); }
    #latest-comics .comics:hover {
      outline: none;
      z-index: 3;
      transition: box-shadow 250ms cubic-bezier(0.5, 6, 0.01, -0.8);
      box-shadow: 0 0 0 3px white, 0px 3px 6px rgba(0, 0, 0, 0.5); }
      #latest-comics .comics:hover img {
        transition: transform 80ms ease-in;
        transform: scale(1.1, 1.1); }
    #latest-comics .comics img {
      transition: transform 200ms ease-out;
      height: 100%;
      width: 100%;
      object-fit: cover;
      margin: 0 auto; }
    #latest-comics .comics a {
      font-size: 18px;
      line-height: 18px;
      font-weight: 800;
      color: #ffffff;
      text-decoration: none;
      text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.8), 0px 1px 0px rgba(0, 0, 0, 0.5);
      display: block;
      position: relative;
      height: 100%;
      text-align: center; }
      #latest-comics .comics a:focus {
        border: 4px solid white; }
      #latest-comics .comics a p {
        position: absolute;
        bottom: 12px;
        right: 12px;
        text-align: right;
        z-index: 1; }

/*------------------------*/
/* Main Content ----------*/
/*------------------------*/
#main h1 a:hover, #main h1 a:focus, #main h2 a:hover, #main h2 a:focus, #main h3 a:hover, #main h3 a:focus, #main h4 a:hover, #main h4 a:focus, #main h5 a:hover, #main h5 a:focus, #main h6 a:hover, #main h6 a:focus {
  text-decoration: underline;
  outline: none; }

#main h1 a:focus, #main h2 a:focus, #main h3 a:focus, #main h4 a:focus, #main h5 a:focus, #main h6 a:focus {
  border-radius: 4px;
  text-decoration: none;
  box-shadow: 0 0 0 2px #010a1a, 0 0 0 4px #00c6f2; }

#main .details a:hover, #main .details a:focus {
  color: white; }

#main .details a:focus {
  text-decoration: none;
  outline: none;
  border-radius: 4px;
  box-shadow: 0 0 0 2px #010a1a, 0 0 0 4px #00c6f2; }

#main .replies section div p a,
#main .post-text a {
  border-radius: 4px; }
  #main .replies section div p a:hover, #main .replies section div p a:focus,
  #main .post-text a:hover,
  #main .post-text a:focus {
    outline: none;
    color: white;
    text-decoration: none;
    box-shadow: 0 0 0 2px #010a1a, 0 0 0 4px #00c6f2; }

#main .replies section div p a:hover, #main .replies section div p a:focus {
  box-shadow: 0 0 0 2px #141E2F, 0 0 0 4px #00c6f2; }

#main .featured .post-text a {
  color: #ff6200; }
  #main .featured .post-text a:hover, #main .featured .post-text a:focus {
    color: white;
    box-shadow: 0 0 0 2px #010a1a, 0 0 0 4px #ff6200; }

#main .featured header h1 a:focus,
#main .featured header h2 a:focus,
#main .featured .details a:focus,
#main .featured .tags a:focus {
  box-shadow: 0 0 0 2px #010a1a, 0 0 0 4px #ff6200; }

#comic, #news {
  margin-top: 24px; }

#comic {
  margin-bottom: 36px; }

.title {
  margin: 24px 24px 20px 24px; }
  .title h3 {
    text-transform: uppercase;
    font-size: 20px;
    line-height: 28px; }
  .title p {
    padding: 8px 0;
    max-width: 560px; }

.paginated .content {
  grid-template-rows: auto auto auto 1fr; }

.content {
  position: relative;
  display: grid;
  grid-template-rows: auto; }
  .content.unpublished {
    border: 2px dashed #ff6200;
    border-radius: 8px;
    padding: 16px 8px;
    background-color: rgba(255, 98, 0, 0.2);
    position: relative; }
    .content.unpublished:before {
      display: block;
      position: absolute;
      content: "";
      top: 0;
      right: 0;
      padding: 4px;
      border-radius: 0 8px 0 4px;
      content: "Unpublished";
      z-index: 5;
      font-size: 14px;
      line-height: 12px;
      font-weight: 600;
      text-transform: uppercase;
      color: #ffffff;
      background: #ff6200; }
  .content .avatar img {
    border-color: #010a1a;
    transition: border-color 250ms ease-out; }
  .content header h1, .content header h1 a, .content header h2, .content header h2 a, .content header h4, .content header h4 a {
    color: #ffffff;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word; }
  .content:after {
    display: block;
    position: absolute;
    content: "";
    background: #00c6f2 linear-gradient(to right, #007cbf 0%, #007cbf 50%, #00c6f2 50%, #00c6f2 85%, #33ebff 85%, #33ebff 100%);
    height: 3px;
    width: 100%;
    bottom: 0;
    grid-area: con-div; }
  .content .avatar {
    grid-area: con-avatar; }
  .content header {
    grid-area: con-header; }
  .content footer {
    grid-area: con-tags; }
  .content .post-body {
    grid-area: con-body; }
  .content .hero-img {
    grid-area: con-img; }
  .content .avatar {
    width: 64px;
    height: 64px; }
    .content .avatar .border {
      position: relative;
      background: #00c6f2 linear-gradient(to top left, #33ebff 20%, #00c6f2 40%, #007cbf 80%);
      border-radius: 300px !important;
      padding: 2px;
      width: 100%; }
    .content .avatar img {
      border-radius: 300px;
      border: 2px solid #010a1a;
      width: 100%;
      height: 100%;
      object-fit: cover; }
    .content .avatar .reply-bubble {
      font-family: proxima-nova, Helvetica, sans-serif;
      border: 2px solid #010a1a;
      border-radius: 48px;
      background: #ff6200;
      color: #ffffff;
      font-size: 14px;
      line-height: 20px;
      font-weight: 700;
      text-align: center;
      text-decoration: none;
      width: 24px;
      height: 24px;
      display: block;
      position: absolute;
      right: -2px;
      top: -2px;
      box-shadow: 0 0 0 0 white; }
      .content .avatar .reply-bubble:hover, .content .avatar .reply-bubble:focus {
        outline: none;
        border-color: #ff6200;
        box-shadow: 0 0 0 2px white; }
  .content header .share-btns {
    grid-area: share-btn; }
  .content header .date {
    grid-area: post-date; }
  .content header h1, .content header h2, .content header h4 {
    grid-area: post-title;
    font-size: 32px;
    line-height: 40px;
    margin-bottom: 12px; }
    .content header h1 a, .content header h2 a, .content header h4 a {
      text-decoration: none; }
  .content .details {
    font-family: proxima-nova, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    margin-bottom: 4px;
    color: #00c6f2; }
    .content .details a {
      color: #00c6f2; }
  .content .tags li {
    font-family: proxima-nova, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 16px;
    list-style: none;
    display: inline-block;
    margin: 0 2px 4px 0; }
    .content .tags li a {
      padding: 3px 6px;
      display: inline-block;
      border-radius: 4px;
      color: #818FA6;
      border: 1px solid #818FA6;
      text-decoration: none; }
      .content .tags li a:hover, .content .tags li a:focus {
        outline: none;
        background: #818FA6;
        color: #010a1a; }
      .content .tags li a:focus {
        box-shadow: 0 0 0 2px #010a1a, 0 0 0 4px #00c6f2; }
  .content .post-body {
    margin-top: 16px; }
  .content .post-text p {
    margin-bottom: 24px; }
  .content .post-text h1, .content .post-text h2, .content .post-text h3, .content .post-text h4, .content .post-text h5, .content .post-text h6 {
    color: #ffffff;
    text-transform: none;
    margin-bottom: 8px; }
  .content .post-text h1 {
    font-size: 32px;
    line-height: 40px; }
  .content .post-text h2 {
    font-size: 28px;
    line-height: 36px; }
  .content .post-text h3 {
    font-size: 24px;
    line-height: 32px; }
  .content .post-text h4 {
    font-size: 20px;
    line-height: 28px; }
  .content .post-text h5 {
    font-size: 18px;
    line-height: 26px; }
  .content .post-text h6 {
    font-size: 16px;
    line-height: 22px; }
  .content .post-text ul, .content .post-text ol {
    padding: 0 0 12px 18px;
    margin: 0 0 0 16px; }
    .content .post-text ul li, .content .post-text ol li {
      margin-bottom: 16px;
      padding-left: 8px; }
  .content .post-text img {
    display: block;
    margin: 0 auto 28px auto;
    width: auto;
    height: auto;
    max-width: 100%;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2); }
  .content .post-text .twitter-tweet,
  .content .post-text .instagram-media {
    margin-bottom: 24px !important;
    max-width: 100% !important;
    min-width: auto !important; }
  .content .post-text iframe {
    max-width: 100% !important;
    width: 100% !important; }
  .content.featured .details, .content.featured .details a {
    color: #ff6200; }
  .content.featured header h1, .content.featured header h2 {
    font-size: 36px;
    line-height: 44px;
    margin-bottom: 4px; }

.hero-img {
  overflow: hidden;
  margin-top: 16px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 0;
  box-shadow: 0 0 0 0 white, 0px 3px 6px rgba(0, 0, 0, 0.5);
  transition: box-shadow 150ms ease-in; }
  .hero-img img {
    width: 100%;
    min-height: auto;
    height: 100%;
    object-fit: cover;
    transition: transform 150ms ease-in; }
  .hero-img:before {
    display: block;
    position: absolute;
    content: "";
    background: #ff6200 linear-gradient(to bottom, #f24900 0%, #f24900 50%, #ff8c00 50%, #ff8c00 85%, #ffcd00 85%, #ffcd00 100%);
    width: 6px;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 6px 0 0 6px;
    z-index: 2;
    border-radius: 0; }
  .hero-img a {
    height: 100%;
    width: 100%; }
    .hero-img a:hover, .hero-img a:focus {
      outline: none;
      z-index: 1; }
      .hero-img a:hover img, .hero-img a:focus img {
        transition: transform 80ms ease-in;
        transform: scale(1.1, 1.1); }

#main.podcasts-page .hero-img:hover, #main.podcasts-page .hero-img:focus,
#main.video-page .hero-img:hover,
#main.video-page .hero-img:focus,
#main.stories-page .hero-img:hover,
#main.stories-page .hero-img:focus,
#main.stories-universe-page .archive .hero-img:hover,
#main.stories-universe-page .archive .hero-img:focus {
  transition: box-shadow 250ms cubic-bezier(0.5, 6, 0.01, -0.8);
  box-shadow: 0 0 0 3px white, 0px 3px 6px rgba(0, 0, 0, 0.5); }

#main.about-page .stories a:hover, #main.about-page .stories a:focus {
  text-decoration: underline; }
  #main.about-page .stories a:hover .hero-img, #main.about-page .stories a:focus .hero-img {
    transition: box-shadow 250ms cubic-bezier(0.5, 6, 0.01, -0.8);
    box-shadow: 0 0 0 3px white, 0px 3px 6px rgba(0, 0, 0, 0.5); }
    #main.about-page .stories a:hover .hero-img img, #main.about-page .stories a:focus .hero-img img {
      transition: transform 80ms ease-in;
      transform: scale(1.1, 1.1); }

.shows {
  display: grid;
  gap: 32px 12px;
  margin: 0 12px;
  grid-template-columns: repeat(auto-fit, minmax(calc(8px * 35), 1fr)); }
  .shows .content {
    margin: 0;
    display: block; }
    .shows .content .hero-img {
      margin: 0 0 24px 0;
      border-radius: 6px; }
      .shows .content .hero-img a {
        height: 100%;
        width: 100%; }
      .shows .content .hero-img img {
        height: 100%; }
    .shows .content header {
      margin: 0 12px; }
      .shows .content header h2, .shows .content header h1 {
        margin-bottom: 8px; }
      .shows .content header .details {
        margin: 0 0 12px 0; }
    .shows .content .post-body {
      padding-bottom: 32px;
      margin: 0 12px; }
    .shows .content .post-text p {
      margin-bottom: 24px; }

.archive {
  display: grid;
  gap: 28px 12px;
  margin: 0 12px;
  grid-template-columns: repeat(auto-fit, minmax(calc(8px * 40), 1fr)); }
  .archive .content {
    gap: 0 20px;
    grid-template-columns: 112px auto;
    grid-template-areas: "con-img con-header" "con-body con-body" "con-div con-div";
    align-items: center;
    padding-bottom: 30px; }
    .archive .content:after {
      bottom: -30px; }
    .archive .content .hero-img {
      margin: 0;
      border-radius: 6px; }
    .archive .content header {
      margin: 0; }
      .archive .content header h4 {
        font-size: 22px;
        line-height: 28px; }
      .archive .content header .orange-btn {
        font-size: 16px;
        line-height: 16px;
        padding: 8px 12px; }
    .archive .content .post-text {
      padding: 0 12px; }
      .archive .content .post-text p {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 0; }

/*------*/
/* Home */
/*------*/
.home-page #news {
  margin-top: 32px; }

/*-------*/
/* Comic */
/*-------*/
#comic .content.featured {
  grid-template-columns: 12px 12px auto 12px 12px;
  grid-template-areas: ". . con-header . ." ". . con-tags . ." ". top-nav top-nav top-nav . " "con-body con-body con-body con-body con-body" ". btm-nav btm-nav btm-nav ."; }
  #comic .content.featured:after {
    display: none; }
  #comic .content.featured header {
    display: grid;
    grid-template-columns: auto 60px;
    grid-template-areas: "post-date share-btn" "post-title post-title"; }
  #comic .content.featured footer {
    overflow-y: hidden; }
  #comic .content.featured .tags {
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    padding: 4px 0 4px 0; }
    #comic .content.featured .tags li {
      flex-shrink: 0;
      margin-right: 8px; }
      #comic .content.featured .tags li:last-child a {
        margin-right: 24px; }
    #comic .content.featured .tags:after {
      display: block;
      position: absolute;
      content: "";
      position: sticky;
      flex-shrink: 0;
      background: linear-gradient(to left, #010a1a 8%, rgba(1, 10, 26, 0) 100%);
      right: 0;
      top: 0;
      width: 24px;
      height: auto; }
  #comic .content.featured .comic-area {
    grid-area: con-body;
    max-width: 100vw; }
  #comic .content.featured .pagination {
    margin: 20px 0;
    display: grid;
    grid-template-columns: 87px auto 92px; }
    #comic .content.featured .pagination .comic-option-btns {
      width: 100%;
      grid-column: 2;
      display: flex;
      justify-content: space-around;
      position: relative; }
    #comic .content.featured .pagination .newer {
      grid-column: 3;
      justify-self: end; }
    #comic .content.featured .pagination .older {
      grid-column: 1;
      justify-self: start !important; }
    #comic .content.featured .pagination .orange-btn {
      padding-left: 14px;
      padding-right: 14px; }
    #comic .content.featured .pagination.top {
      grid-area: top-nav;
      padding-top: 20px;
      border-top: 3px solid #141E2F; }
      #comic .content.featured .pagination.top .buy-print-btn {
        display: none; }
    #comic .content.featured .pagination.btm {
      grid-area: btm-nav;
      padding-bottom: 20px;
      border-bottom: 3px solid #141E2F;
      margin-bottom: 0; }
    #comic .content.featured .pagination .download-menu-wrap, #comic .content.featured .pagination .share-menu-wrap {
      display: none; }

#comic.remix .content.featured .pagination {
  grid-template-columns: 1fr; }
  #comic.remix .content.featured .pagination .comic-option-btns {
    grid-column: 1;
    max-width: 100%;
    width: 100%;
    justify-content: space-between; }

#comic.remix .content.featured .download-menu-wrap, #comic.remix .content.featured .share-menu-wrap {
  display: flex; }

#comic.remix .content.featured .download-menu, #comic.remix .content.featured .share-menu {
  right: -4px;
  top: -4px; }

/*--------------*/
/* Comic Panels */
/*--------------*/
a#comic-panels:hover {
  cursor: pointer; }

#comic-panels {
  max-width: calc((1080px/2)*3);
  margin: 0 auto;
  width: 100%; }
  #comic-panels img {
    margin: 0 auto; }
  #comic-panels.three-panel {
    display: block;
    grid-template-columns: repeat(3, 1fr); }
    #comic-panels.three-panel img {
      width: 100%; }
  #comic-panels.uncut-portrait {
    display: block; }
    #comic-panels.uncut-portrait img {
      max-width: Min(100vw, 100%); }
  #comic-panels.uncut-landscape {
    display: block; }
    #comic-panels.uncut-landscape img {
      width: 100%; }

/*----------------------*/
/* Comic Landscape View */
/*----------------------*/
.landscape #comic-panels.three-panel {
  overflow: hidden;
  overflow-x: auto;
  display: grid; }
  .landscape #comic-panels.three-panel img {
    width: calc(100vw - 20px);
    height: calc((5/4)*(100vw - 20px)); }
  .landscape #comic-panels.three-panel.alt img {
    width: auto; }

.landscape #comic-panels.uncut-landscape {
  display: block;
  overflow: hidden;
  overflow-x: auto; }
  .landscape #comic-panels.uncut-landscape img {
    width: auto;
    max-height: 57vh; }

/*--------------------*/
/* Comic Remix Panels */
/*--------------------*/
#comic.remix #comic-panels.three-panel .panel-lock,
#comic.remix #comic-panels.three-panel img {
  margin: 0 auto;
  display: block;
  width: 100%; }

/*----------------------------*/
/* Comic Remix Landscape View */
/*----------------------------*/
#comic.remix.landscape #comic-panels.three-panel .panel-lock,
#comic.remix.landscape #comic-panels.three-panel img {
  width: calc(100vw - 20px);
  height: calc((5/4)*(100vw - 20px)); }

#comic.remix.landscape #comic-panels.three-panel.alt .panel-lock,
#comic.remix.landscape #comic-panels.three-panel.alt img {
  width: auto; }

/*---------------------------*/
/* Comic Remix Panel Locking */
/*---------------------------*/
#comic.remix .panel-lock {
  margin-top: 30px !important;
  position: relative; }
  #comic.remix .panel-lock:focus {
    outline: none; }
  #comic.remix .panel-lock:before {
    display: block;
    position: absolute;
    content: "";
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
    width: 32px;
    height: 32px;
    background-color: #697586;
    background-image: url("https://assets.penny-arcade.com/img/site/icon-unlock.svg");
    background-repeat: no-repeat;
    background-position: center 5px;
    background-size: 18px;
    top: -20px;
    right: 8px;
    border-radius: 100px;
    border: 2px solid white;
    z-index: 2; }
  #comic.remix .panel-lock.locked:before {
    background-color: #ff6200;
    background-image: url("https://assets.penny-arcade.com/img/site/icon-lock.svg"); }
  #comic.remix .panel-lock:after {
    opacity: 0;
    display: block;
    position: absolute;
    content: "";
    transition: background-size 150ms ease-out, background-color 150ms ease-out, border 150ms ease-out, opacity 150ms ease-out;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 65px;
    top: 0px;
    left: 0px;
    z-index: 1;
    border: 3px dashed transparent; }
    #comic.remix .panel-lock:after.locked {
      border-style: solid; }
  #comic.remix .panel-lock.locked:after {
    border-style: solid; }
  #comic.remix .panel-lock:hover:after, #comic.remix .panel-lock:focus:after {
    transition: background-size 80ms ease-in, background-color 80ms ease-in, border 80ms ease-in, opacity 80ms ease-in;
    background-color: rgba(20, 30, 47, 0.85);
    background-image: url("https://assets.penny-arcade.com/img/site/icon-unlock.svg");
    opacity: 1;
    border: 3px dashed #818FA6; }
  #comic.remix .panel-lock.locked:hover:after, #comic.remix .panel-lock.locked:focus:after {
    background-image: url("https://assets.penny-arcade.com/img/site/icon-lock.svg");
    background-color: rgba(128, 49, 0, 0.85);
    background-size: 80px;
    border: 3px solid #ff6200;
    transition: border 150ms ease-out, background-color 150ms ease-out, background-size 250ms cubic-bezier(0.5, 6, 0.01, -0.8); }
  @media (pointer: coarse) {
    #comic.remix .panel-lock:hover:after, #comic.remix .panel-lock:focus:after {
      transition: border 150ms ease-out, background-color 150ms ease-out, background-size 250ms cubic-bezier(0.5, 6, 0.01, -0.8);
      opacity: 0;
      animation: lock-fade-out 1.5s ease-out 1; }
    @keyframes lock-fade-out {
      0% {
        opacity: 1; }
      80% {
        opacity: 1; }
      99% {
        opacity: 0;
        background-color: rgba(20, 30, 47, 0.85);
        border: 3px dashed #818FA6; }
      100% {
        background-color: rgba(128, 49, 0, 0.85);
        border: 3px solid #ff6200; } }
    #comic.remix .panel-lock.locked:hover:after, #comic.remix .panel-lock.locked:focus:after {
      animation: unlock-fade-out 1.5s ease-out 1; }
    @keyframes unlock-fade-out {
      0% {
        opacity: 1; }
      80% {
        opacity: 1; }
      99% {
        opacity: 0;
        background-color: rgba(128, 49, 0, 0.85);
        border: 3px solid #ff6200; }
      100% {
        background-color: rgba(20, 30, 47, 0.85);
        border: 3px dashed #818FA6; } } }

@media only screen and (max-width: 719px) and (min-aspect-ratio: 4 / 5), only screen and (min-width: 720px) {
  .landscape-btn {
    display: none !important; }
  #comic .content.featured .pagination .download-btn, #comic .content.featured .pagination .share-btn {
    display: flex; }
  #comic .content.featured .pagination .download-menu-wrap, #comic .content.featured .pagination .share-menu-wrap {
    display: flex; }
  #comic .content.featured .pagination.top .buy-print-btn {
    display: flex; }
  #comic.remix #comic-panels.three-panel.alt {
    margin-top: 24px; }
    #comic.remix #comic-panels.three-panel.alt .panel-lock,
    #comic.remix #comic-panels.three-panel.alt img {
      width: auto;
      height: calc((5/4)*(33vw - 20px));
      max-height: calc(min(530px, calc((3/8)*100vw))); }
    #comic.remix #comic-panels.three-panel.alt .comic-panel {
      justify-content: center;
      align-items: center;
      display: flex; }
  #comic.remix .content.featured .pagination .download-btn,
  #comic.remix .content.featured .pagination .share-btn {
    width: auto;
    font-size: 16px;
    padding: 0 20px 0 12px; }
    #comic.remix .content.featured .pagination .download-btn br,
    #comic.remix .content.featured .pagination .share-btn br {
      display: none; }
    #comic.remix .content.featured .pagination .download-btn svg,
    #comic.remix .content.featured .pagination .share-btn svg {
      width: 24px; }
  #comic.remix .content.featured .pagination .download-menu {
    left: 0; }
  #comic.remix .content.featured .pagination .share-menu {
    right: 0; }
  #comic-panels {
    margin-top: 44px; }
    #comic-panels.three-panel {
      display: grid; }
    #comic-panels.three-panel.alt {
      display: flex;
      justify-content: center; }
    #comic-panels.uncut-landscape {
      display: block; }
      #comic-panels.uncut-landscape img {
        width: auto;
        max-width: Min(100vw, 100%) !important; }
  .landscape #comic-panels.three-panel, .landscape #comic-panels.uncut-landscape {
    overflow: auto; }
  .landscape #comic-panels.uncut-landscape img {
    width: auto;
    height: auto;
    max-height: 100%; }
  .landscape #comic-panels.three-panel img,
  .landscape #comic-panels.three-panel.alt img {
    width: 100%;
    height: auto; }
  #comic.remix.landscape #comic-panels.three-panel.alt {
    overflow: visible; }
    #comic.remix.landscape #comic-panels.three-panel.alt .panel-lock,
    #comic.remix.landscape #comic-panels.three-panel.alt img {
      width: auto;
      height: calc((5/4)*(33vw - 20px));
      max-height: calc(min(530px, calc((3/8)*100vw))); } }

/*------*/
/* News */
/*------*/
#news {
  display: grid;
  align-content: start;
  gap: 28px 0; }
  #news.paginated {
    gap: 0; }
    #news.paginated > .ad {
      display: none; }
    #news.paginated .posts {
      padding-top: 32px; }
  #news .posts {
    gap: 32px 16px;
    display: grid;
    grid-column: 1 / -1; }
    #news .posts .featured {
      grid-column: 1 / -1 !important; }
  #news .content {
    grid-template-columns: 12px 12px 64px auto 12px 12px;
    grid-template-areas: ". . con-header con-header . ." ". con-avatar con-avatar con-tags . ." "con-img con-img con-img con-img con-img con-img" ". . con-body con-body . ." ". con-div con-div con-div con-div ."; }
    #news .content.featured header {
      display: grid;
      grid-template-columns: auto 60px;
      grid-template-areas: "post-date share-btn" "post-title post-title"; }
    #news .content .hero-img img {
      padding-left: 6px; }

/*------------*/
/* Blank Page */
/*------------*/
#blank {
  margin: 24px; }
  #blank .content {
    display: block; }
    #blank .content:after {
      display: none; }

/*----------*/
/* 404 Page */
/*----------*/
.error-page {
  display: block !important; }
  .error-page #blank {
    margin: -10px 0 0 0;
    padding-bottom: 60px;
    background: linear-gradient(to bottom, #33142a 0%, #c42fb0 41%, #843590 91%, transparent 100%); }
  .error-page .error {
    background: url("https://assets.penny-arcade.com/img/site/img-404.png") top center no-repeat;
    background-size: 349px;
    margin: 0 auto;
    width: 348px;
    height: 450px;
    padding-top: 1px; }
    .error-page .error h1 {
      color: #b92fa8 !important;
      text-align: center;
      font-size: 24px !important;
      line-height: 22px !important;
      margin: 250px 0 0 80px;
      width: 50px; }

/*-------*/
/* Login */
/*-------*/
.site-login {
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 24px;
  max-width: 528px; }
  .site-login .content {
    display: grid !important;
    grid-template-columns: 108px 1fr;
    justify-items: start;
    align-items: center;
    gap: 32px 16px; }
    .site-login .content header {
      grid-column: 2;
      grid-row: 1; }
      .site-login .content header h1 {
        margin-bottom: 0; }
      .site-login .content header .details {
        color: #ff6200; }
  .site-login .avatar {
    grid-column: 1 / 1;
    grid-row: 1;
    width: 108px;
    height: auto; }
    .site-login .avatar .border {
      padding: 4px;
      background: #ff6200 linear-gradient(to top left, #ffbd2b 0%, #ff8c00 25%, #ff6200 65%, #f24900 100%); }
    .site-login .avatar img {
      border-width: 4px; }
  .site-login form {
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.8);
    grid-column: 1 / -1;
    grid-row: 2;
    display: block;
    width: 100%;
    max-width: 480px;
    padding: 20px 24px 28px 28px;
    background: #141E2F;
    border-radius: 8px;
    position: relative; }
    .site-login form:after {
      display: block;
      position: absolute;
      content: "";
      display: block;
      position: absolute;
      content: "";
      background: #ff6200 linear-gradient(to bottom, #f24900 0%, #f24900 50%, #ff8c00 50%, #ff8c00 85%, #ffcd00 85%, #ffcd00 100%);
      width: 6px;
      height: 100%;
      top: 0;
      left: 0;
      border-radius: 6px 0 0 6px;
      z-index: 2; }
    .site-login form .form-group {
      margin-bottom: 16px; }
      .site-login form .form-group .help-block {
        font-size: 16px; }
      .site-login form .form-group .help-block-error {
        color: #ff704d; }
      .site-login form .form-group label {
        display: block;
        font-weight: 700;
        margin-bottom: 4px; }
      .site-login form .form-group.remember {
        margin: 32px 0 0 0;
        display: flex;
        align-items: center;
        gap: 0 16px;
        justify-content: space-between; }
        .site-login form .form-group.remember .form-group {
          margin: 0; }
        .site-login form .form-group.remember label {
          font-weight: normal; }
        .site-login form .form-group.remember > div {
          gap: 0 8px;
          display: flex;
          align-content: center; }
          .site-login form .form-group.remember > div > * {
            width: auto; }

/*------------------------------*/
/* News Post & Latest Post Lead */
/*------------------------------*/
.news-post-page #news .featured:after {
  display: none; }

.news-post-page .hero-img {
  margin-bottom: 8px;
  max-height: 100% !important; }

#news .featured,
#comic .featured {
  grid-template-columns: 12px 12px 80px auto 12px 12px; }
  #news .featured:after,
  #comic .featured:after {
    background: #ff6200 linear-gradient(to right, #f24900 0%, #f24900 50%, #ff8c00 50%, #ff8c00 85%, #ffcd00 85%, #ffcd00 100%); }
  #news .featured footer,
  #comic .featured footer {
    align-self: center; }
  #news .featured .avatar,
  #comic .featured .avatar {
    width: 80px;
    height: 80px; }
    #news .featured .avatar .border,
    #comic .featured .avatar .border {
      background: #ff6200 linear-gradient(to top left, #ffbd2b 0%, #ff8c00 25%, #ff6200 65%, #f24900 100%);
      padding: 3px; }
    #news .featured .avatar img,
    #comic .featured .avatar img {
      border: 3px solid #010a1a; }
    #news .featured .avatar .reply-bubble,
    #comic .featured .avatar .reply-bubble {
      border-width: 3px;
      font-size: 16px;
      line-height: 22px;
      width: 28px;
      height: 28px;
      right: -3px;
      top: -3px;
      box-shadow: 0 0 0 0 white; }
      #news .featured .avatar .reply-bubble:hover, #news .featured .avatar .reply-bubble:focus,
      #comic .featured .avatar .reply-bubble:hover,
      #comic .featured .avatar .reply-bubble:focus {
        box-shadow: 0 0 0 3px white; }

.comic-page #news .featured:after, .stories-comic-page #news .featured:after {
  display: none; }

.news-post-page .post-body aside, #about .work aside {
  margin-left: -12px;
  width: calc(100% + 24px); }

.news-post-page .post-body .related-comic, #about .work .related-comic {
  grid-template-columns: 1fr 1fr;
  border-radius: 6px;
  gap: 16px 24px;
  background: #141E2F;
  box-shadow: 0 0 0 0 #ffffff, 0px 3px 6px rgba(0, 0, 0, 0.5);
  transition: box-shadow 150ms ease-in; }
  .news-post-page .post-body .related-comic .img, #about .work .related-comic .img {
    height: auto; }
  .news-post-page .post-body .related-comic svg, #about .work .related-comic svg {
    stroke: #818FA6; }
  .news-post-page .post-body .related-comic p, #about .work .related-comic p {
    max-width: 160px;
    margin: 0 16px 0 0;
    padding: 16px 0; }
  .news-post-page .post-body .related-comic:hover, .news-post-page .post-body .related-comic:focus, #about .work .related-comic:hover, #about .work .related-comic:focus {
    transition: box-shadow 250ms cubic-bezier(0.5, 6, 0.01, -0.8);
    box-shadow: 0 0 0 3px #ffffff, 0px 3px 6px rgba(0, 0, 0, 0.5); }
    .news-post-page .post-body .related-comic:hover .img, .news-post-page .post-body .related-comic:focus .img, #about .work .related-comic:hover .img, #about .work .related-comic:focus .img {
      box-shadow: 0 0 0 0 white, 0px 3px 6px rgba(0, 0, 0, 0.5); }

.related-comic {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px 12px;
  text-decoration: none;
  text-align: left;
  align-items: center;
  margin-bottom: 24px; }
  .related-comic:hover p, .related-comic:focus p {
    transition: all 80ms ease-in;
    color: #ffffff !important; }
    .related-comic:hover p svg, .related-comic:focus p svg {
      stroke: white !important;
      transition: all 80ms ease-in; }
  .related-comic:link, .related-comic:visited {
    color: #818FA6; }
  .related-comic:hover, .related-comic:focus {
    outline: none; }
    .related-comic:hover .img, .related-comic:focus .img {
      transition: box-shadow 250ms cubic-bezier(0.5, 6, 0.01, -0.8);
      box-shadow: 0 0 0 3px white, 0px 3px 6px rgba(0, 0, 0, 0.5); }
      .related-comic:hover .img img, .related-comic:focus .img img {
        transition: transform 80ms ease-in;
        transform: scale(1.1, 1.1); }
  .related-comic h4 {
    margin-top: 8px; }
  .related-comic p {
    font-family: proxima-nova, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    margin-bottom: 4px;
    color: #00c6f2;
    transition: all 150ms ease-out;
    color: #818FA6; }
    .related-comic p a {
      color: #00c6f2; }
    .related-comic p svg {
      transition: all 150ms ease-out;
      display: inline-block; }
  .related-comic .img {
    z-index: 0;
    transition: 150ms ease-in;
    position: relative;
    box-shadow: 0 0 0 0 white, 0px 3px 6px rgba(0, 0, 0, 0.5);
    border-radius: 6px;
    object-fit: cover;
    overflow: hidden;
    padding-left: 6px;
    width: 100%;
    height: calc((5/12)*(100vw/1)); }
    .related-comic .img:before {
      display: block;
      position: absolute;
      content: "";
      background: #ff6200 linear-gradient(to bottom, #f24900 0%, #f24900 50%, #ff8c00 50%, #ff8c00 85%, #ffcd00 85%, #ffcd00 100%);
      width: 6px;
      height: 100%;
      top: 0;
      left: 0;
      border-radius: 6px 0 0 6px;
      z-index: 2; }
    .related-comic .img img {
      transition: transform 150ms ease-in;
      background-color: white;
      object-fit: cover;
      width: 100%;
      height: 100%; }
  .related-comic .txt {
    margin: 0 12px; }

/*----------------------*/
/* Gabe & Tycho Replies */
/*----------------------*/
.replies {
  margin: 0 12px 16px 12px; }
  .replies .reply-form {
    margin: 0 0 16px 0 !important; }
  .replies.reply-form form {
    display: flex;
    justify-content: space-between;
    gap: 0 8px; }
    .replies.reply-form form .reply-btn {
      color: #010a1a !important;
      background-color: #aede31;
      border-color: #aede31; }
      .replies.reply-form form .reply-btn:hover, .replies.reply-form form .reply-btn:focus {
        background: transparent !important;
        color: #aede31 !important; }
  .replies section {
    display: grid;
    gap: 20px;
    margin-bottom: 12px; }
    .replies section > p {
      width: 44px;
      grid-area: avatar;
      background-repeat: no-repeat;
      background-size: 44px;
      padding-top: 44px;
      text-align: center;
      font-size: 16px;
      line-height: 32px;
      font-weight: 500; }
    .replies section.gabe > p {
      background-image: url("https://assets.penny-arcade.com/img/site/avatar-gabe.svg");
      color: #ffcd00; }
    .replies section.tycho > p {
      background-image: url("https://assets.penny-arcade.com/img/site/avatar-tycho.svg");
      color: #00c6f2; }
    .replies section div {
      grid-area: reply; }
      .replies section div p {
        background: #141E2F;
        border-radius: 12px;
        padding: 12px;
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 8px; }
        .replies section div p:first-child {
          position: relative; }
    .replies section.author-reply {
      grid: "avatar reply" / 44px auto; }
      .replies section.author-reply div p:first-child:after {
        border-radius: 0 0 0 2px;
        left: -8px;
        display: block;
        position: absolute;
        content: "";
        transform: rotate(45deg);
        width: 16px;
        height: 16px;
        top: 16px;
        z-index: -1;
        background: #141E2F; }
    .replies section.reply {
      grid: "reply avatar" / auto 44px; }
      .replies section.reply div p:first-child:after {
        border-radius: 0 2px 0 0;
        right: -8px;
        display: block;
        position: absolute;
        content: "";
        transform: rotate(45deg);
        width: 16px;
        height: 16px;
        top: 16px;
        z-index: -1;
        background: #141E2F; }

/*------------------------*/
/* Pagination ------------*/
/*------------------------*/
.pagination {
  font-family: proxima-nova, Helvetica, sans-serif;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  justify-items: center;
  gap: 24px 0;
  margin: 36px 12px 0 12px; }
  .pagination.top {
    gap: 0; }
    .pagination.top .pages {
      display: none; }
  .pagination .orange-btn {
    grid-row: 1;
    justify-self: end;
    align-self: start; }
    .pagination .orange-btn:first-child {
      justify-self: start; }
  .pagination .older,
  .pagination .next {
    grid-column: 2;
    justify-self: end !important; }
  .pagination .newer,
  .pagination .prev {
    grid-column: 1;
    justify-self: start; }
  .pagination .pages {
    grid-column: 1 / -1;
    grid-row: 2;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center; }
    .pagination .pages li {
      margin-bottom: 8px;
      padding: 0 4px; }
      .pagination .pages li.current-page a {
        background-color: #697586;
        color: #ffffff; }
      .pagination .pages li a {
        background-color: #e8eaed;
        color: #697586; }
        .pagination .pages li a:hover, .pagination .pages li a:focus {
          color: white;
          background: #f24900; }
      .pagination .pages li.ellip {
        color: #697586; }
      .pagination .pages li:first-child {
        padding-left: 8px; }
      .pagination .pages li:last-child {
        padding-right: 8px; }
      .pagination .pages li.current-page a {
        background-color: #818FA6;
        color: #010a1a; }
      .pagination .pages li a, .pagination .pages li.ellip {
        display: block;
        border-radius: 48px;
        padding: 10px 8px 0 8px;
        text-align: center;
        min-width: 40px;
        height: 40px;
        font-size: 18px;
        line-height: 20px;
        font-weight: 800;
        color: #ffffff;
        background-color: #141E2F;
        text-decoration: none; }
      .pagination .pages li.ellip {
        padding: 6px 8px 0 8px;
        background: none; }
      .pagination .pages li a:hover, .pagination .pages li a:focus {
        outline: none;
        color: white;
        background-color: #ff6200; }

/*---------------*/
/* News Post Nav */
/*---------------*/
.post-nav {
  font-family: proxima-nova, Helvetica, sans-serif;
  display: grid;
  grid-template-columns: 1fr 1fr;
  list-style: none;
  gap: 16px;
  margin: 24px 0; }
  .post-nav li a {
    background: #141E2F;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    box-shadow: 0 0 0 0 #ffffff, 0px 3px 6px rgba(0, 0, 0, 0.5);
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    height: 100%;
    text-decoration: none; }
    .post-nav li a .arrow {
      grid-row: 1; }
    .post-nav li a h4 {
      grid-row: 2;
      align-self: end; }
    .post-nav li a .author {
      grid-row: 3; }
    .post-nav li a:hover, .post-nav li a:focus {
      outline: none;
      transition: box-shadow 250ms cubic-bezier(0.5, 6, 0.01, -0.8);
      box-shadow: 0 0 0 3px #ffffff, 0px 3px 6px rgba(0, 0, 0, 0.5); }
    .post-nav li a .arrow {
      background: #ff6200 linear-gradient(150deg, #ffbd2b 0%, #ff8c00 25%, #ff6200 65%, #f24900 100%);
      font-size: 16px;
      line-height: 20px;
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
      font-weight: 800;
      color: #ffffff;
      display: grid;
      gap: 0 12px;
      grid-template-columns: 17px 1fr;
      align-items: center;
      padding: 0 16px;
      height: 28px;
      text-transform: uppercase;
      text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4), 0px 1px 0px rgba(0, 0, 0, 0.3); }
      .post-nav li a .arrow svg {
        display: block;
        stroke: white;
        width: 17px;
        height: auto; }
      .post-nav li a .arrow span {
        display: block; }
    .post-nav li a h4 {
      font-size: 18px;
      line-height: 24px;
      color: #ffffff;
      padding: 16px 16px 4px 16px; }
    .post-nav li a .author {
      color: #818FA6;
      font-weight: 500;
      font-size: 16px;
      line-height: 20px;
      padding: 0 16px 16px 16px; }
  .post-nav li {
    width: 100%; }
  .post-nav .prev {
    grid-column: 1;
    justify-self: start; }
    .post-nav .prev a {
      border-radius: 0 6px 6px 0; }
      .post-nav .prev a .arrow {
        border-top-right-radius: 6px; }
        .post-nav .prev a .arrow svg {
          transform: rotate(180deg); }
  .post-nav .next {
    grid-column: 2;
    justify-self: end; }
    .post-nav .next a {
      text-align: right;
      border-radius: 6px 0 0 6px; }
      .post-nav .next a .arrow {
        grid-template-columns: 1fr 17px;
        border-top-left-radius: 6px; }

/*---------------*/
/* Related Posts */
/*---------------*/
.related-posts {
  padding: 8px 12px 0 12px; }
  .related-posts .ad {
    margin: 0 0 32px 0; }
  .related-posts .title {
    margin-left: 12px; }
  .related-posts > ul {
    gap: 28px 12px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc(8px * 36), 1fr)); }
  .related-posts > ul > li {
    display: grid;
    grid-template-columns: 64px auto;
    gap: 12px;
    list-style: none;
    padding-bottom: 24px;
    border-bottom: 3px solid #141E2F; }
    .related-posts > ul > li:last-child {
      border: none; }
    .related-posts > ul > li h4 {
      font-size: 22px;
      line-height: 28px; }
      .related-posts > ul > li h4 a {
        text-decoration: none;
        color: #ffffff; }
  .related-posts .author {
    font-family: proxima-nova, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    margin-bottom: 4px;
    color: #00c6f2;
    font-size: 16px;
    line-height: 20px; }
    .related-posts .author a {
      color: #00c6f2; }
  .related-posts .avatar {
    width: 64px;
    height: 64px; }
    .related-posts .avatar .border {
      position: relative;
      background: #00c6f2 linear-gradient(to top left, #33ebff 20%, #00c6f2 40%, #007cbf 80%);
      border-radius: 300px !important;
      padding: 2px;
      width: 100%; }
    .related-posts .avatar img {
      border-radius: 300px;
      border: 2px solid #010a1a;
      width: 100%;
      height: 100%;
      object-fit: cover; }
    .related-posts .avatar .reply-bubble {
      font-family: proxima-nova, Helvetica, sans-serif;
      border: 2px solid #010a1a;
      border-radius: 48px;
      background: #ff6200;
      color: #ffffff;
      font-size: 14px;
      line-height: 20px;
      font-weight: 700;
      text-align: center;
      text-decoration: none;
      width: 24px;
      height: 24px;
      display: block;
      position: absolute;
      right: -2px;
      top: -2px;
      box-shadow: 0 0 0 0 white; }
      .related-posts .avatar .reply-bubble:hover, .related-posts .avatar .reply-bubble:focus {
        outline: none;
        border-color: #ff6200;
        box-shadow: 0 0 0 2px white; }
  .related-posts .tags {
    font-size: 18px;
    line-height: 20px; }
    .related-posts .tags li {
      font-family: proxima-nova, Helvetica, sans-serif;
      font-size: 16px;
      line-height: 16px;
      list-style: none;
      display: inline-block;
      margin: 0 2px 4px 0;
      font-size: 12px; }
      .related-posts .tags li a {
        padding: 3px 6px;
        display: inline-block;
        border-radius: 4px;
        color: #818FA6;
        border: 1px solid #818FA6;
        text-decoration: none; }
        .related-posts .tags li a:hover, .related-posts .tags li a:focus {
          outline: none;
          background: #818FA6;
          color: #010a1a; }
        .related-posts .tags li a:focus {
          box-shadow: 0 0 0 2px #010a1a, 0 0 0 4px #00c6f2; }
      .related-posts .tags li a {
        padding: 1px 4px; }

/*-------*/
/* Video */
/*-------*/
#video .featured:after {
  display: none; }

#video .archive .content {
  grid-template-columns: 144px 1fr; }
  #video .archive .content .hero-img {
    height: 108px; }
    #video .archive .content .hero-img img {
      min-height: 108px; }

/*----------*/
/* Podcasts */
/*----------*/
#podcasts .featured:after {
  background: #ff6200 linear-gradient(to right, #f24900 0%, #f24900 50%, #ff8c00 50%, #ff8c00 85%, #ffcd00 85%, #ffcd00 100%); }

#podcasts .featured, #podcast-episode .featured, #stories .featured, #video .featured {
  grid-template-columns: 12px 12px auto 12px 12px;
  grid-template-areas: ". . con-header . ." "con-img con-img con-img con-img con-img" ". . con-body . ." ". con-div con-div con-div ."; }
  #podcasts .featured:after, #podcast-episode .featured:after, #stories .featured:after, #video .featured:after {
    background: #ff6200 linear-gradient(to right, #f24900 0%, #f24900 50%, #ff8c00 50%, #ff8c00 85%, #ffcd00 85%, #ffcd00 100%); }
  #podcasts .featured .schedule, #podcast-episode .featured .schedule, #stories .featured .schedule, #video .featured .schedule {
    margin-bottom: 8px;
    display: flex; }
    #podcasts .featured .schedule svg, #podcast-episode .featured .schedule svg, #stories .featured .schedule svg, #video .featured .schedule svg {
      fill: #ff6200;
      width: 16px;
      flex-shrink: 0;
      margin: 2px 8px 0 0; }

.seasons, .archive-features .browse-by-year {
  font-family: proxima-nova, Helvetica, sans-serif;
  margin: 8px 12px 24px 12px;
  padding-bottom: 24px;
  border-bottom: 3px solid #141E2F; }
  .seasons header, .archive-features .browse-by-year header {
    margin: 0 12px 16px 12px; }
  .seasons ul, .archive-features .browse-by-year ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 8px; }
  .seasons a, .archive-features .browse-by-year a {
    display: block;
    background: #141E2F;
    border-radius: 48px;
    padding: 10px 16px 0 16px;
    text-align: center;
    text-decoration: none;
    height: 48px;
    min-width: 48px;
    font-size: 22px;
    line-height: 28px;
    font-weight: 800;
    color: #ffffff; }
    .seasons a.selected, .archive-features .browse-by-year a.selected {
      background: #818FA6;
      color: #010a1a; }
    .seasons a:hover, .archive-features .browse-by-year a:hover, .seasons a:focus, .archive-features .browse-by-year a:focus {
      outline: none;
      background-color: #ff6200;
      color: white; }

/*-----------------*/
/* Podcasts - Show */
/*-----------------*/
#podcasts .shows .hero-img {
  max-height: 420px; }

#podcasts .featured .hero-img {
  max-height: 360px; }

#podcasts .episodes {
  display: grid;
  gap: 32px 12px;
  margin: 0 12px 32px 12px;
  grid-template-columns: repeat(auto-fit, minmax(calc(8px * 41), 1fr)); }
  #podcasts .episodes .ad {
    grid-column: 1 / -1; }
  #podcasts .episodes .content {
    display: block;
    margin: 0; }
    #podcasts .episodes .content > * {
      margin: 0 12px; }
    #podcasts .episodes .content h4 {
      font-size: 22px;
      line-height: 28px;
      margin-bottom: 8px; }
    #podcasts .episodes .content .author {
      margin-bottom: 24px; }
    #podcasts .episodes .content .post-body {
      margin-bottom: 40px; }

.player {
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.5);
  background: #141E2F;
  border-radius: 104px;
  padding: 8px 8px 0 8px; }
  .player audio {
    width: 100%;
    border-radius: 104px; }

.podcasts-episode-page .player {
  margin: 8px 0 24px 0; }

/*--------------------*/
/* Podcasts - Episode */
/*--------------------*/
#podcast-episode .featured:after {
  background: #141E2F; }

#podcast-episode .content header {
  display: grid;
  grid-template-columns: auto 60px;
  grid-template-areas: "post-date share-btn" "post-title post-title"; }

/*---------*/
/* Stories */
/*---------*/
#stories .shows .hero-img {
  height: calc((13/20)*(100vw/1));
  max-height: 320px; }

#stories .featured .hero-img {
  height: calc((13/20)*(100vw/1));
  max-height: 360px; }

#stories .archive {
  grid-template-columns: repeat(auto-fit, minmax(calc(8px * 41), 1fr)); }
  #stories .archive .ad {
    grid-column: 1 / -1; }
  #stories .archive .content {
    grid-template-columns: 144px 1fr; }
    #stories .archive .content h4 {
      margin-bottom: 2px; }
    #stories .archive .content .hero-img {
      height: 108px; }
      #stories .archive .content .hero-img img {
        min-height: 108px; }

/*-------*/
/* About */
/*-------*/
#about {
  margin-top: 24px;
  display: grid;
  gap: 32px 16px;
  grid-template-columns: repeat(auto-fit, minmax(328px, 1fr)); }
  #about article {
    margin: 0 12px;
    padding-bottom: 32px; }
    #about article h1, #about article h2 {
      font-size: 36px;
      line-height: 44px;
      color: #ffffff;
      text-align: center;
      margin: 0 12px 16px 12px; }
    #about article h2 {
      font-size: 32px;
      line-height: 40px; }
  #about .boys {
    display: grid;
    gap: 48px 24px;
    grid-template-columns: repeat(auto-fit, minmax(312px, 1fr));
    grid-column: 1 / -1; }
  #about .bio, #about .about {
    border-bottom: 3px solid #141E2F; }
    #about .bio p, #about .bio ul, #about .about p, #about .about ul {
      margin-right: 12px;
      margin-left: 12px; }
    #about .bio .logo-penny-arcade, #about .about .logo-penny-arcade {
      margin: 40px auto 0 auto;
      width: 100%;
      height: 96px;
      fill: #003e80; }
    #about .bio .avatar, #about .about .avatar {
      width: 64px;
      height: 64px;
      width: 164px;
      height: 164px;
      margin: 0 auto 32px auto; }
      #about .bio .avatar .border, #about .about .avatar .border {
        position: relative;
        background: #00c6f2 linear-gradient(to top left, #33ebff 20%, #00c6f2 40%, #007cbf 80%);
        border-radius: 300px !important;
        padding: 2px;
        width: 100%; }
      #about .bio .avatar img, #about .about .avatar img {
        border-radius: 300px;
        border: 2px solid #010a1a;
        width: 100%;
        height: 100%;
        object-fit: cover; }
      #about .bio .avatar .reply-bubble, #about .about .avatar .reply-bubble {
        font-family: proxima-nova, Helvetica, sans-serif;
        border: 2px solid #010a1a;
        border-radius: 48px;
        background: #ff6200;
        color: #ffffff;
        font-size: 14px;
        line-height: 20px;
        font-weight: 700;
        text-align: center;
        text-decoration: none;
        width: 24px;
        height: 24px;
        display: block;
        position: absolute;
        right: -2px;
        top: -2px;
        box-shadow: 0 0 0 0 white; }
        #about .bio .avatar .reply-bubble:hover, #about .bio .avatar .reply-bubble:focus, #about .about .avatar .reply-bubble:hover, #about .about .avatar .reply-bubble:focus {
          outline: none;
          border-color: #ff6200;
          box-shadow: 0 0 0 2px white; }
      #about .bio .avatar .border, #about .about .avatar .border {
        background: #ff6200 linear-gradient(to top left, #ffbd2b 0%, #ff8c00 25%, #ff6200 65%, #f24900 100%);
        padding: 4px; }
      #about .bio .avatar img, #about .about .avatar img {
        border: 4px solid #010a1a;
        width: 100%;
        height: 100%; }
  #about .about {
    grid-column: 1 / -1;
    border: 0;
    position: relative; }
    #about .about:after {
      display: block;
      position: absolute;
      content: "";
      background: #ff6200 linear-gradient(to right, #f24900 0%, #f24900 50%, #ff8c00 50%, #ff8c00 85%, #ffcd00 85%, #ffcd00 100%);
      width: 100%;
      height: 3px;
      bottom: 0;
      left: 0; }
    #about .about a {
      color: #ff6200;
      border-radius: 4px; }
      #about .about a:hover, #about .about a:focus {
        outline: none;
        color: white;
        text-decoration: none;
        box-shadow: 0 0 0 2px #010a1a, 0 0 0 4px #ff6200; }
  #about .contact {
    grid-column: 1 / -1;
    border: none;
    padding: 0;
    text-align: center; }
    #about .contact p {
      max-width: 480px;
      margin: 0 auto;
      padding: 0 12px; }
    #about .contact ul {
      display: flex;
      justify-content: center; }
      #about .contact ul li {
        margin: 0 4px 8px 4px; }
  #about .work {
    padding-bottom: 0;
    grid-column: 1 / -1;
    margin: 0; }
    #about .work .related-comic {
      margin: 0 12px 32px 12px; }
    #about .work #highlight-reel {
      margin-bottom: 0; }
  #about .stories {
    grid-column: 1 / -1;
    border-bottom: 3px solid #141E2F;
    margin-top: 0; }
    #about .stories ul {
      list-style: none;
      display: grid;
      gap: 24px 16px;
      grid-template-columns: 1fr 1fr;
      width: 100%; }
      #about .stories ul li a {
        text-decoration: none;
        color: #ffffff;
        outline: none; }
      #about .stories ul li h4 {
        font-size: 20px;
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
        text-align: center;
        margin-top: 16px; }
      #about .stories ul li .hero-img {
        border-radius: 6px;
        margin-top: 0; }
        #about .stories ul li .hero-img img {
          width: 100%; }

/*-------------*/
/* Comic Remix */
/*-------------*/
#comic.remix .reroll {
  text-align: center;
  margin: 24px 12px 20px 12px; }
  #comic.remix .reroll p {
    margin: 16px 12px 32px 12px; }
    #comic.remix .reroll p a {
      color: #ff6200;
      border-radius: 4px; }
      #comic.remix .reroll p a:hover, #comic.remix .reroll p a:focus {
        outline: none;
        color: white;
        text-decoration: none;
        box-shadow: 0 0 0 2px #010a1a, 0 0 0 4px #ff6200; }
  #comic.remix .reroll .details {
    color: #ff6200;
    margin: 0 0 4px 0 !important; }
  #comic.remix .reroll .info {
    display: inline-block;
    position: relative;
    padding-left: 26px;
    margin-bottom: 0;
    margin-left: 8px;
    color: #818FA6;
    font-weight: 600;
    text-align: left;
    font-size: 18px;
    line-height: 22px; }
    #comic.remix .reroll .info:before {
      display: block;
      position: absolute;
      content: "";
      text-align: center;
      width: 20px;
      height: 18px;
      left: 0;
      top: 1px;
      padding: 2px 0 0 0;
      border-radius: 60px;
      font-family: "courier", monospace;
      font-weight: bold;
      color: #010a1a;
      font-size: 16px;
      line-height: 16px;
      content: "i";
      background: #818FA6; }

#comic.remix h1 {
  font-size: 36px;
  line-height: 44px;
  color: #ffffff; }

#comic.remix .details {
  font-family: proxima-nova, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  margin-bottom: 4px;
  color: #00c6f2; }
  #comic.remix .details a {
    color: #00c6f2; }

#comic.remix div.timestamp {
  grid-area: btm-nav;
  text-align: center; }
  #comic.remix div.timestamp p {
    border-bottom: 3px solid #141E2F;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: #818FA6;
    padding: 16px 0; }
  #comic.remix div.timestamp .orange-btn {
    margin-top: 24px; }

#comic.remix p.timestamp {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  color: #818FA6; }

#comic.remix .share-btn {
  margin-right: 8px; }

#comic.remix .pagination.top p.timestamp, #comic.remix .pagination.top .orange-btn {
  display: none; }

#comic.remix .pagination.btm, #comic.remix .ad {
  display: none; }

#comic.remix .title {
  margin-top: 48px; }

#comic.remix .sources {
  margin: 24px 12px 0 12px;
  display: grid;
  gap: 24px 0;
  grid-template-columns: repeat(1, 1fr);
  list-style: none; }
  #comic.remix .sources li {
    border-bottom: 3px solid #141E2F;
    padding: 0 0 24px 0; }
    #comic.remix .sources li:last-child {
      border-width: 0; }
    #comic.remix .sources li > * {
      margin: 0 12px; }
    #comic.remix .sources li .details {
      color: #00c6f2;
      margin-bottom: 4px; }
      #comic.remix .sources li .details:first-child {
        color: #818FA6; }
    #comic.remix .sources li h2 {
      font-size: 22px;
      line-height: 28px;
      margin-bottom: 8px; }
      #comic.remix .sources li h2 a {
        text-decoration: none;
        color: white; }
        #comic.remix .sources li h2 a:hover {
          text-decoration: underline; }

/*------------------------*/
/* Archive ---------------*/
/*------------------------*/
.archive-features {
  margin-top: 12px;
  display: grid;
  gap: 32px 0;
  grid-template-columns: 12px auto 12px; }
  .archive-features > div {
    grid-column: 2;
    border-bottom: 3px solid #141E2F;
    padding-bottom: 32px; }
  .archive-features .browse-by-year {
    margin: 0; }
    .archive-features .browse-by-year ul {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); }
    .archive-features .browse-by-year a {
      padding: 10px 0 0 0; }
    .archive-features .browse-by-year ~ .ad {
      border: none;
      padding-bottom: 0; }
  .archive-features .browse-by-year header,
  .archive-features .title {
    margin: 0 12px 20px 12px; }
  .archive-features .recent-topics ul {
    margin: 0 12px; }
  .archive-features .recent-topics li {
    font-family: proxima-nova, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 16px;
    list-style: none;
    display: inline-block;
    margin: 0 2px 4px 0; }
    .archive-features .recent-topics li a {
      padding: 3px 6px;
      display: inline-block;
      border-radius: 4px;
      color: #818FA6;
      border: 1px solid #818FA6;
      text-decoration: none; }
      .archive-features .recent-topics li a:hover, .archive-features .recent-topics li a:focus {
        outline: none;
        background: #818FA6;
        color: #010a1a; }
      .archive-features .recent-topics li a:focus {
        box-shadow: 0 0 0 2px #010a1a, 0 0 0 4px #00c6f2; }
  .archive-features .random-comic .orange-btn {
    margin: 0 0 0 12px; }
  .archive-features .nostalgia .related-comic,
  .archive-features .first-comic .related-comic {
    margin: 0;
    background: none;
    border-radius: 0;
    box-shadow: none; }
    .archive-features .nostalgia .related-comic:before,
    .archive-features .first-comic .related-comic:before {
      display: none; }
    .archive-features .nostalgia .related-comic .img,
    .archive-features .first-comic .related-comic .img {
      position: relative;
      padding-left: 6px; }
      .archive-features .nostalgia .related-comic .img:before,
      .archive-features .first-comic .related-comic .img:before {
        display: block;
        position: absolute;
        content: "";
        background: #ff6200 linear-gradient(to bottom, #f24900 0%, #f24900 50%, #ff8c00 50%, #ff8c00 85%, #ffcd00 85%, #ffcd00 100%);
        width: 6px;
        height: 100%;
        top: 0;
        left: 0;
        border-radius: 6px 0 0 6px;
        z-index: 2; }
    .archive-features .nostalgia .related-comic .txt h4,
    .archive-features .first-comic .related-comic .txt h4 {
      font-size: 24px;
      line-height: 32px; }

#archive .topics {
  font-family: proxima-nova, Helvetica, sans-serif; }
  #archive .topics ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 12px; }
    #archive .topics ul li {
      list-style: none;
      flex: 1;
      padding: 0 4px 24px 4px; }
      #archive .topics ul li a {
        display: block;
        text-align: center;
        color: #ffffff;
        text-decoration: none;
        font-weight: 600;
        line-height: 24px; }
        #archive .topics ul li a:hover, #archive .topics ul li a:focus {
          outline: none;
          text-decoration: underline; }
          #archive .topics ul li a:hover .avatar, #archive .topics ul li a:focus .avatar {
            box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.5); }
            #archive .topics ul li a:hover .avatar .border, #archive .topics ul li a:focus .avatar .border {
              box-shadow: 0 0 0 5px #ffffff;
              background: #010a1a; }
            #archive .topics ul li a:hover .avatar img, #archive .topics ul li a:focus .avatar img {
              transition: transform 80ms ease-in;
              transform: scale(1.1, 1.1); }
      #archive .topics ul li .avatar {
        width: 64px;
        height: 64px;
        border-radius: 248px;
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.5);
        margin: 0 auto;
        width: 104px;
        height: 104px;
        margin-bottom: 12px; }
        #archive .topics ul li .avatar .border {
          position: relative;
          background: #00c6f2 linear-gradient(to top left, #33ebff 20%, #00c6f2 40%, #007cbf 80%);
          border-radius: 300px !important;
          padding: 2px;
          width: 100%; }
        #archive .topics ul li .avatar img {
          border-radius: 300px;
          border: 2px solid #010a1a;
          width: 100%;
          height: 100%;
          object-fit: cover; }
        #archive .topics ul li .avatar .reply-bubble {
          font-family: proxima-nova, Helvetica, sans-serif;
          border: 2px solid #010a1a;
          border-radius: 48px;
          background: #ff6200;
          color: #ffffff;
          font-size: 14px;
          line-height: 20px;
          font-weight: 700;
          text-align: center;
          text-decoration: none;
          width: 24px;
          height: 24px;
          display: block;
          position: absolute;
          right: -2px;
          top: -2px;
          box-shadow: 0 0 0 0 white; }
          #archive .topics ul li .avatar .reply-bubble:hover, #archive .topics ul li .avatar .reply-bubble:focus {
            outline: none;
            border-color: #ff6200;
            box-shadow: 0 0 0 2px white; }
        #archive .topics ul li .avatar .border {
          padding: 3px; }
        #archive .topics ul li .avatar img {
          transition: transform 200ms ease-out;
          width: 100%;
          height: 100%;
          border-width: 3px; }

/*--------*/
/* Search */
/*--------*/
.search-form {
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: 12px auto 12px;
  background-color: #031f4d;
  background-image: linear-gradient(135deg, #031f4d 25%, transparent 25%), linear-gradient(45deg, #010a1a 75%, #031f4d 75%);
  background-position: bottom;
  background-repeat: repeat-x;
  background-size: 16px 17px;
  padding-bottom: 40px; }
  .search-form .ad {
    margin-bottom: 0;
    grid-column: 1 / -1; }
  .search-form header {
    grid-column: 2 / -2;
    margin-top: 24px; }
  .search-form h1 {
    text-align: center;
    color: #ffffff;
    font-size: 28px;
    line-height: 32px;
    margin: 0 12px 20px 12px; }
  .search-form form#search-main {
    grid-column: 2 / -2; }
    .search-form form#search-main .field-wrap {
      background: #ffffff url("https://assets.penny-arcade.com/img/site/icon-search.svg") 16px center no-repeat; }

/*---------*/
/* Results */
/*---------*/
#search {
  font-family: proxima-nova, Helvetica, sans-serif;
  grid-column: 1 / -1;
  display: grid;
  gap: 8px 0;
  grid-template-columns: 12px 12px auto 12px 12px; }
  #search .pagination {
    grid-column: 1 / -1; }
  #search .search-term {
    grid-column: 3 / -3; }
    #search .search-term p {
      color: #818FA6;
      font-weight: 500; }
    #search .search-term h2 {
      font-size: 30px;
      line-height: 36px;
      color: #ffffff;
      margin: 8px 0 16px 0; }
    #search .search-term .refine {
      display: flex;
      flex-wrap: wrap;
      font-family: proxima-nova, Helvetica, sans-serif;
      font-size: 18px;
      line-height: 24px;
      font-weight: 500;
      margin-bottom: 4px;
      color: #00c6f2;
      color: #818FA6; }
      #search .search-term .refine a {
        color: #00c6f2; }
      #search .search-term .refine p {
        margin-right: 8px; }
      #search .search-term .refine ul {
        list-style: none;
        display: flex;
        flex-wrap: wrap; }
        #search .search-term .refine ul li {
          margin-right: 8px; }
      #search .search-term .refine button {
        font-family: proxima-nova, Helvetica, sans-serif;
        font-size: 18px;
        line-height: 24px;
        font-weight: 500;
        margin-bottom: 4px;
        color: #00c6f2;
        color: #818FA6;
        transition: all 80ms ease-in;
        border-radius: 2px; }
        #search .search-term .refine button a {
          color: #00c6f2; }
        #search .search-term .refine button.selected {
          text-decoration: underline; }
        #search .search-term .refine button:hover, #search .search-term .refine button:focus {
          transition: all 150ms ease-out;
          color: #00c6f2;
          text-decoration: underline; }
        #search .search-term .refine button:focus {
          outline: none;
          box-shadow: 0 0 0 2px #010a1a, 0 0 0 4px #00c6f2;
          text-decoration: none; }
  #search .results {
    grid-column: 2 / -2;
    border-top: 3px solid #141E2F;
    padding-top: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-template-rows: auto;
    gap: 24px 16px;
    align-items: stretch; }
    #search .results .ad {
      margin: 0;
      padding-bottom: 24px;
      border-bottom: 3px solid #141E2F; }
    #search .results .result {
      border-bottom: 3px solid #141E2F;
      display: flex;
      justify-content: space-between;
      padding: 0 0 24px 0; }
      #search .results .result .txt {
        width: 100%;
        margin: 0 12px;
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word; }
        #search .results .result .txt a {
          text-decoration: none;
          color: #ffffff;
          display: block; }
          #search .results .result .txt a:hover {
            text-decoration: underline; }
        #search .results .result .txt h4 {
          font-size: 20px;
          line-height: 28px;
          margin-bottom: 4px; }
        #search .results .result .txt p {
          font-size: 16px;
          line-height: 20px;
          color: #00c6f2;
          font-weight: 500; }
        #search .results .result .txt .snippet {
          font-weight: 400;
          color: #ccced1;
          margin-bottom: 8px; }
      #search .results .result .img {
        width: 30%;
        min-width: 104px;
        max-width: 160px; }
        #search .results .result .img a {
          display: block;
          box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.8);
          border-radius: 6px;
          overflow: hidden;
          background: #00c6f2; }
          #search .results .result .img a:hover, #search .results .result .img a:focus {
            outline: none; }
            #search .results .result .img a:hover img, #search .results .result .img a:focus img {
              opacity: 0.5; }
        #search .results .result .img img {
          width: 100%;
          height: 100%; }
      #search .results .result.news-item .img {
        width: 36px;
        min-width: 36px;
        max-width: 36px; }
        #search .results .result.news-item .img a {
          border-radius: 0;
          box-shadow: none;
          background: none; }
        #search .results .result.news-item .img img {
          height: auto; }
      #search .results .result.comic-item .img {
        overflow: hidden;
        width: 40%;
        min-width: 112px;
        max-width: 224px;
        height: 100%;
        min-height: 56px;
        max-height: 92px; }
        #search .results .result.comic-item .img a {
          border-radius: 0;
          box-shadow: none; }
      #search .results .result.podcast-item .img {
        width: 20%;
        min-width: 72px;
        max-width: 96px; }

/*------------------------*/
/* Sidebar ---------------*/
/*------------------------*/
#sidebar {
  color: #ffffff;
  transition: all 250ms ease-out;
  background-color: #031f4d;
  background-image: linear-gradient(-45deg, #031f4d 25%, transparent 25%), linear-gradient(45deg, #031f4d 25%, #010a1a 25%);
  background-position: top;
  background-repeat: repeat-x;
  background-size: 16px 17px;
  padding: 12px 0 1px 0;
  margin-top: 40px;
  display: grid;
  gap: 40px 0;
  grid-template-columns: 12px auto 12px;
  align-content: start;
  padding: 48px 0 40px 0; }
  #sidebar .title {
    margin: 0 12px 20px 12px; }
  #sidebar > div {
    grid-column: 2; }
  #sidebar h3 {
    color: #00c6f2; }
  #sidebar .ad {
    margin: 0; }
  #sidebar .random-comic .orange-btn {
    margin: 0 0 0 12px; }

/*-------------*/
/* Comic Remix */
/*-------------*/
.comic-remix .comic-remix-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(252px, 1fr));
  gap: 16px 12px; }
  .comic-remix .comic-remix-wrap p {
    margin-bottom: 16px; }
  .comic-remix .comic-remix-wrap .txt {
    margin: 0 12px; }

.comic-remix .img-comic-remix {
  font-family: proxima-nova, Helvetica, sans-serif;
  display: block;
  color: white;
  position: relative;
  background: #ff6200 linear-gradient(to bottom right, #007cbf 0%, #00c6f2 22%, #aede31 52%, #ff8c00 79%, #ff6200 100%);
  width: 100%;
  height: calc((5/12)*(100vw/1));
  border-radius: 6px;
  box-shadow: 0 0 0 0 white, inset 0 0 0 6px white, inset 6px 0 0 6px white, 0px 3px 6px rgba(0, 0, 0, 0.5);
  transition: box-shadow 150ms ease-in; }
  .comic-remix .img-comic-remix:before {
    display: block;
    position: absolute;
    content: "";
    background: #ff6200 linear-gradient(to bottom, #f24900 0%, #f24900 50%, #ff8c00 50%, #ff8c00 85%, #ffcd00 85%, #ffcd00 100%);
    width: 6px;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 6px 0 0 6px;
    z-index: 2; }
  .comic-remix .img-comic-remix .panels {
    transition: font-size 150ms ease-in;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    font-weight: 800;
    font-size: 90px;
    line-height: 170px;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.55);
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    padding: 0 5px 0 11px; }
    .comic-remix .img-comic-remix .panels > span {
      border: 2px solid black;
      background: rgba(255, 255, 255, 0.25);
      flex: 1;
      margin: 6px 1px 6px 1px;
      position: relative;
      display: flex;
      align-items: center; }
      .comic-remix .img-comic-remix .panels > span:before {
        display: block;
        position: absolute;
        content: "";
        top: -2px;
        left: -4px;
        width: 2px;
        height: calc(100% + 4px);
        background: white; }
      .comic-remix .img-comic-remix .panels > span span {
        flex: 1; }
  .comic-remix .img-comic-remix:hover, .comic-remix .img-comic-remix:focus {
    outline: none;
    transition: box-shadow 250ms cubic-bezier(0.5, 6, 0.01, -0.8);
    box-shadow: 0 0 0 3px white, inset 0 0 0 6px white, inset 6px 0 0 6px white, 0px 3px 6px rgba(0, 0, 0, 0.5); }
    .comic-remix .img-comic-remix:hover .panels, .comic-remix .img-comic-remix:focus .panels {
      font-size: 104px;
      line-height: 170px;
      transition: font-size 250ms cubic-bezier(0.5, 6, 0.01, -0.8); }

/*-------------------*/
/* Feeling Nostalgic */
/*-------------------*/
.nostalgia .related-comic,
.first-comic .related-comic {
  margin: 0; }
  .nostalgia .related-comic .txt p,
  .first-comic .related-comic .txt p {
    color: #00c6f2;
    display: flex;
    align-items: center; }
    .nostalgia .related-comic .txt p svg,
    .first-comic .related-comic .txt p svg {
      margin: 0 8px 0 0;
      stroke: #00c6f2; }
  .nostalgia .related-comic .txt h4,
  .first-comic .related-comic .txt h4 {
    font-size: 20px;
    line-height: 28px;
    color: #ffffff;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word; }

/*----------------*/
/* Privacy Policy */
/*----------------*/
#main #blank.legal .indent {
  margin-left: 48px; }

#main #blank.legal ul.indent-small, #main #blank.legal ol.indent-small {
  margin-left: 0; }

#main #blank.legal.terms-of-service ul, #main #blank.legal.terms-of-service li {
  margin-left: 0;
  padding-left: 0; }

/*------------------------*/
/* Footer ----------------*/
/*------------------------*/
#footer {
  font-family: proxima-nova, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 36px;
  color: #ffffff; }
  #footer a {
    color: #ffffff; }
  #footer a:hover, #footer a:focus {
    color: #ff6200;
    outline: none; }
  #footer h4 {
    text-transform: uppercase; }
  #footer li a {
    text-decoration: none; }
  #footer > .ad {
    margin: 24px 0; }

.has-sidebar #footer > .ad {
  display: none; }

/*--------------*/
/* Social Links */
/*--------------*/
.footer-social-wrap {
  position: relative;
  padding-bottom: 2px; }
  .footer-social-wrap:after {
    background: url("https://assets.penny-arcade.com/img/site/img-kemper@2x.png") bottom right/140px no-repeat;
    display: block;
    position: absolute;
    content: "";
    width: 140px;
    height: 80px;
    bottom: 0;
    right: 36px;
    z-index: -1; }
  .footer-social-wrap #social-links {
    padding: 40px 24px 32px 24px;
    position: relative;
    display: grid;
    gap: 0 8px;
    grid: "soc-head soc-head" "soc-pa soc-gabe" "soc-pa soc-tycho" "soc-pa ." / 50% auto; }
    .footer-social-wrap #social-links .title {
      grid-area: soc-head;
      margin: 0 0 12px 0; }
    .footer-social-wrap #social-links .pa {
      grid-area: soc-pa; }
    .footer-social-wrap #social-links .gabe {
      grid-area: soc-gabe; }
      .footer-social-wrap #social-links .gabe a:hover, .footer-social-wrap #social-links .gabe a:focus {
        color: #ffcd00; }
      .footer-social-wrap #social-links .gabe svg {
        fill: #ffcd00; }
    .footer-social-wrap #social-links .tycho {
      grid-area: soc-tycho; }
      .footer-social-wrap #social-links .tycho a:hover, .footer-social-wrap #social-links .tycho a:focus {
        color: #33ebff; }
      .footer-social-wrap #social-links .tycho svg {
        fill: #33ebff; }
    .footer-social-wrap #social-links li {
      list-style: none; }
    .footer-social-wrap #social-links a {
      display: flex;
      justify-content: start;
      align-items: center;
      overflow-wrap: break-word;
      word-wrap: break-word;
      word-break: break-word; }
      .footer-social-wrap #social-links a:hover, .footer-social-wrap #social-links a:focus {
        text-decoration: underline; }
    .footer-social-wrap #social-links svg {
      flex-shrink: 0;
      fill: #ff6200;
      width: 16px;
      height: 17px;
      margin-right: 8px; }
    .footer-social-wrap #social-links h3 {
      color: #ffffff; }
    .footer-social-wrap #social-links:before {
      display: block;
      position: absolute;
      content: "";
      background: #00c6f2 linear-gradient(to right, #007cbf 0%, #007cbf 50%, #00c6f2 50%, #00c6f2 85%, #33ebff 85%, #33ebff 100%);
      width: 100%;
      height: 6px;
      top: 0; }
    .footer-social-wrap #social-links:after {
      display: block;
      position: absolute;
      content: "";
      background-color: #003e80;
      width: calc(100% - 24px);
      height: 3px;
      margin: 0 12px;
      bottom: 0;
      z-index: -2; }

/*-----------------*/
/* Newsletter Form */
/*-----------------*/
.has-sidebar #newsletter {
  background-image: none;
  margin: 0;
  padding-top: 0; }

#newsletter {
  transition: all 250ms ease-out;
  background-color: #031f4d;
  background-image: linear-gradient(-45deg, #031f4d 25%, transparent 25%), linear-gradient(45deg, #031f4d 25%, #010a1a 25%);
  background-position: top;
  background-repeat: repeat-x;
  background-size: 16px 17px;
  padding: 12px 0 1px 0;
  padding: 48px 12px 32px 12px; }
  #newsletter h3 {
    color: #00c6f2; }
  #newsletter p.sml, #newsletter p.sml a {
    color: #818FA6; }
  #newsletter p.sml a:hover,
  #newsletter p.sml a:focus {
    color: #ffffff; }
  #newsletter > p {
    margin-left: 12px;
    margin-right: 12px; }
  #newsletter form {
    margin: 16px 0; }
    #newsletter form p.field-wrap {
      background: #ffffff;
      background: #ffffff url("https://assets.penny-arcade.com/img/site/icon-email.svg") 16px center no-repeat;
      background-size: 26px; }
    #newsletter form .field {
      padding-left: 50px; }
  #newsletter > p {
    font-size: 18px;
    line-height: 28px; }
  #newsletter p.sml {
    text-align: center;
    font-size: 16px;
    line-height: 24px;
    padding: 0 12px; }
  #newsletter input.orange-btn {
    padding: 8px 12px !important;
    font-size: 18px; }
  #newsletter .title {
    margin: 0 12px 12px 12px; }

.footer-nav-wrap {
  padding: 0 24px;
  margin-top: 24px; }
  .footer-nav-wrap #copyright {
    color: #818FA6;
    text-align: center;
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 8px; }
  .footer-nav-wrap #footer-nav {
    margin: auto;
    text-align: center; }
    .footer-nav-wrap #footer-nav li {
      display: inline-block;
      padding: 0 10px; }
      .footer-nav-wrap #footer-nav li a:hover, .footer-nav-wrap #footer-nav li a:focus {
        text-decoration: underline;
        color: #818FA6; }
  .footer-nav-wrap .logo-penny-arcade {
    text-align: center;
    width: 104px;
    margin: 40px auto 56px auto;
    line-height: 0; }
    .footer-nav-wrap .logo-penny-arcade svg {
      fill: #003e80;
      display: inline;
      width: 100%;
      height: auto; }

/*------------------*/
/* Media Queries ---*/
/*------------------*/
/*----------*/
/* Ads Only */
/*----------*/
@media only screen and (min-width: 720px) {
  .ad .ad-wrap.ad-sidebar {
    width: 300px;
    min-height: 250px;
    max-height: 600px;
    height: auto; }
  .ad .ad-wrap.ad-archive {
    width: 320px;
    height: 100px; } }

@media only screen and (min-width: 800px) {
  .ad .ad-wrap.ad-header, .ad .ad-wrap.ad-body-1, .ad .ad-wrap.ad-body-2, .ad .ad-wrap.ad-body-3 {
    width: 728px;
    height: 90px; } }

@media only screen and (min-width: 1024px) {
  .ad .ad-wrap.ad-header {
    width: 970px;
    height: 250px; }
  .ad .ad-wrap.ad-archive {
    width: 300px;
    height: 600px; } }

/*--------------*/
/* XXS - Purple */
/*--------------*/
@media only screen and (max-width: 348px) {
  body {
    font-size: 16px;
    line-height: 24px; }
  #cookies .outline-btn {
    padding: 8px; }
  #header #nav-mobile-menu-closed .menu-main li a span {
    padding: 0 4px; }
  #header #nav-mobile-menu-open .nav-top .pa-logo {
    width: 250px; }
    #header #nav-mobile-menu-open .nav-top .pa-logo h1 {
      font-size: 22px;
      line-height: 30px; }
  #header #nav-mobile-menu-open .nav-grid {
    padding: 24px 20px 0 24px;
    font-size: 16px;
    line-height: 30px; }
  #header #nav-mobile-menu-open .menu-main .main-link {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 8px; }
  #header #nav-mobile-menu-open .menu-sub .brand-link {
    margin-bottom: 8px; }
  #latest-comics header {
    display: block;
    text-align: center; }
    #latest-comics header p {
      text-align: center;
      width: 100%; }
    #latest-comics header br {
      display: none; }
  #latest-comics .comics {
    min-height: 80px; }
  .content .details {
    font-size: 16px;
    line-height: 22px; }
  .content .tags li {
    font-size: 14px;
    line-height: 14px; }
  #comic .content.featured,
  #podcast-episode .content,
  #podcasts .shows .content,
  #video .content,
  #stories .content,
  #podcasts .content.featured,
  #search {
    grid-template-columns: 8px 8px auto 8px 8px; }
  #blank {
    margin-right: 16px;
    margin-left: 16px; }
  #podcasts .episodes .content > * {
    margin: 0 4px; }
  #podcasts .episodes .content .post-body .post-text {
    padding: 0 4px; }
  #podcasts .shows .post-body, #podcasts .shows header, #video .shows .post-body, #video .shows header, #stories .shows .post-body, #stories .shows header {
    margin: 0 4px; }
  #podcasts .archive .post-text, #video .archive .post-text {
    padding: 0 4px; }
  #search .results .result .txt {
    margin: 0 8px; }
  #about .about p, #about .bio p {
    margin-left: 4px;
    margin-right: 4px; }
  .title {
    margin-left: 16px; }
  #news .content {
    grid-template-columns: 8px 8px 64px auto 8px 8px; }
    #news .content footer .details {
      font-size: 16px;
      line-height: 22px; }
    #news .content footer .tags li {
      font-size: 14px;
      line-height: 14px; }
    #news .content header h2 {
      margin-bottom: 8px; }
    #news .content .post-body {
      margin-top: 8px; }
      #news .content .post-body aside {
        margin-left: -8px; }
      #news .content .post-body .related-comic {
        width: calc(100% - 8px); }
        #news .content .post-body .related-comic p {
          padding: 0; }
    #news .content.featured {
      grid-template-columns: 8px 8px 84px auto 8px 8px; }
  .post-nav li a .arrow {
    gap: 0 8px;
    height: auto;
    padding: 4px 16px; }
    .post-nav li a .arrow span {
      max-width: 100%; }
  .post-nav .prev a .arrow {
    padding-right: 0; }
  .post-nav .next a .arrow {
    padding-left: 0; }
  #comic .content.featured .pagination {
    grid-template-columns: 72px auto 72px; }
    #comic .content.featured .pagination .buy-print-btn svg {
      width: 30px; }
    #comic .content.featured .pagination .orange-btn {
      font-size: 16px;
      padding: 8px; }
  #about, #about .boys {
    grid-template-columns: 1fr; }
  #sidebar {
    text-align: center; }
    #sidebar .nostalgia .related-comic .txt p {
      justify-content: center;
      font-size: 16px;
      line-height: 24px; }
      #sidebar .nostalgia .related-comic .txt p svg {
        margin: 0 6px 0 0;
        width: 20px; }
    #sidebar .nostalgia .related-comic .txt h4 {
      font-size: 18px;
      line-height: 24px;
      margin-top: 4px;
      text-align: center; }
  #video .archive, #video .results, #video .episodes, #stories .archive, #stories .results, #stories .episodes, #podcasts .archive, #podcasts .results, #podcasts .episodes, #search .archive, #search .results, #search .episodes {
    grid-template-columns: 1fr; }
  #stories .archive .content, #video .archive .content, #podcasts .archive .content {
    grid-template-columns: .5fr 1fr; }
  .search-form .checkboxes {
    flex-wrap: wrap; }
    .search-form .checkboxes .checkbox {
      font-size: 16px;
      padding-left: 28px; }
  .search-term .refine, .search-term .refine button {
    font-size: 16px !important;
    line-height: 24px !important; }
  #footer {
    font-size: 14px;
    line-height: 32px; }
    #footer .footer-nav-wrap {
      padding: 0 12px; }
    #footer #newsletter {
      text-align: center; }
      #footer #newsletter p {
        font-size: 16px;
        line-height: 26px; }
      #footer #newsletter p.sml {
        font-size: 14px;
        line-height: 22px; }
    #footer #social-links {
      padding: 40px 16px 32px 16px; }
  .error-page .error {
    background-size: 300px;
    width: 300px;
    height: 380px; }
    .error-page .error h1 {
      font-size: 20px !important;
      line-height: 18px !important;
      margin: 215px 0 0 69px;
      width: 43px; }
  .site-login {
    padding: 0 16px; }
    .site-login .content {
      grid-template-columns: 96px 1fr; }
    .site-login .avatar {
      width: 96px; } }

/*-------------------*/
/* XS Default - Blue */
/*-------------------*/
@media only screen and (min-width: 349px) {
  #comic.remix .outline-btn.download-btn {
    width: 130px;
    border: 2px solid #818FA6;
    padding: 1px 10px 2px 8px;
    height: 40px;
    text-decoration: none; }
    #comic.remix .outline-btn.download-btn svg {
      margin-right: 6px; }
    #comic.remix .outline-btn.download-btn .aria-show {
      position: static;
      clip: auto;
      height: auto;
      width: auto; } }

/*---------------*/
/* Small - Green */
/*---------------*/
@media only screen and (min-width: 421px) {
  body #main.home-page #news .content h2 {
    font-size: 40px;
    line-height: 48px; }
  body .content header h1, body .content.featured header h1, body .content.featured header h2, body .content .bio h1, body #about header h1, body #about.featured header h1, body #about.featured header h2, body #about .bio h1, body #comic.remix header h1, body #comic.remix.featured header h1, body #comic.remix.featured header h2, body #comic.remix .bio h1 {
    font-size: 40px;
    line-height: 48px; }
  body .content header h2, body .content .boys h2, body #about header h2, body #about .boys h2, body #comic.remix header h2, body #comic.remix .boys h2 {
    font-size: 36px;
    line-height: 44px; }
  body .content .stories ul li h4, body #about .stories ul li h4, body #comic.remix .stories ul li h4 {
    font-size: 22px;
    line-height: 32px; }
  body .replies {
    margin: 0 24px 16px 24px; }
    body .replies div p {
      padding: 12px 16px; }
  body #main.news-post-page .post-body .related-comic p, body #about .work .related-comic p {
    max-width: 100%;
    font-size: 20px;
    line-height: 26px; }
  body #main.news-post-page .post-body .related-comic svg, body #about .work .related-comic svg {
    width: 19px;
    height: auto; }
  #main.home-page #news .hero-img {
    max-height: 300px;
    background: black; }
  .title h3 {
    text-transform: uppercase;
    font-size: 22px;
    line-height: 28px; }
  #header #nav-mobile-menu-open .nav-grid {
    gap: 0 16px;
    grid-template-columns: 1fr 1fr .75fr; }
  #header #nav-mobile-menu-open .menu-main {
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
    gap: 0 16px; }
  #header #nav-mobile-menu-open .menu-display.nav-div {
    padding-top: 4px;
    margin: 0 !important; }
    #header #nav-mobile-menu-open .menu-display.nav-div:before {
      display: none; }
  .archive-features .browse-by-year ul {
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
  #archive .topics ul {
    margin: 0; }
    #archive .topics ul li {
      padding: 0 16px 24px 16px; }
  #comic .content.featured .pagination .comic-option-btns {
    max-width: 260px; }
  #comic.remix .outline-btn.share-btn {
    width: 100px;
    border: 2px solid #818FA6;
    padding: 1px 10px 2px 8px;
    margin-right: 0;
    height: 40px;
    text-decoration: none; }
    #comic.remix .outline-btn.share-btn svg {
      margin-right: 6px; }
    #comic.remix .outline-btn.share-btn .aria-show {
      position: static;
      clip: auto;
      height: auto;
      width: auto; }
  .related-comic .img,
  .comic-remix .img-comic-remix {
    max-height: 160px; }
  #latest-comics header br {
    display: none; }
  #latest-comics header h1 {
    font-size: 22px;
    line-height: 22px; }
  #latest-comics header p {
    width: auto;
    margin-top: -3px;
    font-size: 14px;
    line-height: 14px; }
  .error-page .error {
    background-size: 421px;
    width: 421px;
    height: 530px; }
    .error-page .error h1 {
      font-size: 28px !important;
      line-height: 26px !important;
      margin: 302px 0 0 98px;
      width: 60px; }
  .site-login .content {
    grid-template-columns: 128px 1fr; }
  .site-login .avatar {
    width: 128px; }
  .site-login form {
    padding: 28px 32px 36px 36px; } }

/*-----------------*/
/* Medium - Yellow */
/*-----------------*/
@media only screen and (min-width: 720px) {
  .has-sidebar #footer > .ad {
    display: block; }
  body .orange-btn:hover {
    box-shadow: 0 0 0 4px white, 0px 3px 6px rgba(0, 0, 0, 0.85); }
  body #main.video-page .twitch-live .txt, body #main.video-page #highlight-reel .txt {
    padding: 16px 20px;
    display: flex; }
    body #main.video-page .twitch-live .txt .video-info, body #main.video-page #highlight-reel .txt .video-info {
      margin: 1px 0 0 16px; }
  body #main.video-page #highlight-reel .txt {
    padding: 20px;
    display: block; }
    body #main.video-page #highlight-reel .txt .video-info {
      margin: 0 !important; }
  body #main.home-page #news .content h2 {
    font-size: 44px;
    line-height: 52px; }
  body .content header h1, body .content.featured header h1, body .content.featured header h2, body #about header h1, body #about.featured header h1, body #about.featured header h2, body #comic.remix header h1, body #comic.remix.featured header h1, body #comic.remix.featured header h2 {
    font-size: 44px;
    line-height: 52px; }
  body .hero-img:before, body #highlight-reel:before {
    width: 8px !important; }
  body .hero-img img, body #highlight-reel img {
    padding-left: 8px; }
  body #highlight-reel {
    padding-left: 8px; }
  body #main.home-page .twitch-live, body #main.home-page #highlight-reel {
    display: none; }
  body .twitch-live, body #highlight-reel {
    padding-left: 8px;
    box-shadow: inset 8px 0 0 #9661ff; }
  body #main.news-post-page #sidebar {
    grid-row: 2; }
  body #main.news-post-page .related-posts {
    grid-column: 2 / -2;
    padding: 0; }
    body #main.news-post-page .related-posts .title {
      margin-left: 16px; }
    body #main.news-post-page .related-posts .ad {
      display: none; }
  body #main.news-post-page .post-nav {
    grid-column: 2 / -2; }
  body #main.blank-page {
    grid-template-columns: 8px auto 8px; }
    body #main.blank-page #blank {
      grid-column: 2; }
  .has-sidebar #newsletter {
    transition: all 250ms ease-out;
    background-color: #031f4d;
    background-image: linear-gradient(-45deg, #031f4d 25%, transparent 25%), linear-gradient(45deg, #031f4d 25%, #010a1a 25%);
    background-position: top;
    background-repeat: repeat-x;
    background-size: 16px 17px;
    padding: 12px 0 1px 0;
    padding: 48px 16px 32px 16px; }
  .related-comic:hover .img, .related-comic:focus .img {
    box-shadow: 0 0 0 4px white, 0px 3px 6px rgba(0, 0, 0, 0.5); }
  .post-nav li a:hover, .post-nav li a:focus,
  .news-post-page .post-body .related-comic:hover,
  .news-post-page .post-body .related-comic:focus,
  #about .work .related-comic:hover,
  #about .work .related-comic:focus {
    box-shadow: 0 0 0 4px #ffffff, 0px 3px 6px rgba(0, 0, 0, 0.5); }
  .share-btns > div > button, .share-btns > div > button svg,
  .share-btns > div > a, .share-btns > div > a svg {
    width: 20px;
    height: 28px; }
  .share-btns > div button.settings-btn svg, .share-btns > div a.settings-btn svg {
    top: 0; }
  .share-menu, .download-menu, .settings-menu {
    right: -11px;
    top: -10px; }
    .share-menu .icon-close svg, .download-menu .icon-close svg, .settings-menu .icon-close svg {
      width: 20px;
      height: 24px; }
  .comic-option-btns .share-menu, .comic-option-btns .download-menu {
    right: -5px;
    top: -5px; }
  #cookies {
    grid-template-columns: auto auto;
    align-items: center;
    font-size: 16px;
    line-height: 24px; }
    #cookies p {
      grid-column: 1 / span 1;
      grid-row: 1 / span 2; }
  #main {
    display: grid;
    gap: 0 8px;
    grid-template-columns: 8px auto 300px 8px; }
    #main #latest-comics, #main > .ad {
      grid-column: 1 / -1; }
    #main #podcasts, #main #video, #main #stories, #main #archive, #main #about {
      grid-column: 2 / -2; }
    #main #comic {
      grid-column: 2 / span 2; }
      #main #comic .content {
        display: block; }
        #main #comic .content header, #main #comic .content footer {
          margin: 0 16px; }
      #main #comic .pagination {
        border-width: 4px; }
    #main.stories-comic-page #sidebar {
      display: none; }
    #main #news, #main #podcast-episode {
      grid-column: 2; }
    #main #sidebar {
      grid-column: 3 / span 1;
      background: none; }
    #main #sidebar .twitch-live, #main #sidebar #highlight-reel {
      display: block; }
    #main #news.paginated .pagination, #main #search .pagination {
      grid-column: 1 / -1;
      margin: 48px 0 0 0;
      grid-template-columns: 111px auto 106px;
      grid-template-rows: 1;
      gap: 0; }
      #main #news.paginated .pagination.top, #main #search .pagination.top {
        margin-bottom: 28px; }
      #main #news.paginated .pagination .newer, #main #news.paginated .pagination .prev, #main #search .pagination .newer, #main #search .pagination .prev {
        grid-column: 1; }
      #main #news.paginated .pagination .older, #main #news.paginated .pagination .next, #main #search .pagination .older, #main #search .pagination .next {
        grid-column: 3; }
      #main #news.paginated .pagination .pages, #main #search .pagination .pages {
        grid-row: 1;
        grid-column: 2;
        display: flex;
        align-self: center; }
    #main #news {
      grid-template-columns: 16px auto 16px; }
      #main #news.paginated {
        grid-column: 2 / -2;
        gap: 0 8px;
        grid-template-columns: auto 300px; }
        #main #news.paginated .featured {
          grid-column: 1; }
          #main #news.paginated .featured:after {
            bottom: -4px; }
        #main #news.paginated > .ad {
          display: block;
          grid-column: 2; }
        #main #news.paginated .posts {
          padding-top: 32px;
          border-top: 4px solid #141E2F; }
      #main #news .posts {
        grid-template-columns: repeat(2, 1fr); }
        #main #news .posts .content {
          grid-column: auto; }
      #main #news .replies {
        grid-column: 2;
        margin: 0 0 16px 0; }
      #main #news .ad, #main #news .more-news {
        grid-column: 1/ -1; }
      #main #news .content {
        grid-column: 1 / -1;
        grid-template-columns: 16px 60px auto 16px;
        grid-template-areas: ". con-header con-header ." "con-avatar con-avatar con-tags ." "con-img con-img con-img ." ". con-body con-body ." "con-div con-div con-div ."; }
        #main #news .content.featured {
          grid-template-columns: 16px 80px auto 16px; }
      #main #news.paginated .content {
        grid-template-areas: ". con-header con-header ." "con-avatar con-avatar con-tags ." ". con-body con-body ." "con-div con-div con-div con-div"; }
    #main #podcast-episode .content {
      grid-template-columns: 16px auto 16px;
      grid-template-areas: ". con-header ." ". con-body ." "con-div con-div ."; }
    #main #podcast-episode .pagination {
      margin: 28px 16px 36px 0; }
    #main .content:after {
      height: 4px; }
    #main .seasons, #main .archive-features .browse-by-year, .archive-features #main .browse-by-year {
      border-width: 4px; }
  #header #nav-mobile-menu-closed .menu-main {
    padding-left: 16px;
    padding-right: 4px; }
  #header #nav-mobile-menu-open .nav-top {
    padding: 12px 16px 20px 16px; }
  #header #nav-mobile-menu-open .nav-grid {
    grid-template-columns: repeat(4, 1fr);
    margin: 0 8px; }
  #header #nav-mobile-menu-open .menu-main {
    grid-column: 1 / span 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr); }
    #header #nav-mobile-menu-open .menu-main .about-link {
      grid-column: 1;
      margin-top: 8px !important; }
      #header #nav-mobile-menu-open .menu-main .about-link:last-child {
        margin: 0 !important; }
  #latest-comics {
    gap: 8px;
    padding: 8px 16px 0 16px;
    margin-bottom: 0;
    grid: "latest-head comic-1 comic-2 comic-3" / 1fr 1fr 1fr 1fr;
    box-shadow: inset 0 -8px 0px #010a1a; }
    #latest-comics header {
      display: block;
      margin-bottom: 16px;
      padding: 0;
      align-self: center; }
      #latest-comics header h1 {
        font-size: 28px;
        line-height: 28px; }
      #latest-comics header p {
        text-align: left;
        margin-top: 4px;
        font-size: 12px;
        line-height: 14px; }
    #latest-comics .comics {
      height: calc((4/7)*(100vw/4)); }
      #latest-comics .comics a {
        font-size: 22px;
        line-height: 24px; }
      #latest-comics .comics:hover {
        transition: box-shadow 300ms cubic-bezier(0.2, 8, 0.01, -1); }
  #main.news-post-page .post-body aside {
    margin-left: -16px;
    width: calc(100% + 16px); }
    #main.news-post-page .post-body aside .related-comic {
      border-radius: 8px; }
      #main.news-post-page .post-body aside .related-comic .img {
        padding-left: 8px;
        border-radius: 8px; }
        #main.news-post-page .post-body aside .related-comic .img:before {
          width: 8px; }
  #about .work .related-comic {
    border-radius: 8px; }
    #about .work .related-comic p {
      max-width: 160px !important; }
    #about .work .related-comic .img {
      padding-left: 8px;
      border-radius: 8px; }
      #about .work .related-comic .img:before {
        width: 8px; }
  #main.podcasts-page .hero-img:hover, #main.podcasts-page .hero-img:focus,
  #main.video-page .hero-img:hover,
  #main.video-page .hero-img:focus,
  #main.stories-page .hero-img:hover,
  #main.stories-page .hero-img:focus,
  #main.stories-universe-page .archive .hero-img:hover,
  #main.stories-universe-page .archive .hero-img:focus {
    box-shadow: 0 0 0 4px white, 0px 3px 6px rgba(0, 0, 0, 0.5); }
  #main.about-page .stories a:hover .hero-img, #main.about-page .stories a:focus .hero-img {
    box-shadow: 0 0 0 4px white, 0px 3px 6px rgba(0, 0, 0, 0.5); }
  #about .stories ul li .hero-img {
    border-radius: 8px; }
  .title {
    margin-left: 16px; }
  #search {
    display: block;
    grid-column: 2 / -2; }
    #search .search-term {
      margin: 12px 16px 8px 16px; }
    #search .results {
      border-width: 4px;
      padding-top: 24px; }
      #search .results .ad, #search .results .result {
        border-width: 4px; }
      #search .results .result .txt {
        margin: 0 16px; }
        #search .results .result .txt h4 {
          font-size: 22px;
          line-height: 28px; }
  .search-form {
    grid-column: 1 / -1;
    grid-template-columns: 16px auto 16px; }
    .search-form h1 {
      font-size: 32px;
      line-height: 36px;
      text-align: left;
      margin: 0 16px 16px 16px; }
    .search-form form#search-main {
      display: grid;
      gap: 0 16px;
      grid-template-columns: auto 300px;
      align-items: center; }
      .search-form form#search-main .checkboxes {
        margin: 0;
        padding: 0;
        width: 100%; }
  #archive {
    border: 0; }
  #archive .topics ul li {
    padding: 0 20px 32px 20px; }
    #archive .topics ul li .avatar {
      width: 128px;
      height: 128px;
      margin-bottom: 16px; }
      #archive .topics ul li .avatar .border {
        padding: 4px; }
      #archive .topics ul li .avatar img {
        border-width: 4px; }
    #archive .topics ul li a:hover .avatar .border, #archive .topics ul li a:focus .avatar .border {
      box-shadow: 0 0 0 6px #ffffff; }
  .archive-features {
    gap: 32px 24px;
    grid-template-columns: 1fr 1fr; }
    .archive-features > div {
      border-width: 4px; }
    .archive-features .related-comic {
      grid-template-columns: 1fr; }
      .archive-features .related-comic .img {
        height: calc((5/12)*(100vw/2));
        max-height: 100%; }
    .archive-features .first-comic {
      grid-column: 1;
      grid-row: 1 / span 2; }
    .archive-features .nostalgia {
      grid-column: 1;
      grid-row: 3; }
    .archive-features .comic-remix {
      grid-row: 2 / span 2; }
      .archive-features .comic-remix .img-comic-remix {
        height: calc((5/12)*(100vw/2));
        max-height: 100%; }
      .archive-features .comic-remix .comic-remix-wrap {
        grid-template-columns: 1fr; }
    .archive-features .recent-topics {
      grid-row: 1;
      grid-column: 2; }
    .archive-features .random-comic {
      grid-column: 1;
      grid-row: 4; }
    .archive-features .ad {
      grid-column: 2;
      grid-row: 4;
      margin: 0;
      padding-bottom: 0; }
    .archive-features .browse-by-year {
      grid-column: 1 / -1; }
      .archive-features .browse-by-year ul {
        grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
      .archive-features .browse-by-year ~ .ad {
        grid-row: auto;
        grid-column: 1 / -1; }
  #podcasts .featured, #stories .featured, #video .featured {
    gap: 0 16px;
    grid-template-columns: repeat(8, 1fr);
    margin-bottom: 48px; }
    #podcasts .featured .post-body, #stories .featured .post-body, #video .featured .post-body {
      grid-row: 2;
      margin-top: 0; }
    #podcasts .featured .hero-img, #podcasts .featured #highlight-reel, #stories .featured .hero-img, #stories .featured #highlight-reel, #video .featured .hero-img, #video .featured #highlight-reel {
      grid-row: 1 / span 3;
      margin: 0;
      align-self: start; }
    #podcasts .featured header, #podcasts .featured .post-body, #stories .featured header, #stories .featured .post-body, #video .featured header, #video .featured .post-body {
      margin-left: 16px; }
    #podcasts .featured:after, #stories .featured:after, #video .featured:after {
      grid-column: 1 / -1 !important;
      top: 0;
      left: 16px;
      width: calc(100% - 16px); }
    #podcasts .featured .post-text, #stories .featured .post-text, #video .featured .post-text {
      margin-bottom: 36px; }
    #podcasts .featured .hero-img, #stories .featured .hero-img, #video .featured .hero-img {
      margin-bottom: 36px; }
  #podcasts .shows .hero-img, #podcasts .archive .hero-img, #podcasts .episodes .hero-img, #stories .shows .hero-img, #stories .archive .hero-img, #stories .episodes .hero-img, #video .shows .hero-img, #video .archive .hero-img, #video .episodes .hero-img {
    border-radius: 8px; }
    #podcasts .shows .hero-img:before, #podcasts .archive .hero-img:before, #podcasts .episodes .hero-img:before, #stories .shows .hero-img:before, #stories .archive .hero-img:before, #stories .episodes .hero-img:before, #video .shows .hero-img:before, #video .archive .hero-img:before, #video .episodes .hero-img:before {
      width: 8px; }
  #podcasts .shows .content:after, #podcasts .archive .content:after, #podcasts .episodes .content:after, #stories .shows .content:after, #stories .archive .content:after, #stories .episodes .content:after, #video .shows .content:after, #video .archive .content:after, #video .episodes .content:after {
    background: #141E2F; }
  #podcasts .shows, #stories .shows, #video .shows {
    margin: 0;
    gap: 32px 16px;
    grid-template-columns: repeat(2, 1fr); }
    #podcasts .shows .content header, #podcasts .shows .content .post-body, #stories .shows .content header, #stories .shows .content .post-body, #video .shows .content header, #video .shows .content .post-body {
      margin: 0 16px; }
  #podcasts .seasons, #podcasts .archive-features .browse-by-year, .archive-features #podcasts .browse-by-year, #stories .seasons, #stories .archive-features .browse-by-year, .archive-features #stories .browse-by-year, #video .seasons, #video .archive-features .browse-by-year, .archive-features #video .browse-by-year {
    margin: 8px 0 24px 0; }
  #podcasts .archive, #podcasts .episodes, #stories .archive, #stories .episodes, #video .archive, #video .episodes {
    margin: 0;
    gap: 28px 16px; }
  #podcasts .episodes .content > *, #stories .episodes .content > *, #video .episodes .content > * {
    margin-left: 16px;
    margin-right: 16px; }
  .related-posts > ul {
    gap: 28px 16px; }
  .related-posts > ul > li:last-child {
    border-bottom: 3px solid #141E2F; }
  .post-nav li a {
    gap: 4px 16px;
    grid-template-columns: repeat(3, 1fr); }
    .post-nav li a .arrow {
      height: auto;
      align-self: stretch;
      grid-template-columns: 1fr !important;
      gap: 4px 0;
      grid-row: 1 / span 2;
      justify-items: center;
      padding: 12px 0; }
      .post-nav li a .arrow span {
        grid-row: 1;
        text-align: center;
        font-size: 18px;
        line-height: 22px;
        align-self: end;
        max-width: 90px; }
      .post-nav li a .arrow svg {
        grid-row: 2;
        width: 100%;
        max-width: 24px;
        align-self: start; }
    .post-nav li a h4 {
      grid-column: 2 / -1;
      grid-row: 1;
      padding: 0;
      align-self: end;
      margin-top: 16px;
      font-size: 20px;
      line-height: 24px; }
    .post-nav li a .author {
      grid-column: 2 / -1;
      grid-row: 2;
      padding: 0;
      align-self: start;
      margin-bottom: 16px; }
  .post-nav .prev a {
    border-radius: 8px; }
    .post-nav .prev a .arrow {
      border-radius: 8px 0 0 8px; }
    .post-nav .prev a h4, .post-nav .prev a .author {
      margin-right: 16px; }
  .post-nav .next a {
    border-radius: 8px; }
    .post-nav .next a .arrow {
      border-radius: 0 8px 8px 0;
      grid-column: 3; }
    .post-nav .next a h4, .post-nav .next a .author {
      grid-column: 1 / span 2;
      margin-left: 16px; }
  #podcasts .featured header {
    grid-column: 1 / span 5; }
  #podcasts .featured .post-body {
    grid-column: 1 / span 5;
    align-self: start; }
  #podcasts .featured .hero-img {
    grid-column: 6 / span 3;
    max-height: 100%; }
  #podcasts .featured:after {
    grid-column: 1 / span 5; }
  #video .featured header {
    grid-column: 1 / span 4; }
  #video .featured .post-body {
    grid-column: 1 / span 4; }
  #video .featured #highlight-reel {
    grid-column: 5 / span 4; }
  #stories .featured header {
    grid-column: 1 / span 4; }
  #stories .featured .post-body {
    grid-column: 1 / span 4; }
  #stories .featured .hero-img {
    grid-column: 5 / span 4;
    max-height: 416px; }
  #stories .featured:after {
    grid-column: 1 / span 4; }
  #stories .shows {
    grid-template-columns: repeat(2, 1fr) !important; }
    #stories .shows .hero-img {
      height: calc((13/20)*(100vw/2));
      max-height: 416px; }
  #comic .content.featured footer {
    overflow: visible; }
  #comic .content.featured .tags {
    overflow: visible;
    display: block;
    padding: 0; }
    #comic .content.featured .tags li {
      margin-right: 2px; }
      #comic .content.featured .tags li:last-child a {
        margin: 0; }
    #comic .content.featured .tags:after {
      display: none; }
  #comic .content.featured .pagination {
    grid-template-columns: 106px auto 111px; }
    #comic .content.featured .pagination .orange-btn {
      font-size: 20px;
      padding: 8px 20px; }
    #comic .content.featured .pagination .comic-option-btns {
      max-width: 416px; }
    #comic .content.featured .pagination .outline-btn.share-btn, #comic .content.featured .pagination .outline-btn.download-btn {
      width: 100px;
      border: 2px solid #818FA6;
      padding: 1px 10px 2px 8px;
      height: 40px;
      text-decoration: none; }
      #comic .content.featured .pagination .outline-btn.share-btn svg, #comic .content.featured .pagination .outline-btn.download-btn svg {
        margin-right: 6px; }
      #comic .content.featured .pagination .outline-btn.share-btn .aria-show, #comic .content.featured .pagination .outline-btn.download-btn .aria-show {
        position: static;
        clip: auto;
        height: auto;
        width: auto; }
    #comic .content.featured .pagination .outline-btn.download-btn {
      width: 130px; }
  #comic.remix .reroll {
    display: grid;
    gap: 0 24px;
    grid-template-columns: 1fr 300px;
    grid-template-rows: auto 1fr;
    margin-left: 16px;
    margin-right: 0;
    margin-bottom: 40px;
    text-align: left;
    align-items: start; }
    #comic.remix .reroll p {
      margin: 16px 0 32px 0; }
    #comic.remix .reroll .ad {
      display: block;
      grid-column: 2;
      grid-row: 1 / span 2;
      margin: 0; }
    #comic.remix .reroll .info {
      margin: 24px 0 0 0; }
  #comic.remix .sources {
    gap: 0 16px;
    margin: 24px 0 0 0;
    grid-template-columns: repeat(3, 1fr); }
    #comic.remix .sources li {
      border-width: 4px !important; }
      #comic.remix .sources li > * {
        margin: 0 16px; }
  #comic.remix .content.featured .pagination .comic-option-btns {
    justify-content: center; }
  #comic.remix .content.featured .pagination .share-menu, #comic.remix .content.featured .pagination .download-menu {
    left: auto;
    top: -4px;
    right: 8px; }
  #comic.remix .content.featured .pagination .download-btn,
  #comic.remix .content.featured .pagination .share-btn {
    margin: 0 8px;
    width: auto;
    font-size: 16px;
    padding: 0 20px 0 12px; }
    #comic.remix .content.featured .pagination .download-btn br,
    #comic.remix .content.featured .pagination .share-btn br {
      display: none; }
    #comic.remix .content.featured .pagination .download-btn svg,
    #comic.remix .content.featured .pagination .share-btn svg {
      width: 24px; }
  #about {
    gap: 32px 24px; }
    #about article {
      margin: 0;
      border-width: 4px !important; }
    #about .work {
      grid-column: 1;
      padding: 0; }
      #about .work .related-comic {
        margin: 0 0 32px 0; }
    #about .bio p, #about .bio ul, #about .bio h1, #about .about p, #about .about ul, #about .about h1 {
      margin-right: 16px;
      margin-left: 16px; }
    #about .about {
      display: grid;
      gap: 0 24px;
      grid-template-columns: 3fr 1fr; }
      #about .about header {
        grid-column: 1 / -1; }
        #about .about header h1 {
          text-align: left; }
      #about .about section {
        grid-column: 1; }
      #about .about .logo-penny-arcade {
        grid-column: 2;
        margin-top: 0; }
      #about .about:after {
        height: 4px; }
    #about .stories {
      grid-column: auto;
      border: 0; }
    #about .contact {
      padding-top: 32px;
      border-top: 3px solid #141E2F; }
      #about .contact p {
        padding: 0; }
  #sidebar {
    margin-top: 20px;
    padding: 0;
    font-size: 18px;
    line-height: 28px;
    color: #ccced1 !important;
    grid-template-columns: 1fr;
    max-width: 300px;
    justify-self: end; }
    #sidebar .ad, #sidebar > div {
      grid-column: 1; }
    #sidebar .title {
      margin: 0 0 24px 0; }
    #sidebar .random-comic .orange-btn {
      margin: 0; }
    #sidebar .orange-btn.dice {
      margin-bottom: 4px;
      width: 100%;
      text-align: left; }
    #sidebar .comic-remix-wrap, #sidebar .related-comic {
      background: #141E2F;
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.5);
      border-radius: 8px;
      display: block; }
    #sidebar .comic-remix .img-comic-remix:hover, #sidebar .comic-remix .img-comic-remix:focus {
      box-shadow: 0 0 0 4px white, inset 0 0 0 6px white, inset 6px 0 0 6px white, 0px 3px 6px rgba(0, 0, 0, 0.5); }
    #sidebar .comic-remix .txt, #sidebar .nostalgia .txt {
      margin: 0 18px;
      padding: 16px 0; }
    #sidebar .comic-remix .img-comic-remix, #sidebar .nostalgia .img-comic-remix {
      border-radius: 8px; }
      #sidebar .comic-remix .img-comic-remix:before, #sidebar .nostalgia .img-comic-remix:before {
        width: 8px; }
    #sidebar .nostalgia .related-comic {
      display: block;
      border-radius: 8px; }
      #sidebar .nostalgia .related-comic:before {
        display: none; }
      #sidebar .nostalgia .related-comic .img {
        position: relative;
        padding-left: 8px;
        border-radius: 8px;
        max-height: 180px; }
        #sidebar .nostalgia .related-comic .img:before {
          display: block;
          position: absolute;
          content: "";
          background: #ff6200 linear-gradient(to bottom, #f24900 0%, #f24900 50%, #ff8c00 50%, #ff8c00 85%, #ffcd00 85%, #ffcd00 100%);
          width: 6px;
          height: 100%;
          top: 0;
          left: 0;
          border-radius: 6px 0 0 6px;
          z-index: 2;
          width: 8px; }
      #sidebar .nostalgia .related-comic .txt {
        padding: 16px 0;
        margin: 0 18px; }
        #sidebar .nostalgia .related-comic .txt p {
          font-size: 20px;
          line-height: 28px;
          margin: 0; }
        #sidebar .nostalgia .related-comic .txt h4 {
          font-size: 22px;
          line-height: 28px; }
  #newsletter {
    padding: 48px 16px 32px 16px; }
    #newsletter > p, #newsletter .title {
      margin-left: 16px;
      margin-right: 16px; }
  #footer .footer-social-wrap #social-links {
    gap: 0 16px;
    grid-template-columns: 16px repeat(4, 1fr) 16px;
    align-items: start;
    padding: 40px 0; }
    #footer .footer-social-wrap #social-links:after {
      width: calc(100% - 32px);
      margin: 0 16px; }
    #footer .footer-social-wrap #social-links h4 {
      text-transform: uppercase;
      font-size: 20px;
      line-height: 28px;
      margin: 0 0 12px 0; }
    #footer .footer-social-wrap #social-links .title {
      grid-column: 2 / span 2;
      grid-row: 1 / span 1; }
    #footer .footer-social-wrap #social-links .gabe.social {
      grid-column: 4 / span 1;
      grid-row: 1 / span 2; }
    #footer .footer-social-wrap #social-links .tycho.social {
      grid-column: 5 / span 1;
      grid-row: 1 / span 2; }
    #footer .footer-social-wrap #social-links .pa.social {
      grid-column: 2 / span 2;
      grid-row: 2 / span 1;
      display: grid;
      gap: 0 16px;
      grid-template-columns: repeat(2, 1fr); }
  .orange-btn {
    font-size: 20px;
    padding: 8px 20px; }
  .error-page .error {
    background-size: 640px;
    width: 640px;
    height: 800px; }
    .error-page .error h1 {
      font-size: 44px !important;
      line-height: 40px !important;
      margin: 460px 0 0 150px;
      width: 90px; }
  .site-login .content header h1 {
    font-size: 40px;
    line-height: 48px; }
  .site-login .content header .details {
    font-size: 20px;
    line-height: 28px; }
  #main.no-news #news {
    display: none; }
  #main.no-news #sidebar {
    grid-column: 2 / span 2;
    max-width: 100%;
    justify-self: start;
    display: grid;
    justify-items: start;
    gap: 32px 24px;
    width: 100%;
    grid-template-columns: repeat(2, 1fr); }
    #main.no-news #sidebar > div {
      grid-column: auto;
      max-width: 400px;
      width: 100%; }
      #main.no-news #sidebar > div.random-comic {
        grid-column: 1/-1;
        justify-self: center;
        text-align: center; }
    #main.no-news #sidebar .comic-remix {
      justify-self: end; }
      #main.no-news #sidebar .comic-remix .orange-btn {
        width: auto; }
    #main.no-news #sidebar .ad {
      display: none; } }

/*-------------*/
/* XM - Orange */
/*-------------*/
@media only screen and (min-width: 901px) {
  body #main.home-page #news .content h2 {
    font-size: 48px;
    line-height: 56px; }
  body .content header h1, body .content.featured header h1, body .content.featured header h2, body #about header h1, body #about.featured header h1, body #about.featured header h2, body #comic.remix header h1, body #comic.remix.featured header h1, body #comic.remix.featured header h2 {
    font-size: 48px;
    line-height: 56px; }
  body #main.news-post-page .post-body .related-comic p {
    font-size: 22px;
    line-height: 28px;
    margin-right: 24px; }
  body #main.news-post-page .post-body .related-comic svg {
    width: 21px; }
  body #main.news-post-page .related-posts, body #main.news-post-page .post-nav {
    grid-column: 2 / -2; }
  body #main.blank-page {
    grid-template-columns: 16px repeat(8, 1fr) 16px; }
    body #main.blank-page #blank {
      margin-left: 0;
      margin-right: 0;
      grid-column: 3 / -3; }
  .share-btns > div > button, .share-btns > div > button svg,
  .share-btns > div > a, .share-btns > div > a svg {
    width: 22px;
    height: 31px; }
  #cookies {
    font-size: 18px;
    line-height: 28px;
    padding: 20px 20px 24px 20px; }
  .outline-btn {
    padding: 8px 16px; }
    .outline-btn.youtube-btn, .outline-btn.twitch-btn {
      padding: 8px 16px; }
      .outline-btn.youtube-btn svg, .outline-btn.twitch-btn svg {
        width: 15px; }
  #search .search-term, #search .results {
    grid-column: 1 / -1; }
  #main {
    gap: 0 16px;
    grid-template-columns: 16px repeat(8, 1fr) 16px; }
    #main #comic {
      grid-column: 2 / span 8; }
      #main #comic .content header, #main #comic .content footer {
        margin: 0; }
    #main #news, #main #podcast-episode {
      grid-column: 2 / span 5; }
    #main #sidebar {
      grid-column: 7 / span 3; }
    #main #news.paginated, #main #search {
      display: grid;
      gap: 0 16px;
      grid-template-columns: repeat(8, 1fr); }
      #main #news.paginated .pagination, #main #search .pagination {
        grid-column: 2 / -2; }
        #main #news.paginated .pagination .pages li a, #main #search .pagination .pages li a {
          padding-top: 8px;
          font-size: 20px;
          line-height: 24px; }
    #main #news.paginated .featured {
      grid-column: 1 / span 5; }
    #main #news.paginated > .ad {
      grid-column: 6 / -1;
      justify-self: end;
      max-width: 306px; }
  #main.home-page #news .hero-img {
    max-height: 400px; }
  #header {
    height: 100px; }
    #header #nav-mobile-menu-closed {
      display: none; }
    #header #nav-desktop {
      display: block !important; }
      #header #nav-desktop .nav-wrap {
        padding: 0 16px; }
      #header #nav-desktop .menu-main {
        padding: 0 16px; }
        #header #nav-desktop .menu-main li a {
          font-size: 18px; }
          #header #nav-desktop .menu-main li a span {
            padding: 0 4px; }
  #latest-comics {
    box-shadow: inset 0 -16px 0px #010a1a;
    padding: 8px 16px 0 16px; }
    #latest-comics header {
      margin-bottom: 20px; }
      #latest-comics header h1 {
        font-size: 32px;
        line-height: 32px; }
      #latest-comics header p {
        margin-top: 0;
        font-size: 14px;
        line-height: 20px; }
    #latest-comics .comics {
      height: calc((4/7)*(100vw/4)); }
      #latest-comics .comics a {
        font-size: 24px;
        line-height: 28px; }
        #latest-comics .comics a p {
          bottom: 16px;
          right: 16px; }
      #latest-comics .comics:hover {
        box-shadow: 0 0 0 4px white, 0 3px 6px rgba(0, 0, 0, 0.5); }
  #sidebar {
    max-width: 306px; }
  .title {
    margin-left: 0;
    margin-bottom: 28px; }
  #news .content .post-text h1 {
    font-size: 34px;
    line-height: 42px; }
  #news .content .post-text h2 {
    font-size: 30px;
    line-height: 38px; }
  #news .content .post-text h3 {
    font-size: 26px;
    line-height: 34px; }
  #news .content .post-text h4 {
    font-size: 22px;
    line-height: 30px; }
  #news .content .post-text h5 {
    font-size: 20px;
    line-height: 28px; }
  #news .content .post-text h6 {
    font-size: 18px;
    line-height: 24px; }
  #search .search-term {
    margin: 16px 0 8px 0; }
  #search .results .result .txt {
    margin: 0 16px 0 0; }
  .search-form {
    grid-template-columns: 32px auto 32px;
    padding-bottom: 48px; }
    .search-form h1 {
      margin: 0 0 12px 0;
      font-size: 40px;
      line-height: 48px; }
    .search-form form#search-main {
      gap: 0 24px; }
  #archive .topics ul li {
    padding: 0 20px 36px 20px; }
    #archive .topics ul li .avatar {
      width: 144px;
      height: 144px; }
    #archive .topics ul li a:hover .avatar .border, #archive .topics ul li a:focus .avatar .border {
      box-shadow: 0 0 0 7px #ffffff; }
  .archive-features .title {
    margin: 0 0 20px 0 !important; }
  .archive-features .txt {
    margin: 0 !important; }
  .archive-features .recent-topics ul {
    margin: 0; }
  .archive-features .random-comic .orange-btn {
    margin-left: 0; }
  .archive-features .browse-by-year ul {
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 12px; }
  #podcasts .archive p, #stories .archive p, #video .archive p, #podcast-episode .archive p {
    font-size: 18px;
    line-height: 28px; }
  #podcasts .episodes .content > *, #stories .episodes .content > *, #video .episodes .content > *, #podcast-episode .episodes .content > * {
    margin-left: 0;
    margin-right: 0; }
  #podcasts .featured header, #podcasts .featured .post-body, #podcast-episode .featured header, #podcast-episode .featured .post-body, #stories .featured header, #stories .featured .post-body, #video .featured header, #video .featured .post-body {
    margin-left: 0px; }
  #podcasts .featured:after, #podcast-episode .featured:after, #stories .featured:after, #video .featured:after {
    left: 0;
    width: 100%; }
  .post-nav {
    gap: 0 20px; }
    .post-nav li a {
      gap: 4px 20px; }
      .post-nav li a h4 {
        font-size: 22px;
        line-height: 28px; }
      .post-nav li a .arrow span {
        font-size: 20px;
        line-height: 24px; }
      .post-nav li a .arrow svg {
        max-width: 28px; }
    .post-nav .prev a h4, .post-nav .prev a .author {
      margin-right: 20px; }
    .post-nav .next a h4, .post-nav .next a .author {
      margin-left: 20px; }
  .related-posts {
    padding: 0; }
    .related-posts .title {
      margin-left: 0 !important; }
  #podcast-episode .content {
    display: block;
    padding-bottom: 1px; }
  #podcast-episode .pagination {
    margin-right: 0 !important; }
  #stories .archive {
    grid-template-columns: repeat(auto-fit, minmax(calc(8px * 44), 1fr)); }
  #podcasts .episodes {
    grid-template-columns: repeat(auto-fit, minmax(calc(8px * 39), 1fr));
    gap: 28px 24px; }
  #stories .archive .content, #video .archive .content {
    grid-template-columns: 160px 1fr; }
    #stories .archive .content .hero-img, #video .archive .content .hero-img {
      height: 112px; }
      #stories .archive .content .hero-img img, #video .archive .content .hero-img img {
        min-height: 112px; }
  #comic .content.featured .pagination .comic-option-btns {
    max-width: 600px; }
  #comic .content.featured .pagination .outline-btn.buy-print-btn, #comic .content.featured .pagination .outline-btn.download-btn, #comic .content.featured .pagination .outline-btn.share-btn {
    width: auto;
    font-size: 16px;
    padding: 0 20px 0 12px; }
    #comic .content.featured .pagination .outline-btn.buy-print-btn br, #comic .content.featured .pagination .outline-btn.download-btn br, #comic .content.featured .pagination .outline-btn.share-btn br {
      display: none; }
  #comic .content.featured .pagination .outline-btn.download-btn svg,
  #comic .content.featured .pagination .outline-btn.share-btn svg {
    width: 24px; }
  .share-menu, .download-menu, .settings-menu {
    padding: 16px 11px 18px 18px;
    right: -12px;
    top: -12px; }
    .share-menu .icon-close svg, .download-menu .icon-close svg, .settings-menu .icon-close svg {
      width: 22px; }
  .download-menu svg {
    margin-bottom: 8px; }
  .comic-option-btns .share-menu, .comic-option-btns .download-menu {
    right: -8px;
    top: -8px; }
  #comic.remix .reroll {
    gap: 0 16px;
    grid-template-columns: repeat(8, 1fr);
    margin-left: 0; }
    #comic.remix .reroll .ad {
      width: 300px;
      grid-column: 6 / span 3;
      justify-self: end; }
    #comic.remix .reroll header, #comic.remix .reroll section {
      grid-column: 1 / span 4; }
  #comic.remix .sources {
    gap: 0 24px; }
    #comic.remix .sources li > * {
      margin: 0; }
  #comic.remix .content.featured div.timestamp {
    display: none; }
  #comic.remix .content.featured .pagination {
    gap: 0;
    grid-template-columns: 1fr auto 1fr; }
    #comic.remix .content.featured .pagination.btm {
      display: grid; }
    #comic.remix .content.featured .pagination p.timestamp, #comic.remix .content.featured .pagination .orange-btn {
      display: block; }
    #comic.remix .content.featured .pagination .timestamp {
      justify-self: start;
      grid-column: 1; }
    #comic.remix .content.featured .pagination .orange-btn {
      grid-column: 3; }
    #comic.remix .content.featured .pagination .comic-option-btns {
      grid-column: 2; }
  #about {
    gap: 40px 24px; }
    #about .about p, #about .about ul, #about .about h1, #about .bio p, #about .bio ul, #about .bio h1 {
      margin-left: 0;
      margin-right: 0; }
    #about .boys p {
      padding-right: 16px; }
  .btn-list li {
    margin: 0 16px 16px 0; }
  .has-sidebar #footer > .ad {
    margin: 32px 0; }
  #footer .footer-social-wrap {
    display: grid;
    gap: 0 16px;
    grid-template-columns: 16px repeat(8, 1fr) 16px;
    position: relative;
    transition: all 250ms ease-out;
    background-color: #031f4d;
    background-image: linear-gradient(-45deg, #031f4d 25%, transparent 25%), linear-gradient(45deg, #031f4d 25%, #010a1a 25%);
    background-position: top;
    background-repeat: repeat-x;
    background-size: 16px 17px;
    padding: 12px 0 1px 0; }
    #footer .footer-social-wrap:after {
      display: block;
      position: absolute;
      content: "";
      background: #00c6f2 linear-gradient(to right, #007cbf 0%, #007cbf 50%, #00c6f2 50%, #00c6f2 85%, #33ebff 85%, #33ebff 100%);
      width: 100%;
      height: 6px;
      bottom: 0;
      left: 0;
      z-index: 1; }
    #footer .footer-social-wrap #newsletter {
      margin: 0;
      background: none;
      grid-column: 6 / span 4;
      grid-row: 1;
      padding: 40px 0; }
      #footer .footer-social-wrap #newsletter .title, #footer .footer-social-wrap #newsletter p {
        margin-left: 0;
        margin-right: 0; }
      #footer .footer-social-wrap #newsletter p.sml {
        padding: 0;
        text-align: left; }
    #footer .footer-social-wrap #social-links {
      grid-column: 2 / span 4;
      grid-row: 1;
      gap: 0 16px;
      grid-template-columns: repeat(2, 1fr);
      align-items: start;
      padding: 40px 0; }
      #footer .footer-social-wrap #social-links:before, #footer .footer-social-wrap #social-links:after {
        display: none; }
      #footer .footer-social-wrap #social-links h4 {
        font-size: 18px;
        line-height: 28px;
        margin: 0; }
      #footer .footer-social-wrap #social-links .title {
        grid-column: 1 / span 2;
        grid-row: 1 / span 1; }
      #footer .footer-social-wrap #social-links .gabe.social {
        grid-column: 2 / span 1;
        grid-row: 2 / span 1; }
      #footer .footer-social-wrap #social-links .tycho.social {
        grid-column: 2 / span 1;
        grid-row: 3 / span 4; }
      #footer .footer-social-wrap #social-links .pa.social {
        grid-column: 1 / span 1;
        grid-row: 2 / span 5;
        display: block; }
  #footer .footer-nav-wrap {
    padding: 32px 0 56px 0;
    position: relative;
    display: grid;
    gap: 0 16px;
    grid-template-columns: 16px repeat(4, 1fr) 16px; }
    #footer .footer-nav-wrap:after {
      background: url("https://assets.penny-arcade.com/img/site/img-kemper@2x.png") top right/230px no-repeat;
      display: block;
      position: absolute;
      content: "";
      width: 230px;
      height: 112px;
      bottom: 0px;
      left: 70%;
      z-index: -1; }
    #footer .footer-nav-wrap .logo-penny-arcade {
      grid-column: 2 / span 1;
      grid-row: 1 / span 2;
      text-align: left;
      width: 100%;
      margin: 0; }
      #footer .footer-nav-wrap .logo-penny-arcade svg {
        width: 160px; }
    #footer .footer-nav-wrap #copyright {
      grid-column: 3 / span 2;
      grid-row: 1;
      text-align: left; }
    #footer .footer-nav-wrap #footer-nav {
      grid-column: 3 / span 2;
      grid-row: 2;
      text-align: left; }
      #footer .footer-nav-wrap #footer-nav li {
        display: inline-block;
        padding: 0 20px 0 0; }
  .error-page .error {
    background-size: 640px;
    width: 640px;
    height: 800px; }
  #main.no-news #sidebar {
    grid-column: 2 / -2; } }

/*-------------*/
/* Large - Red */
/*-------------*/
@media only screen and (min-width: 1025px) {
  body {
    font-size: 20px;
    line-height: 32px; }
    body #main.home-page #news,
    body #main.comic-page #news,
    body #main.stories-comic-page #news,
    body #main.news-post-page #news {
      gap: 60px 24px;
      grid-template-columns: repeat(5, 1fr); }
      body #main.home-page #news .content,
      body #main.home-page #news .ad,
      body #main.comic-page #news .content,
      body #main.comic-page #news .ad,
      body #main.stories-comic-page #news .content,
      body #main.stories-comic-page #news .ad,
      body #main.news-post-page #news .content,
      body #main.news-post-page #news .ad {
        grid-column: 1 / -1; }
      body #main.home-page #news .more-news, body #main.home-page #news .replies,
      body #main.comic-page #news .more-news,
      body #main.comic-page #news .replies,
      body #main.stories-comic-page #news .more-news,
      body #main.stories-comic-page #news .replies,
      body #main.news-post-page #news .more-news,
      body #main.news-post-page #news .replies {
        grid-column: 2 / span 4; }
      body #main.home-page #news .content .post-text p:last-child,
      body #main.comic-page #news .content .post-text p:last-child,
      body #main.stories-comic-page #news .content .post-text p:last-child,
      body #main.news-post-page #news .content .post-text p:last-child {
        margin-bottom: 16px !important; }
    body #main.video-page .twitch-live .txt, body #main.video-page #highlight-reel .txt {
      padding: 20px 24px; }
      body #main.video-page .twitch-live .txt #live-now p, body #main.video-page #highlight-reel .txt #live-now p, body #main.video-page .twitch-live .txt p:first-child, body #main.video-page #highlight-reel .txt p:first-child {
        font-size: 22px; }
    body .replies section > p {
      width: 52px;
      background-size: 52px;
      padding-top: 52px;
      font-size: 18px;
      line-height: 32px; }
    body .replies section.author-reply {
      grid-template-columns: 52px auto; }
      body .replies section.author-reply div p:first-child:after {
        top: 20px; }
    body .replies section.reply {
      grid-template-columns: auto 52px; }
      body .replies section.reply div p:first-child:after {
        top: 20px; }
    body .replies div p {
      font-size: 18px;
      line-height: 28px;
      padding: 16px 20px !important; }
    body #main.home-page #news .content h2 {
      font-size: 52px;
      line-height: 60px; }
    body #main.podcasts-episode-page .player {
      margin: 30px 0 32px 0; }
    body #main.podcasts-episode-page .post-text {
      margin-bottom: 36px; }
    body .content header h1, body .content.featured header h1, body .content.featured header h2, body #search header h1, body #search.featured header h1, body #search.featured header h2, body #about header h1, body #about.featured header h1, body #about.featured header h2, body #comic.remix header h1, body #comic.remix.featured header h1, body #comic.remix.featured header h2 {
      font-size: 52px;
      line-height: 60px; }
    body .content header h2, body .content .search-term h2, body .content .boys h2, body #search header h2, body #search .search-term h2, body #search .boys h2, body #about header h2, body #about .search-term h2, body #about .boys h2, body #comic.remix header h2, body #comic.remix .search-term h2, body #comic.remix .boys h2 {
      font-size: 38px;
      line-height: 48px; }
    body .content .details, body #search .details, body #about .details, body #comic.remix .details {
      font-size: 20px;
      line-height: 28px; }
  #cookies {
    grid-template-columns: auto auto auto; }
    #cookies p {
      grid-row: span 1; }
    #cookies .outline-btn {
      padding: 10px 20px; }
  .btn-list li {
    margin: 0 20px 16px 0; }
  .outline-btn {
    font-size: 18px !important;
    padding: 10px 20px; }
    .outline-btn.youtube-btn, .outline-btn.twitch-btn {
      padding: 10px 16px; }
      .outline-btn.youtube-btn svg, .outline-btn.twitch-btn svg {
        width: 18px;
        height: 16px; }
    .outline-btn.rss-btn svg {
      width: 13px; }
    .outline-btn.twitter-share-btn, .outline-btn.fb-share-btn {
      padding-left: 16px;
      padding-right: 16px; }
      .outline-btn.twitter-share-btn svg, .outline-btn.fb-share-btn svg {
        width: 18px;
        height: 16px; }
  .orange-btn, .pagination .orange-btn {
    font-size: 22px;
    line-height: 24px;
    padding: 12px 24px; }
    .orange-btn.more-news, .pagination .orange-btn.more-news {
      font-size: 28px;
      width: 256px;
      padding: 14px 32px; }
  #comic .content.featured .pagination {
    grid-template-columns: 112px auto 118px; }
    #comic .content.featured .pagination .orange-btn {
      font-size: 22px;
      line-height: 24px; }
    #comic .content.featured .pagination .comic-option-btns {
      max-width: 672px; }
  #main {
    gap: 0 24px;
    grid-template-columns: 24px repeat(8, 1fr) 24px; }
    #main #news.paginated .pagination, #main #search .pagination {
      grid-template-columns: 126px auto 120px; }
      #main #news.paginated .pagination .pages li a, #main #search .pagination .pages li a {
        min-width: 48px;
        height: 48px;
        padding-top: 12px; }
      #main #news.paginated .pagination .pages li.ellip, #main #search .pagination .pages li.ellip {
        padding-top: 10px; }
    #main #news.paginated {
      gap: 0 24px; }
      #main #news.paginated .posts {
        gap: 32px 24px;
        padding-top: 40px; }
      #main #news.paginated .content {
        grid-template-columns: repeat(4, 1fr); }
        #main #news.paginated .content.featured .details {
          font-size: 20px;
          line-height: 28px; }
        #main #news.paginated .content.featured .post-text {
          padding-bottom: 32px;
          font-size: 20px;
          line-height: 32px; }
        #main #news.paginated .content .details {
          font-size: 18px;
          line-height: 24px; }
        #main #news.paginated .content .post-text {
          font-size: 18px;
          line-height: 28px; }
    #main #news .content {
      gap: 0 24px;
      grid-template-areas: none;
      grid-template-columns: repeat(5, 1fr); }
      #main #news .content.featured {
        grid-template-columns: repeat(5, 1fr); }
        #main #news .content.featured .post-text p:last-child {
          margin-bottom: 0; }
        #main #news .content.featured .avatar .border {
          padding: 4px; }
        #main #news .content.featured .avatar img {
          border-width: 4px; }
        #main #news .content.featured .avatar .reply-bubble {
          border-width: 4px;
          right: -4px;
          top: -4px; }
          #main #news .content.featured .avatar .reply-bubble:hover, #main #news .content.featured .avatar .reply-bubble:focus {
            box-shadow: 0 0 0 4px white; }
      #main #news .content .avatar {
        grid-column: 1 / span 1;
        grid-row: 1 / span 4; }
      #main #news .content .hero-img {
        margin-left: -16px;
        margin-top: 28px; }
      #main #news .content header, #main #news .content footer, #main #news .content .hero-img, #main #news .content .post-body, #main #news .content:after {
        grid-column: 2 / -1;
        grid-row: auto; }
      #main #news .content header h2 {
        margin-bottom: 0; }
      #main #news .content:after {
        height: 4px; }
      #main #news .content .post-text {
        padding: 0 0 12px 0; }
      #main #news .content .avatar {
        width: 100%;
        height: auto; }
        #main #news .content .avatar .border {
          padding: 3px; }
        #main #news .content .avatar img {
          border-width: 3px; }
        #main #news .content .avatar .reply-bubble {
          border-width: 3px;
          font-size: 18px;
          line-height: 28px;
          width: 36px;
          height: 36px;
          right: -3px;
          top: -3px; }
          #main #news .content .avatar .reply-bubble:hover, #main #news .content .avatar .reply-bubble:focus {
            box-shadow: 0 0 0 3px white; }
  #header #nav-desktop .menu-main {
    padding: 0 24px; }
    #header #nav-desktop .menu-main li a {
      font-size: 20px; }
  #header #nav-desktop .nav-wrap {
    padding: 0 24px;
    font-size: 16px; }
    #header #nav-desktop .nav-wrap .menu-sub-wrap {
      max-width: 600px; }
  #header #nav-desktop #live-now {
    padding: 0 24px 0 18px; }
    #header #nav-desktop #live-now p {
      padding-right: 24px; }
  #header #nav-desktop .menu-sub .about-link {
    padding-left: 24px; }
  #header #nav-desktop .menu-display .cpa-link {
    padding-right: 24px;
    margin-right: 20px; }
  .live #header #nav-desktop .nav-wrap .menu-sub-wrap {
    max-width: 740px; }
  #latest-comics {
    padding: 8px 24px 0 24px; }
    #latest-comics header h1 {
      font-size: 40px;
      line-height: 40px; }
    #latest-comics header p {
      font-size: 16px;
      line-height: 22px; }
    #latest-comics .comics {
      border-radius: 12px; }
      #latest-comics .comics a {
        font-size: 28px;
        line-height: 32px; }
        #latest-comics .comics a p {
          bottom: 20px;
          right: 20px; }
  #news .content .post-text h1 {
    font-size: 36px;
    line-height: 44px; }
  #news .content .post-text h2 {
    font-size: 32px;
    line-height: 40px; }
  #news .content .post-text h3 {
    font-size: 28px;
    line-height: 36px; }
  #news .content .post-text h4 {
    font-size: 24px;
    line-height: 32px; }
  #news .content .post-text h5 {
    font-size: 22px;
    line-height: 30px; }
  #news .content .post-text h6 {
    font-size: 20px;
    line-height: 26px; }
  #sidebar .comic-remix-wrap,
  #sidebar .nostalgia .related-comic {
    border-radius: 12px; }
  #main.news-post-page .post-body .related-comic, #about .work .related-comic {
    border-radius: 8px 12px 12px 8px; }
  #sidebar .orange-btn.dice {
    margin-bottom: 8px; }
  #search .results {
    gap: 24px; }
    #search .results .result .txt h4 {
      font-size: 24px;
      line-height: 32px; }
    #search .results .result .txt p {
      font-size: 18px;
      line-height: 20px; }
  .search-form {
    grid-template-columns: 48px auto 48px;
    padding-bottom: 52px; }
    .search-form h1 {
      font-size: 44px;
      line-height: 56px; }
    .search-form .orange-btn {
      padding: 8px 24px; }
    .search-form form#search-main {
      grid-template-columns: auto 312px; }
  #archive .topics {
    margin-bottom: 48px; }
    #archive .topics ul {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 44px 16px; }
      #archive .topics ul li {
        padding: 0; }
  .archive-features {
    grid-template-columns: 1fr 1fr 312px; }
    .archive-features .related-comic .img {
      height: calc((5/12)*(100vw/3)); }
    .archive-features .first-comic {
      grid-row: 1 / span 2; }
    .archive-features .nostalgia {
      grid-column: 1;
      grid-row: 3; }
    .archive-features .comic-remix {
      grid-row: 3;
      font-size: 18px;
      line-height: 28px; }
      .archive-features .comic-remix .img-comic-remix {
        height: calc((5/12)*(100vw/3)); }
    .archive-features .recent-topics {
      grid-row: 1 / span 2; }
    .archive-features .random-comic {
      grid-column: 3;
      grid-row: 1; }
    .archive-features .ad {
      grid-column: 3;
      grid-row: 2 / 5;
      border: 0; }
    .archive-features .browse-by-year ul {
      grid-template-columns: repeat(auto-fit, minmax(144px, 1fr)); }
  #about {
    grid-template-columns: repeat(8, 1fr);
    gap: 48px 24px; }
    #about .about {
      grid-template-columns: repeat(8, 1fr);
      padding-bottom: 48px; }
      #about .about header, #about .about section {
        grid-column: 1 / span 5; }
      #about .about .logo-penny-arcade {
        grid-column: 6 / span 3;
        width: 200px;
        height: auto; }
    #about .boys {
      border: 0;
      display: block;
      grid-column: 1 / span 5;
      grid-row: 2 / span 3;
      padding: 0; }
      #about .boys section {
        display: grid;
        gap: 0 24px;
        grid-template-columns: 164px 1fr; }
        #about .boys section:first-child {
          margin-bottom: 56px; }
        #about .boys section .avatar {
          grid-row: 1 / span 2;
          margin: 0; }
        #about .boys section h2 {
          text-align: left;
          margin-left: 0; }
    #about .work {
      grid-column: 6 / span 3;
      grid-row: 2 / span 2; }
      #about .work h2 {
        text-align: left;
        margin-left: 0; }
    #about .contact {
      grid-column: 6 / span 3;
      grid-row: 4;
      text-align: left; }
      #about .contact h2 {
        text-align: left;
        margin-left: 0; }
      #about .contact ul {
        justify-content: flex-start; }
        #about .contact ul li {
          margin: 0 8px 8px 0; }
    #about .stories {
      border-top: 3px solid #141E2F;
      border-bottom: 0;
      padding-top: 48px;
      grid-column: 1 / -1; }
      #about .stories ul {
        gap: 24px 24px;
        grid-template-columns: repeat(4, 1fr); }
  .archive-features .nostalgia p, .archive-features .first-comic p {
    font-size: 18px;
    line-height: 28px; }
  #podcasts .featured, #podcast-episode .featured, #stories .featured, #video .featured {
    gap: 0 24px; }
  #podcasts .archive, #podcasts .episodes, #video .archive, #video .episodes, #stories .archive, #stories .episodes {
    gap: 28px 24px; }
  #podcasts .shows, #video .shows, #stories .shows {
    gap: 40px 24px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
    #podcasts .shows p, #video .shows p, #stories .shows p {
      font-size: 18px;
      line-height: 28px; }
    #podcasts .shows .content .post-body, #video .shows .content .post-body, #stories .shows .content .post-body {
      padding-bottom: 40px; }
  #podcasts .featured .schedule svg, #video .featured .schedule svg, #stories .featured .schedule svg {
    width: 20px;
    height: 22px;
    margin-right: 12px; }
  #podcasts .episodes .details, #video .episodes .details, #stories .episodes .details {
    font-size: 18px;
    line-height: 28px; }
  #podcasts .episodes .play, #video .episodes .play, #stories .episodes .play {
    padding-left: 20px; }
  .post-nav {
    gap: 0 24px; }
    .post-nav li a {
      gap: 8px 24px;
      grid-template-columns: repeat(4, 1fr); }
      .post-nav li a h4 {
        font-size: 24px;
        line-height: 32px;
        margin-top: 18px; }
      .post-nav li a .author {
        font-size: 18px;
        line-height: 20px;
        margin-bottom: 20px; }
      .post-nav li a .arrow {
        padding: 16px 0;
        gap: 8px 0; }
        .post-nav li a .arrow svg {
          max-width: 32px; }
    .post-nav .prev a {
      border-radius: 12px; }
      .post-nav .prev a .arrow {
        border-radius: 12px 0 0 12px; }
    .post-nav .next a {
      border-radius: 12px; }
      .post-nav .next a h4, .post-nav .next a .author {
        grid-column: 1 / span 3; }
      .post-nav .next a .arrow {
        grid-column: 4;
        border-radius: 0 12px 12px 0; }
  .related-posts > ul {
    gap: 28px 24px; }
  .related-posts > ul > li {
    gap: 16px;
    border: 0; }
    .related-posts > ul > li:last-child {
      border: 0; }
  #comic.remix .reroll .info {
    font-size: 20px;
    line-height: 28px;
    padding-left: 28px; }
    #comic.remix .reroll .info:before {
      top: 4px; }
  #comic.remix .sources li .details {
    font-size: 18px;
    line-height: 28px; }
  #footer .footer-social-wrap {
    gap: 0 24px;
    grid-template-columns: 24px repeat(8, 1fr) 24px; }
    #footer .footer-social-wrap #newsletter {
      grid-column: 7 / span 3; }
      #footer .footer-social-wrap #newsletter > p {
        padding: 4px 0 0 0; }
    #footer .footer-social-wrap #social-links {
      grid-column: 2 / span 5;
      gap: 0 24px;
      grid-template-columns: repeat(3, 1fr);
      align-items: start;
      align-self: start; }
      #footer .footer-social-wrap #social-links h4 {
        text-transform: uppercase;
        font-size: 22px;
        line-height: 28px;
        margin: 0 0 12px 0; }
      #footer .footer-social-wrap #social-links .gabe.social {
        grid-column: 3 / span 1;
        grid-row: 1 / span 2; }
      #footer .footer-social-wrap #social-links .tycho.social {
        grid-column: 3 / span 1;
        grid-row: 3 / span 2; }
        #footer .footer-social-wrap #social-links .tycho.social h4 {
          margin-top: 16px; }
      #footer .footer-social-wrap #social-links .pa.social {
        grid-column: 1 / span 2;
        grid-row: 2 / span 3;
        gap: 0 24px;
        display: grid;
        align-items: start;
        grid-template-columns: repeat(2, 1fr); }
  #footer .footer-nav-wrap {
    gap: 0 24px;
    grid-template-columns: 24px repeat(6, 1fr) 24px; }
    #footer .footer-nav-wrap .logo-penny-arcade {
      grid-column: 2 / span 1; }
    #footer .footer-nav-wrap #copyright, #footer .footer-nav-wrap #footer-nav {
      grid-column: 3 / span 3; } }

/*-----------*/
/* XL - Pink */
/*-----------*/
@media only screen and (min-width: 1281px) {
  body {
    font-size: 22px;
    line-height: 36px; }
    body #comic .content.featured .pagination {
      grid-template-columns: 143px auto 149px; }
      body #comic .content.featured .pagination .orange-btn {
        font-size: 24px;
        padding: 12px 32px; }
    body #main.video-page .twitch-live .txt, body #main.video-page #highlight-reel .txt {
      padding: 28px 32px 24px 32px; }
      body #main.video-page .twitch-live .txt #live-now p, body #main.video-page #highlight-reel .txt #live-now p, body #main.video-page .twitch-live .txt p:first-child, body #main.video-page #highlight-reel .txt p:first-child {
        font-size: 24px; }
      body #main.video-page .twitch-live .txt .video-info, body #main.video-page #highlight-reel .txt .video-info {
        font-size: 20px;
        line-height: 28px;
        margin-top: -2px; }
    body .replies section {
      gap: 0 24px;
      margin-bottom: 16px; }
      body .replies section > p {
        width: 64px;
        background-size: 64px;
        padding-top: 68px;
        font-size: 22px;
        line-height: 32px; }
      body .replies section.author-reply {
        grid-template-columns: 64px auto; }
        body .replies section.author-reply div p:first-child:after {
          top: 24px; }
      body .replies section.reply {
        grid-template-columns: auto 64px; }
        body .replies section.reply div p:first-child:after {
          top: 24px; }
    body .replies div p {
      border-radius: 16px;
      font-size: 20px;
      line-height: 32px;
      padding: 20px 24px !important; }
    body #main.news-post-page .post-body .related-comic {
      gap: 0 36px; }
      body #main.news-post-page .post-body .related-comic p {
        font-size: 24px;
        line-height: 32px; }
      body #main.news-post-page .post-body .related-comic svg {
        width: 24px; }
    body #main.news-post-page #news .content .post-text p:last-child {
      margin-bottom: 18px !important; }
    body #main.home-page #news .content .post-text p:last-child {
      margin-bottom: 28px !important; }
    body #main.home-page #news,
    body #main.comic-page #news,
    body #main.stories-comic-page #news,
    body #main.news-post-page #news {
      gap: 60px 12px;
      grid-template-columns: repeat(8, 1fr); }
      body #main.home-page #news .more-news,
      body #main.home-page #news .replies,
      body #main.comic-page #news .more-news,
      body #main.comic-page #news .replies,
      body #main.stories-comic-page #news .more-news,
      body #main.stories-comic-page #news .replies,
      body #main.news-post-page #news .more-news,
      body #main.news-post-page #news .replies {
        grid-column: 3 / span 6; }
      body #main.home-page #news .content,
      body #main.comic-page #news .content,
      body #main.stories-comic-page #news .content,
      body #main.news-post-page #news .content {
        gap: 0 12px;
        grid-template-columns: repeat(8, 1fr); }
        body #main.home-page #news .content.featured,
        body #main.comic-page #news .content.featured,
        body #main.stories-comic-page #news .content.featured,
        body #main.news-post-page #news .content.featured {
          grid-template-columns: repeat(8, 1fr); }
          body #main.home-page #news .content.featured .avatar .border,
          body #main.comic-page #news .content.featured .avatar .border,
          body #main.stories-comic-page #news .content.featured .avatar .border,
          body #main.news-post-page #news .content.featured .avatar .border {
            padding: 6px; }
          body #main.home-page #news .content.featured .avatar img,
          body #main.comic-page #news .content.featured .avatar img,
          body #main.stories-comic-page #news .content.featured .avatar img,
          body #main.news-post-page #news .content.featured .avatar img {
            border-width: 6px; }
          body #main.home-page #news .content.featured .avatar .reply-bubble,
          body #main.comic-page #news .content.featured .avatar .reply-bubble,
          body #main.stories-comic-page #news .content.featured .avatar .reply-bubble,
          body #main.news-post-page #news .content.featured .avatar .reply-bubble {
            border-width: 6px;
            right: -6px;
            top: -6px; }
            body #main.home-page #news .content.featured .avatar .reply-bubble:hover, body #main.home-page #news .content.featured .avatar .reply-bubble:focus,
            body #main.comic-page #news .content.featured .avatar .reply-bubble:hover,
            body #main.comic-page #news .content.featured .avatar .reply-bubble:focus,
            body #main.stories-comic-page #news .content.featured .avatar .reply-bubble:hover,
            body #main.stories-comic-page #news .content.featured .avatar .reply-bubble:focus,
            body #main.news-post-page #news .content.featured .avatar .reply-bubble:hover,
            body #main.news-post-page #news .content.featured .avatar .reply-bubble:focus {
              box-shadow: 0 0 0 6px white; }
        body #main.home-page #news .content header, body #main.home-page #news .content footer, body #main.home-page #news .content .hero-img, body #main.home-page #news .content .post-body, body #main.home-page #news .content:after,
        body #main.comic-page #news .content header,
        body #main.comic-page #news .content footer,
        body #main.comic-page #news .content .hero-img,
        body #main.comic-page #news .content .post-body,
        body #main.comic-page #news .content:after,
        body #main.stories-comic-page #news .content header,
        body #main.stories-comic-page #news .content footer,
        body #main.stories-comic-page #news .content .hero-img,
        body #main.stories-comic-page #news .content .post-body,
        body #main.stories-comic-page #news .content:after,
        body #main.news-post-page #news .content header,
        body #main.news-post-page #news .content footer,
        body #main.news-post-page #news .content .hero-img,
        body #main.news-post-page #news .content .post-body,
        body #main.news-post-page #news .content:after {
          grid-column: 3 / -1; }
        body #main.home-page #news .content .avatar,
        body #main.comic-page #news .content .avatar,
        body #main.stories-comic-page #news .content .avatar,
        body #main.news-post-page #news .content .avatar {
          grid-column: 1 / span 2; }
          body #main.home-page #news .content .avatar .border,
          body #main.comic-page #news .content .avatar .border,
          body #main.stories-comic-page #news .content .avatar .border,
          body #main.news-post-page #news .content .avatar .border {
            padding: 6px;
            width: calc(100% - 12px);
            max-width: 184px; }
          body #main.home-page #news .content .avatar img,
          body #main.comic-page #news .content .avatar img,
          body #main.stories-comic-page #news .content .avatar img,
          body #main.news-post-page #news .content .avatar img {
            border-width: 6px; }
          body #main.home-page #news .content .avatar .reply-bubble,
          body #main.comic-page #news .content .avatar .reply-bubble,
          body #main.stories-comic-page #news .content .avatar .reply-bubble,
          body #main.news-post-page #news .content .avatar .reply-bubble {
            border-width: 6px;
            font-size: 28px;
            line-height: 42px;
            width: 56px;
            height: 56px;
            right: -6px;
            top: -6px; }
            body #main.home-page #news .content .avatar .reply-bubble:hover, body #main.home-page #news .content .avatar .reply-bubble:focus,
            body #main.comic-page #news .content .avatar .reply-bubble:hover,
            body #main.comic-page #news .content .avatar .reply-bubble:focus,
            body #main.stories-comic-page #news .content .avatar .reply-bubble:hover,
            body #main.stories-comic-page #news .content .avatar .reply-bubble:focus,
            body #main.news-post-page #news .content .avatar .reply-bubble:hover,
            body #main.news-post-page #news .content .avatar .reply-bubble:focus {
              box-shadow: 0 0 0 6px white; }
    body #main.home-page #news .content h2 {
      font-size: 56px;
      line-height: 64px; }
    body .content header h1, body .content.featured header h1, body .content.featured header h2, body .search-form header h1, body .search-form.featured header h1, body .search-form.featured header h2, body #search header h1, body #search.featured header h1, body #search.featured header h2, body #about header h1, body #about.featured header h1, body #about.featured header h2, body #comic.remix header h1, body #comic.remix.featured header h1, body #comic.remix.featured header h2 {
      font-size: 56px;
      line-height: 64px; }
    body .content header h2, body .content .search-term h2, body .content .boys h2, body .search-form header h2, body .search-form .search-term h2, body .search-form .boys h2, body #search header h2, body #search .search-term h2, body #search .boys h2, body #about header h2, body #about .search-term h2, body #about .boys h2, body #comic.remix header h2, body #comic.remix .search-term h2, body #comic.remix .boys h2 {
      font-size: 38px;
      line-height: 48px; }
    body .content .details, body .search-form .details, body #search .details, body #about .details, body #comic.remix .details {
      font-size: 22px;
      line-height: 32px; }
    body .content.featured .pagination .orange-btn, body .search-form.featured .pagination .orange-btn, body #search.featured .pagination .orange-btn, body #about.featured .pagination .orange-btn, body #comic.remix.featured .pagination .orange-btn {
      padding: 12px 24px; }
    body .content.featured .pagination .comic-option-btns, body .search-form.featured .pagination .comic-option-btns, body #search.featured .pagination .comic-option-btns, body #about.featured .pagination .comic-option-btns, body #comic.remix.featured .pagination .comic-option-btns {
      max-width: 720px !important; }
  .btn-list li {
    margin: 0 24px 16px 0; }
  .outline-btn {
    padding: 14px 22px;
    font-size: 20px !important; }
    .outline-btn.twitch-btn, .outline-btn.youtube-btn {
      padding: 13px 22px 13px 18px; }
      .outline-btn.twitch-btn svg, .outline-btn.youtube-btn svg {
        width: 20px;
        height: 18px; }
    .outline-btn.rss-btn svg {
      width: 15px; }
  #comic .content.featured .pagination .outline-btn {
    height: 48px !important; }
  #comic .content.featured .pagination .download-menu .outline-btn {
    height: 40px !important; }
  #comic.remix p.timestamp {
    font-size: 20px;
    line-height: 24px; }
  #comic.remix .reroll header, #comic.remix .reroll section {
    grid-column: 1 / span 5; }
  #comic.remix .reroll .info {
    margin: 0 0 0 16px;
    font-size: 22px;
    line-height: 28px;
    font-weight: 500;
    padding-left: 32px; }
    #comic.remix .reroll .info:before {
      top: 2px;
      width: 24px;
      height: 21px;
      padding-top: 3px;
      font-size: 18px;
      line-height: 18px; }
  #comic.remix .sources li .details {
    font-size: 20px;
    line-height: 28px; }
  #comic.remix .sources li h2 {
    font-size: 24px;
    line-height: 32px; }
  #cookies {
    padding: 32px;
    border-radius: 16px 16px 0 0;
    font-size: 20px;
    line-height: 32px; }
    #cookies .outline-btn {
      height: 48px; }
  .share-menu, .download-menu, .settings-menu {
    max-width: 344px;
    top: -18px;
    right: -18px;
    border-radius: 16px;
    font-size: 18px;
    line-height: 28px;
    padding: 22px 17px 24px 24px; }
    .share-menu a.permalink, .download-menu a.permalink, .settings-menu a.permalink {
      line-height: 22px; }
    .share-menu .btn-list li, .download-menu .btn-list li, .settings-menu .btn-list li {
      margin: 0 16px 0 0; }
      .share-menu .btn-list li .outline-btn, .download-menu .btn-list li .outline-btn, .settings-menu .btn-list li .outline-btn {
        height: 40px;
        font-size: 18px !important; }
    .share-menu svg, .download-menu svg, .settings-menu svg {
      height: 24px; }
  #main {
    gap: 0 12px;
    grid-template-columns: 24px repeat(12, 1fr) 24px; }
    #main #comic {
      grid-column: 2 / span 12; }
    #main #news, #main #podcast-episode {
      grid-column: 2 / span 8; }
    #main #sidebar {
      grid-column: 10 / span 4; }
    #main #news.paginated, #main #search {
      gap: 0 12px;
      grid-template-columns: repeat(12, 1fr); }
      #main #news.paginated .pagination, #main #search .pagination {
        grid-column: -3 / 3; }
    #main #news.paginated .posts {
      gap: 32px 12px; }
    #main #news.paginated > .ad {
      grid-column: 10 / span 3; }
    #main #news.paginated .content {
      gap: 0 12px;
      grid-template-columns: repeat(6, 1fr); }
      #main #news.paginated .content.featured {
        grid-template-columns: repeat(8, 1fr);
        grid-column: 1 / span 8; }
        #main #news.paginated .content.featured header, #main #news.paginated .content.featured footer, #main #news.paginated .content.featured .hero-img, #main #news.paginated .content.featured .post-body, #main #news.paginated .content.featured:after {
          grid-column: 3 / -1; }
        #main #news.paginated .content.featured .avatar {
          grid-column: 1 / span 2; }
          #main #news.paginated .content.featured .avatar .border {
            padding: 6px;
            width: calc(100% - 12px);
            max-width: 184px; }
          #main #news.paginated .content.featured .avatar img {
            border-width: 6px; }
          #main #news.paginated .content.featured .avatar .reply-bubble {
            border-width: 6px;
            font-size: 28px;
            line-height: 42px;
            width: 56px;
            height: 56px;
            right: -6px;
            top: -6px; }
            #main #news.paginated .content.featured .avatar .reply-bubble:hover, #main #news.paginated .content.featured .avatar .reply-bubble:focus {
              box-shadow: 0 0 0 6px white; }
        #main #news.paginated .content.featured .details {
          font-size: 22px;
          line-height: 32px; }
        #main #news.paginated .content.featured .post-text {
          font-size: 22px;
          line-height: 36px;
          padding-bottom: 32px; }
      #main #news.paginated .content .details {
        font-size: 20px;
        line-height: 28px; }
      #main #news.paginated .content .post-text {
        padding-bottom: 0;
        font-size: 20px;
        line-height: 32px; }
  .title h3 {
    text-transform: uppercase;
    font-size: 24px;
    line-height: 32px; }
  #header #nav-desktop .menu-main li a {
    font-size: 22px; }
    #header #nav-desktop .menu-main li a span {
      padding: 0 8px; }
  #header #nav-desktop .menu-main #nav-search .field {
    font-size: 18px; }
  #latest-comics header h1 {
    font-size: 48px;
    line-height: 48px; }
  #latest-comics header p {
    font-size: 20px;
    line-height: 24px; }
  #latest-comics .comics {
    border-radius: 16px;
    height: 200px; }
    #latest-comics .comics a {
      font-size: 32px;
      line-height: 36px; }
      #latest-comics .comics a p {
        bottom: 24px;
        right: 24px; }
  #news .content .post-text p {
    margin-bottom: 30px; }
  #news .content .post-text ul, #news .content .post-text ol {
    margin: 0 0 0 24px; }
  #news .content .post-text h1 {
    font-size: 38px;
    line-height: 46px; }
  #news .content .post-text h2 {
    font-size: 34px;
    line-height: 42px; }
  #news .content .post-text h3 {
    font-size: 30px;
    line-height: 38px; }
  #news .content .post-text h4 {
    font-size: 26px;
    line-height: 34px; }
  #news .content .post-text h5 {
    font-size: 24px;
    line-height: 32px; }
  #news .content .post-text h6 {
    font-size: 22px;
    line-height: 28px; }
  #sidebar .comic-remix-wrap,
  #sidebar .nostalgia .related-comic {
    border-radius: 16px; }
  .news-post-page .post-body .related-comic, #about .work .related-comic {
    border-radius: 8px 16px 16px 8px; }
  #sidebar .orange-btn.dice {
    font-size: 22px; }
  .search-form {
    grid-template-columns: 36px auto 36px;
    padding-bottom: 56px; }
    .search-form form#search-main {
      grid-template-columns: auto 320px; }
  #about {
    gap: 48px 12px;
    grid-template-columns: repeat(12, 1fr); }
    #about .boys {
      grid-column: 1 / span 7;
      grid-row: 2 / span 2; }
      #about .boys section {
        gap: 0 36px;
        grid-template-columns: 184px 1fr; }
        #about .boys section .avatar {
          width: 184px; }
          #about .boys section .avatar .border {
            padding: 6px; }
          #about .boys section .avatar img {
            border-width: 6px; }
        #about .boys section p {
          padding: 0; }
    #about .work {
      grid-column: 9 / span 4;
      grid-row: 2 / span 2; }
    #about .contact {
      grid-column: 9 / span 4;
      grid-row: 4;
      padding-top: 48px; }
      #about .contact p {
        max-width: auto;
        font-size: 20px;
        line-height: 32px; }
    #about .stories {
      grid-column: 1 / span 7; }
      #about .stories h2 {
        text-align: left;
        margin-left: 0; }
  .archive-features .browse-by-year ul {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  #archive .topics ul {
    grid-template-columns: repeat(6, 1fr);
    gap: 48px 16px; }
    #archive .topics ul li .avatar {
      width: 184px;
      height: 184px;
      margin-bottom: 24px; }
      #archive .topics ul li .avatar .border {
        padding: 6px; }
      #archive .topics ul li .avatar img {
        border-width: 6px; }
    #archive .topics ul li a:hover .avatar .border, #archive .topics ul li a:focus .avatar .border {
      box-shadow: 0 0 0 8px #ffffff; }
  .archive-features {
    gap: 32px 48px;
    grid-template-columns: 1fr 1fr 320px; }
    .archive-features .recent-topics li a {
      padding: 7px 8px;
      border-radius: 6px; }
  .archive-features .comic-remix p {
    font-size: 20px;
    line-height: 32px; }
  .archive-features .nostalgia .related-comic .txt h4, .archive-features .first-comic .related-comic .txt h4 {
    font-size: 28px;
    line-height: 40px; }
  .archive-features .nostalgia p, .archive-features .first-comic p {
    font-size: 20px;
    line-height: 32px; }
  #podcasts .featured, #video .featured, #stories .featured {
    gap: 0 12px;
    grid-template-columns: repeat(12, 1fr); }
    #podcasts .featured .details, #video .featured .details, #stories .featured .details {
      width: 80%; }
    #podcasts .featured .schedule svg, #video .featured .schedule svg, #stories .featured .schedule svg {
      margin-top: 4px; }
  #podcasts .shows, #video .shows, #stories .shows {
    grid-template-columns: repeat(auto-fit, minmax(calc(8px * 48), 1fr)); }
    #podcasts .shows p, #video .shows p, #stories .shows p {
      font-size: 20px;
      line-height: 32px; }
  #podcasts .archive .content, #podcasts .episodes .content, #video .archive .content, #video .episodes .content, #stories .archive .content, #stories .episodes .content {
    gap: 0 24px; }
    #podcasts .archive .content .details, #podcasts .episodes .content .details, #video .archive .content .details, #video .episodes .content .details, #stories .archive .content .details, #stories .episodes .content .details {
      font-size: 20px;
      line-height: 28px;
      margin: 0; }
    #podcasts .archive .content h4, #podcasts .episodes .content h4, #video .archive .content h4, #video .episodes .content h4, #stories .archive .content h4, #stories .episodes .content h4 {
      font-size: 24px;
      line-height: 32px;
      margin-bottom: 8px; }
  #podcasts .episodes .content .details, #video .episodes .content .details, #stories .episodes .content .details {
    margin-bottom: 4px; }
  #podcasts .episodes .content .post-body, #video .episodes .content .post-body, #stories .episodes .content .post-body {
    margin-top: 28px; }
  #podcasts .episodes {
    grid-template-columns: repeat(auto-fit, minmax(calc(8px * 44), 1fr)); }
  #podcasts .featured header {
    grid-column: 1 / span 7; }
  #podcasts .featured .post-body {
    grid-column: 1 / span 7; }
  #podcasts .featured .hero-img {
    grid-column: 9 / span 4;
    max-height: 460px; }
  #podcasts .featured:after {
    grid-column: 1 / span 7; }
  .post-nav {
    gap: 0 12px; }
    .post-nav li a {
      grid-template-columns: repeat(6, 1fr); }
      .post-nav li a h4, .post-nav li a .author {
        grid-column: 3 / span 4; }
      .post-nav li a h4 {
        font-size: 28px;
        line-height: 36px; }
      .post-nav li a .author {
        font-size: 20px;
        line-height: 24px; }
      .post-nav li a .arrow {
        grid-column: 1 / span 2; }
        .post-nav li a .arrow span {
          font-size: 26px;
          line-height: 32px;
          max-width: 150px; }
        .post-nav li a .arrow svg {
          max-width: 40px; }
    .post-nav .prev a {
      border-radius: 16px; }
      .post-nav .prev a .arrow {
        border-radius: 16px 0 0 16px; }
    .post-nav .next a {
      border-radius: 16px; }
      .post-nav .next a .arrow {
        border-radius: 0 16px 16px 0;
        grid-column: 5 / span 2; }
      .post-nav .next a h4, .post-nav .next a .author {
        grid-column: 1 / span 4; }
  .related-posts > ul {
    gap: 28px 24px; }
  .related-posts > ul > li {
    gap: 0 24px;
    grid-template-columns: 86px auto;
    border: 0; }
    .related-posts > ul > li:last-child {
      border: 0; }
    .related-posts > ul > li h4 {
      font-size: 24px;
      line-height: 28px;
      margin-bottom: 4px; }
    .related-posts > ul > li .author {
      font-size: 18px;
      line-height: 20px; }
    .related-posts > ul > li .post-info {
      grid-column: 2 / -1; }
  .related-posts .avatar {
    width: 100%;
    height: auto; }
    .related-posts .avatar .border {
      padding: 3px; }
    .related-posts .avatar img {
      border-width: 3px; }
    .related-posts .avatar .reply-bubble {
      border-width: 3px;
      font-size: 18px;
      line-height: 28px;
      width: 36px;
      height: 36px;
      right: -3px;
      top: -3px; }
      .related-posts .avatar .reply-bubble:hover, .related-posts .avatar .reply-bubble:focus {
        box-shadow: 0 0 0 3px white; }
  .related-posts .tags {
    margin-top: 8px;
    font-size: 24px;
    line-height: 24px; }
    .related-posts .tags li {
      font-family: proxima-nova, Helvetica, sans-serif;
      font-size: 16px;
      line-height: 16px;
      list-style: none;
      display: inline-block;
      margin: 0 2px 4px 0; }
      .related-posts .tags li a {
        padding: 3px 6px;
        display: inline-block;
        border-radius: 4px;
        color: #818FA6;
        border: 1px solid #818FA6;
        text-decoration: none; }
        .related-posts .tags li a:hover, .related-posts .tags li a:focus {
          outline: none;
          background: #818FA6;
          color: #010a1a; }
        .related-posts .tags li a:focus {
          box-shadow: 0 0 0 2px #010a1a, 0 0 0 4px #00c6f2; }
  #video .featured header {
    grid-column: 1 / span 6; }
  #video .featured .post-body {
    grid-column: 1 / span 6; }
  #video .featured #highlight-reel {
    grid-column: 8 / span 5; }
  #video .featured:after {
    grid-column: 1 / span 6; }
  #stories .featured header {
    grid-column: 1 / span 5; }
  #stories .featured .post-body {
    grid-column: 1 / span 5; }
  #stories .featured .hero-img {
    grid-column: 7 / span 6;
    max-height: 540px; }
  #stories .featured:after {
    grid-column: 1 / span 5; }
  #footer {
    font-size: 20px;
    line-height: 44px; }
    #footer .footer-social-wrap {
      gap: 0 12px;
      padding: 32px 0 44px 0;
      grid-template-columns: 24px repeat(12, 1fr) 24px; }
      #footer .footer-social-wrap #newsletter {
        padding: 40px 0 0 0;
        grid-column: 10 / span 4;
        grid-row: 1; }
        #footer .footer-social-wrap #newsletter form {
          margin: 20px 0 16px 0; }
        #footer .footer-social-wrap #newsletter > p {
          font-size: 20px;
          line-height: 32px;
          padding: 6px 0 0 0; }
        #footer .footer-social-wrap #newsletter p.sml {
          font-size: 16px;
          line-height: 26px; }
      #footer .footer-social-wrap #social-links {
        grid-column: 2 / span 8;
        grid-row: 1;
        gap: 0 12px;
        grid-template-columns: repeat(8, 1fr); }
        #footer .footer-social-wrap #social-links h4 {
          text-transform: uppercase;
          font-size: 24px;
          line-height: 32px;
          margin: 0 0 12px 0 !important; }
        #footer .footer-social-wrap #social-links svg {
          width: 20px;
          height: 21px;
          margin-right: 12px; }
        #footer .footer-social-wrap #social-links .title {
          grid-column: 1 / span 4;
          grid-row: 1 / span 1; }
        #footer .footer-social-wrap #social-links .gabe.social {
          grid-column: 5 / span 2;
          grid-row: 1 / span 2; }
        #footer .footer-social-wrap #social-links .tycho.social {
          grid-column: 7 / span 2;
          grid-row: 1 / span 2; }
        #footer .footer-social-wrap #social-links .pa.social {
          grid-column: 1 / span 4;
          grid-row: 2 / span 1;
          gap: 0 12px;
          grid-template-columns: repeat(2, 1fr); }
    #footer .footer-nav-wrap {
      gap: 0 12px;
      grid-template-columns: 24px repeat(12, 1fr) 24px; }
      #footer .footer-nav-wrap .logo-penny-arcade {
        grid-column: 2 / span 2; }
      #footer .footer-nav-wrap #copyright {
        grid-column: 4 / span 7;
        font-size: 18px;
        line-height: 20px; }
      #footer .footer-nav-wrap #footer-nav {
        grid-column: 4 / span 7;
        line-height: 40px; }
      #footer .footer-nav-wrap:after {
        left: 75%; }
  #main.no-news #sidebar {
    grid-template-columns: repeat(3, 1fr); }
    #main.no-news #sidebar > div.random-comic {
      grid-column: auto;
      text-align: left;
      justify-self: end; }
    #main.no-news #sidebar .comic-remix {
      justify-self: center; } }

/*---------------*/
/* XXL - Magenta */
/*---------------*/
@media only screen and (min-width: 1439px) {
  body #main.home-page #news,
  body #main.comic-page #news,
  body #main.stories-comic-page #news,
  body #main.news-post-page #news {
    gap: 60px 24px;
    grid-template-columns: repeat(8, 1fr); }
    body #main.home-page #news .content,
    body #main.home-page #news .ad,
    body #main.comic-page #news .content,
    body #main.comic-page #news .ad,
    body #main.stories-comic-page #news .content,
    body #main.stories-comic-page #news .ad,
    body #main.news-post-page #news .content,
    body #main.news-post-page #news .ad {
      grid-column: span 8; }
    body #main.home-page #news .more-news,
    body #main.home-page #news .replies,
    body #main.comic-page #news .more-news,
    body #main.comic-page #news .replies,
    body #main.stories-comic-page #news .more-news,
    body #main.stories-comic-page #news .replies,
    body #main.news-post-page #news .more-news,
    body #main.news-post-page #news .replies {
      grid-column: 3 / span 6; }
    body #main.home-page #news .content, body #main.home-page #news .content.featured,
    body #main.comic-page #news .content,
    body #main.comic-page #news .content.featured,
    body #main.stories-comic-page #news .content,
    body #main.stories-comic-page #news .content.featured,
    body #main.news-post-page #news .content,
    body #main.news-post-page #news .content.featured {
      gap: 0 24px;
      grid-template-columns: repeat(8, 1fr); }
  body #stories .featured .post-text p,
  body #about .about p,
  body #news .featured .post-text p {
    font-size: 24px;
    line-height: 40px; }
  body #video .featured header h1 {
    font-size: 56px;
    line-height: 64px; }
  body #main.home-page #news .content h2 {
    font-size: 64px;
    line-height: 72px; }
  body .content header h1, body .content.featured header h1, body .content.featured header h2, body .search-form header h1, body .search-form.featured header h1, body .search-form.featured header h2, body #search header h1, body #search.featured header h1, body #search.featured header h2, body #about header h1, body #about.featured header h1, body #about.featured header h2, body #comic.remix header h1, body #comic.remix.featured header h1, body #comic.remix.featured header h2 {
    font-size: 64px;
    line-height: 72px; }
  body .content header h2, body .content .search-term h2, body .content .boys h2, body .search-form header h2, body .search-form .search-term h2, body .search-form .boys h2, body #search header h2, body #search .search-term h2, body #search .boys h2, body #about header h2, body #about .search-term h2, body #about .boys h2, body #comic.remix header h2, body #comic.remix .search-term h2, body #comic.remix .boys h2 {
    font-size: 40px;
    line-height: 52px; }
  body .content .details, body .search-form .details, body #search .details, body #about .details, body #comic.remix .details {
    font-size: 24px;
    line-height: 36px; }
  body .content.featured .pagination .orange-btn, body .search-form.featured .pagination .orange-btn, body #search.featured .pagination .orange-btn, body #about.featured .pagination .orange-btn, body #comic.remix.featured .pagination .orange-btn {
    padding: 12px 24px; }
  body .content.featured .pagination .comic-option-btns, body .search-form.featured .pagination .comic-option-btns, body #search.featured .pagination .comic-option-btns, body #about.featured .pagination .comic-option-btns, body #comic.remix.featured .pagination .comic-option-btns {
    max-width: 720px !important; }
  #header #nav-desktop .menu-main li a span {
    padding: 0 12px; }
  #main {
    gap: 0 24px;
    grid-template-columns: 48px repeat(12, 1fr) 48px; }
    #main #news, #main #podcast-episode {
      grid-column: 2 / span 8; }
    #main #sidebar {
      grid-column: 11 / span 3; }
    #main #news.paginated .posts {
      gap: 32px 24px;
      padding-top: 56px; }
    #main #news.paginated .content {
      gap: 0 24px; }
      #main #news.paginated .content.featured .post-text {
        padding-bottom: 48px; }
      #main #news.paginated .content.featured .details {
        font-size: 24px;
        line-height: 36px; }
  .search-form {
    grid-template-columns: 72px auto 72px; }
  #archive .topics ul {
    gap: 48px 24px; }
  .archive-features {
    gap: 32px 64px; }
    .archive-features .browse-by-year ul {
      grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
      gap: 16px; }
  #about {
    gap: 48px 24px; }
  #podcasts .featured, #podcast-episode .featured, #stories .featured, #video .featured {
    gap: 0 24px; }
    #podcasts .featured .schedule svg, #podcast-episode .featured .schedule svg, #stories .featured .schedule svg, #video .featured .schedule svg {
      margin-top: 6px; }
    #podcasts .featured .details, #podcast-episode .featured .details, #stories .featured .details, #video .featured .details {
      width: auto; }
  .post-nav {
    gap: 0 24px; }
  #footer .footer-social-wrap {
    grid-template-columns: 48px repeat(12, 1fr) 48px;
    gap: 0 24px; }
    #footer .footer-social-wrap #social-links, #footer .footer-social-wrap #social-links .pa.social {
      gap: 0 24px; }
  #footer .footer-nav-wrap {
    grid-template-columns: 48px repeat(12, 1fr) 48px;
    gap: 0 24px; }
    #footer .footer-nav-wrap #footer-nav {
      margin: 0; } }

/*-------------------*/
/* Oversized - White */
/*-------------------*/
@media only screen and (min-width: 1600px) {
  #stories .archive,
  #podcasts .episodes,
  #video .shows,
  #video .archive {
    grid-template-columns: repeat(3, 1fr); }
  body #about .work .related-comic p {
    font-size: 22px;
    line-height: 28px; }
  body #main.home-page #news,
  body #main.comic-page #news,
  body #main.stories-comic-page #news,
  body #main.news-post-page #news {
    gap: 60px 32px; }
    body #main.home-page #news .content,
    body #main.home-page #news .content.featured,
    body #main.comic-page #news .content,
    body #main.comic-page #news .content.featured,
    body #main.stories-comic-page #news .content,
    body #main.stories-comic-page #news .content.featured,
    body #main.news-post-page #news .content,
    body #main.news-post-page #news .content.featured {
      gap: 0 32px; }
    body #main.home-page #news .content.featured .avatar .reply-bubble,
    body #main.comic-page #news .content.featured .avatar .reply-bubble,
    body #main.stories-comic-page #news .content.featured .avatar .reply-bubble,
    body #main.news-post-page #news .content.featured .avatar .reply-bubble {
      width: 64px;
      height: 64px;
      padding-top: 4px; }
    body #main.home-page #news .content .avatar .border,
    body #main.comic-page #news .content .avatar .border,
    body #main.stories-comic-page #news .content .avatar .border,
    body #main.news-post-page #news .content .avatar .border {
      width: 100%;
      max-width: 244px; }
    body #main.home-page #news .content .avatar .reply-bubble,
    body #main.comic-page #news .content .avatar .reply-bubble,
    body #main.stories-comic-page #news .content .avatar .reply-bubble,
    body #main.news-post-page #news .content .avatar .reply-bubble {
      width: 64px;
      height: 64px;
      padding-top: 4px; }
  #header #nav-desktop .menu-main,
  #header #nav-desktop .nav-wrap {
    padding: 0 calc(4vw + 32px); }
  .related-comic .img {
    max-height: 224px; }
  #main {
    grid-template-columns: 6vw repeat(12, 1fr) 6vw;
    gap: 0 32px; }
    #main #search {
      gap: 0 32px; }
    #main #sidebar {
      grid-column: 11 / span 3;
      max-width: 100%; }
    #main #news.paginated {
      gap: 0 32px; }
      #main #news.paginated .content {
        gap: 0 32px; }
      #main #news.paginated .posts {
        gap: 32px 32px; }
      #main #news.paginated .content.featured .avatar .border {
        width: 100%;
        max-width: 244px; }
      #main #news.paginated .content.featured .avatar .reply-bubble {
        width: 64px;
        height: 64px;
        padding-top: 4px; }
    #main #latest-comics {
      gap: 16px;
      padding: 16px 16px 0 16px;
      grid: auto/4vw repeat(4, 1fr) 4vw; }
      #main #latest-comics > * {
        grid-row: 1; }
      #main #latest-comics header {
        grid-column: 2;
        margin-bottom: 30px;
        padding-right: 16px; }
      #main #latest-comics .comics {
        height: 224px; }
      #main #latest-comics .comic-1 {
        grid-column: 3; }
      #main #latest-comics .comic-2 {
        grid-column: 4; }
      #main #latest-comics .comic-3 {
        grid-column: 5; }
  .related-posts ul {
    gap: 28px 32px; }
  #search .results {
    gap: 24px 32px; }
  .search-form {
    grid-template-columns: calc(6vw + 32px) auto calc(6vw + 32px); }
  #archive .topics ul {
    gap: 48px 32px; }
  .archive-features {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 32px; }
    .archive-features .browse-by-year ul {
      grid-template-columns: repeat(auto-fit, minmax(192px, 1fr)); }
  #about {
    gap: 48px 32px; }
    #about .about {
      gap: 0 32px;
      grid-template-columns: repeat(12, 1fr); }
      #about .about header {
        grid-column: 1 / span 7; }
      #about .about section {
        grid-column: 1 / span 7; }
      #about .about .logo-penny-arcade {
        grid-column: 9 / span 3;
        width: 272px; }
    #about .boys section {
      grid-template-columns: repeat(7, 1fr);
      gap: 0 32px; }
      #about .boys section .avatar {
        grid-column: 1 / span 2;
        width: 100%;
        max-width: 224px; }
      #about .boys section h2, #about .boys section p {
        grid-column: 3 / span 5; }
    #about .contact p {
      margin-left: 0; }
  #podcasts .featured, #podcast-episode .featured, #stories .featured, #video .featured {
    gap: 0 32px; }
  #podcasts .archive, #podcasts .episodes, #video .archive, #video .episodes, #stories .archive, #stories .episodes {
    gap: 28px 32px; }
  #podcasts .shows, #video .shows, #stories .shows {
    gap: 32px 32px; }
  .post-nav {
    gap: 0 32px; }
  #footer .footer-social-wrap,
  #footer .footer-nav-wrap {
    grid-template-columns: 6vw repeat(12, 1fr) 6vw;
    gap: 0 32px; }
    #footer .footer-social-wrap #social-links, #footer .footer-social-wrap #social-links .pa.social,
    #footer .footer-nav-wrap #social-links,
    #footer .footer-nav-wrap #social-links .pa.social {
      gap: 0 32px; } }

/*-----------------*/
/* Ultra Oversized */
/*-----------------*/
@media only screen and (min-width: 1900px) {
  #stories .archive,
  #stories .shows,
  #podcasts .episodes,
  #podcasts .shows,
  #video .shows,
  #video .archive {
    grid-template-columns: repeat(4, 1fr) !important; } }

/*----------------*/
/* Reduced Motion */
/*----------------*/
@media screen and (prefers-reduced-motion: reduce) {
  *, *:after, *:before {
    transition: none !important;
    animation: none !important;
    animation-play-state: paused !important; }
  .orange-btn:hover, .orange-btn:focus,
  .post-nav li a:hover,
  .post-nav li a:focus {
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.4), 0 0 0 4px #818FA6 !important; }
  .related-comic:hover .img, .related-comic:focus .img {
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.4), 0 0 0 4px #818FA6 !important; }
    .related-comic:hover .img img, .related-comic:focus .img img {
      transform: none !important; }
  .news-post-page .post-body .related-comic:hover, .news-post-page .post-body .related-comic:focus, #about .work .related-comic:hover, #about .work .related-comic:focus {
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.4), 0 0 0 4px #818FA6 !important; }
  .comic-remix .img-comic-remix:hover, .comic-remix .img-comic-remix:focus {
    box-shadow: inset 0 0 0 6px #ffffff, inset 6px 0 0 6px #ffffff, 0px 3px 6px rgba(0, 0, 0, 0.4), 0 0 0 4px #818FA6 !important; }
    .comic-remix .img-comic-remix:hover .panels, .comic-remix .img-comic-remix:focus .panels {
      font-size: 90px;
      line-height: 170px; }
  #comic.remix .panel-lock:hover:after, #comic.remix .panel-lock:focus:after {
    background-size: 75px; }
  #comic.remix .panel-lock.locked:hover:after, #comic.remix .panel-lock.locked:focus:after {
    background-color: rgba(26, 10, 0, 0.85); }
  #latest-comics .comics:hover {
    background: #010a1a !important;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.5), 0 0 0 6px #ff6200 !important; }
    #latest-comics .comics:hover img {
      transform: none !important;
      opacity: .5;
      background: #010a1a !important; }
  #latest-comics .comics a:focus {
    border: none;
    background: #010a1a !important; }
    #latest-comics .comics a:focus img {
      opacity: .5; } }

@media only screen and (prefers-reduced-motion: reduce) and (min-width: 720px) {
  #latest-comics .comics:hover {
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.5), 0 0 0 8px #ff6200 !important; } }

@media screen and (prefers-reduced-motion: reduce) {
  #archive .topics ul li a:hover .avatar .border, #archive .topics ul li a:focus .avatar .border {
    box-shadow: none !important;
    background: #818FA6 !important; }
  #archive .topics ul li a:hover .avatar img, #archive .topics ul li a:focus .avatar img {
    transform: none !important; }
  .hero-img * {
    transform: none !important; }
  #main.podcasts-page .hero-img:hover, #main.podcasts-page .hero-img:focus,
  #main.video-page .hero-img:hover,
  #main.video-page .hero-img:focus,
  #main.stories-page .hero-img:hover,
  #main.stories-page .hero-img:focus,
  #main.stories-universe-page .archive .hero-img:hover,
  #main.stories-universe-page .archive .hero-img:focus {
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.4), 0 0 0 4px #818FA6 !important; }
  #main.about-page .stories a:hover .hero-img, #main.about-page .stories a:focus .hero-img {
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.4), 0 0 0 4px #818FA6 !important; }
  .reply-bubble:hover, .reply-bubble:focus {
    box-shadow: none !important;
    border-color: #ff6200 !important;
    background: #ff6200 !important;
    color: white !important; }
  .post-text a:hover, .post-text a:focus, .about a:hover, .about a:focus {
    box-shadow: 0 0 0 2px #010a1a, 0 0 0 4px #818FA6 !important; }
  h1 a:focus, h2 a:focus, h3 a:focus, h4 a:focus, h5 a:focus, h6 a:focus,
  .details a:focus,
  .tags a:focus {
    box-shadow: 0 0 0 2px #010a1a, 0 0 0 4px #818FA6 !important; }
  .replies section div p a:hover, .replies section div p a:focus {
    box-shadow: 0 0 0 2px #141E2F, 0 0 0 4px #818FA6 !important; }
  input[type="search"],
  input[type="text"],
  input[type="email"],
  textarea {
    box-shadow: inset 0 0 0 0 #818FA6 !important; }
    input[type="search"]:focus,
    input[type="text"]:focus,
    input[type="email"]:focus,
    textarea:focus {
      box-shadow: inset 0 0 0 3px #818FA6 !important; }
  .checkbox input:focus + .checkmark,
  .checkbox:hover input ~ .checkmark {
    box-shadow: 0px 0px 0px 2px #818FA6 !important; }
  #nav-desktop .menu-display .btn-font-settings:hover svg, #nav-desktop .menu-display .btn-font-settings:focus svg {
    box-shadow: 0 0 0 2px #031f4d, 0 0 0 4px #818FA6 !important; }
  .btn-display-mode:hover, .btn-display-mode:focus {
    box-shadow: 0 0 0 2px #031f4d, 0 0 0 4px #818FA6 !important; } }