:root {
  --new-menu-bar-color: #30383d;
}

body {
  background-color: #d3d3d3;
}

/* Menu bar and header */
.jw-menu-copy {
  position: -webkit-sticky;
  position: sticky;
  box-sizing: border-box;
  top: -1px;
  z-index: 200;
}

.jw-body .jw-menu-copy .jw-menu {
  background-color: var(--new-menu-bar-color);
}

.jw-body .menu.jw-menu-clone.jw-menu-collapse {
  background-color: var(--new-menu-bar-color);
}

.jw-body .jw-mobile-menu>* {
  background-color: var(--new-menu-bar-color);
}

.jw-body .jw-mobile-menu__button:hover {
  background: #343d43;
}

.jw-body .jw-mobile-menu__button:active,
.jw-mobile-menu__button:focus {
  background: #3b454b;
}

.jw-body .jw-menu-item>.jw-menu-link:hover,
.jw-body .jw-menu-is-hover>.jw-menu-link {
  background: #46525a;
}

.jw-menu-cta .jw-btn--style-border:before {
  background-color: #ffffff;
}

#jw-header-image {
  border-radius: 0 0 10px 10px;
}

.jw-mobile-logo {
  border-radius: 5px;
}

/* Strip pages */
/* - Strips */
.comic-strip {
  width: 100%;
}
/* - Navigation buttons */
.strip-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.strip-nav * {
  text-decoration: none !important;
}

.strip-nav a:has(button.middle) {
  width: 100%;
  margin: 0 10px;
}

.strip-nav button {
  color: white;
  background-color: black;
  border-radius: 20px;
  text-decoration: none !important;
  padding: 10px 20px;
  text-align: center;
  border: none;
  box-sizing: border-box;
  width: 100%;
}

.strip-nav button.unlinked {
  background-color: #cacaca;
}

.strip-nav button:not(.unlinked):hover {
  background-color: #262626;
}

.strip-nav button:is(.last, .next) {
  /*font-weight: bold;*/
}

.strip-nav button span {
  margin: 0 auto;
}

/* GIF share buttons */
.share-button img {
  pointer-events: none;
}

.share-button {
  border: 2px solid white;
  border-radius: 20px;
  color: white !important;
  text-decoration: none !important;
  font-size: large;
  display: block;
  padding: 5px 10px;
  text-align: center;
  background: linear-gradient(to right, black 50%, rgba(0, 0, 0, 0) 50%);
  background-size: 200% 100%;
  background-position: 100% 0%;
  transition: background-position 0.3s linear;
}

.share-button:hover {
  background-position: 0% 0%;
}

.share-button a {
  color: white !important;
  text-decoration: none !important;
}

.share-button:not(:last-of-type) {
  margin-bottom: 2rem;
}

.share-button img {
  margin-right: 0.6rem;
}

.share-button img,
.share-button span {
  vertical-align: middle;
}

/* Form styling */
.jw-element-form-label {
  font-weight: bold !important;
}