@charset "UTF-8";
/*-------------------------------------------*/
/* CSS Created by Penny Arcade - 10-02-2024 -*/
/* 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 rgb(255, 255, 255);
}
.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 rgb(255, 255, 255);
}
.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), rgba(0, 0, 0, 0) 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 .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 .twitch-live #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 .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 rgb(255, 255, 255);
}
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 rgb(255, 255, 255);
}
form .admin-input, .replies.reply-form form input[type=text], .site-login form input {
  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, .replies.reply-form form input[type=text]:hover, .site-login form input:hover, form .admin-input:focus, .replies.reply-form form input[type=text]:focus, .site-login form input: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 rgb(255, 255, 255);
  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: 10000000000;
  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: 10000000000;
}
#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), rgba(0, 0, 0, 0) 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 rgb(255, 0, 0);
  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,
.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,
.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,
.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 .twitch-live #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 rgb(255, 0, 0);
  transform: scale(1);
  animation: light-pulse 4s ease-out infinite;
}
.home-page #sidebar .twitch-live #live-now:after,
.twitch-live #live-now:after,
#highlight-reel #live-now:after {
  display: none;
}
.home-page #sidebar .twitch-live #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,
.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,
.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,
.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,
.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,
.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,
.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,
.twitch-live a.txt:hover #live-now,
#highlight-reel a.txt:hover #live-now {
  color: white;
}
.home-page #sidebar .twitch-live .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(280px, 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(320px, 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: 1620px;
  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(1.25 * (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(1.25 * (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(1.25 * (33vw - 20px));
    max-height: min(530px, 37.5vw);
  }
  #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(1.25 * (33vw - 20px));
    max-height: min(530px, 37.5vw);
  }
}
/*------*/
/* 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("../png/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: 41.6666666667vw;
}
.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(288px, 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(328px, 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: 65vw;
  max-height: 320px;
}
#stories .featured .hero-img {
  height: 65vw;
  max-height: 360px;
}
#stories .archive {
  grid-template-columns: repeat(auto-fit, minmax(328px, 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: 41.6666666667vw;
  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("../png/img-kemper%402x.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 Notes */
/*-----------*/
/*

Horizontal Sticky Footer Ad
- span = overlay background-colour (rgba)
- span > span > div = x icon
	- (set padding, background-colour and border-radius to make larger close button)
	- div > svg > g > g > polygon = fill
- concerned about 348px size - close button is barely visible

*/
/*----------*/
/* 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: 0.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 0.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;
  }
  body.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: 14.2857142857vw;
  }
  #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: 20.8333333333vw;
    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: 20.8333333333vw;
    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: 32.5vw;
    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: 14.2857142857vw;
  }
  #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(352px, 1fr));
  }
  #podcasts .episodes {
    grid-template-columns: repeat(auto-fit, minmax(312px, 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("../png/img-kemper%402x.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: 13.8888888889vw;
  }
  .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: 13.8888888889vw;
  }
  .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(384px, 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(352px, 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: 0.5;
    background: #010a1a !important;
  }
  #latest-comics .comics a:focus {
    border: none;
    background: #010a1a !important;
  }
  #latest-comics .comics a:focus img {
    opacity: 0.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;
  }
}