:root,
:root[color-mode="light"],
:root[color-mode="dark"] {
    --header-background: #FF1A87;
    --footer-background: #FF1A87;
    --footer-link-color: white;
    --footer-link-color-visited: white;
    --yellow: #F9FF1A;
    --green: #1AFF92;
    --blue: #201AFF;
}

body {
  overflow-x: visible;
}

.last-update {
  font-size: 12px;
}

.gdoc-header {
  border-bottom: .2em solid #13181B;
}

.gdoc-brand__img {
  width: 5rem;
  height: 4rem;
}

.gdoc-brand__title {
  font-weight: 900;
}

.gdoc-page {
  min-width: 19rem;
}

h1 {
  margin-bottom: 1em;
}

hr {
  margin: 2.5em 0;
}

.gdoc-footer__link {
  text-decoration: underline;
}

.gdoc-markdown .table-wrap table:not(.lntable) tr th, 
.gdoc-markdown .table-wrap table:not(.lntable) tr td {
  padding: 0 1em;
}

.gdoc-nav nav {
  position: sticky;
  top: 0;
}

.gist .gist-data {
  height: 400px;
}

.version-badge {
  margin: 0 5px;
  padding: 2px 8px;
  font-size: 15px;
  border-radius: 0.5em;
  color: white;
}

a.version-badge:visited {
  color: #ced3d8;
}

.version-badge.xcode13 {
  background: var(--blue);
  color: #ced3d8;
}

.version-badge.xcode14 {
  background: var(--green);
  color: #343a40;
}

.version-badge.xcode14:visited {
  color: #343a40;
}

.hovertext {
  position: relative;
}

.hovertext:before {
  content: attr(data-hover);
  visibility: hidden;
  opacity: 0;
  width: 140px;
  background-color: gray;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 8px;
  transition: opacity 1s ease-in-out;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 110%;
  font-size: 0.8em;
}

.hovertext:hover:before {
  opacity: 1;
  visibility: visible;
}

@media screen and (max-width: 45rem) {
  html body .gdoc-nav nav {
    position: relative;
  }
}
@media screen and (max-width: 39rem) {
  html body .gdoc-nav nav {
    position: relative;
  } 
}

.splash code {
  overflow-x: scroll;
}

@media (prefers-color-scheme: light) {
  
  :root,
  :root[color-mode="light"],
  :root[color-mode="dark"] {
      --header-background: #FF1A87;
      --footer-background: #FF1A87;
      --footer-link-color: white;
      --footer-link-color-visited: white;
  }

  .splash .keyword {
    color: #000000;
    font-weight: bold;
  }

  .splash .string {
    color: #dd1144;
  }

  .splash .type {
    color: #000080;
  }

  .splash .call {
    color: #990000;
    font-weight: bold;
  }

  .splash .property {
    color: #000080;
  }

  .splash .number {
    color: #027e83;
  }

  .splash .comment {
    color: #676765;
    font-style: italic;
  }

  .splash .dotAccess {
    color: #445588;
    font-weight: bold;
  }

  .splash .preprocessing {
    color: #676767;
    font-weight: bold;
    font-style: italic;
  }

}

@media (prefers-color-scheme: dark) {
  
  :root,
  :root[color-mode="light"],
  :root[color-mode="dark"] {
      --header-background: #FF1A87;
      --footer-background: #FF1A87;
      --footer-link-color: white;
      --footer-link-color-visited: white;
  }

  .splash .keyword {
    color: #000000;
    font-weight: bold;
  }

  .splash .string {
    color: #dd1144;
  }

  .splash .type {
    color: #000080;
  }

  .splash .call {
    color: #990000;
    font-weight: bold;
  }

  .splash .property {
    color: #000080;
  }

  .splash .number {
    color: #027e83;
  }

  .splash .comment {
    color: #676765;
    font-style: italic;
  }

  .splash .dotAccess {
    color: #445588;
    font-weight: bold;
  }

  .splash .preprocessing {
    color: #676767;
    font-weight: bold;
    font-style: italic;
  }

}

:root[color-mode="light"] .splash .keyword {
  color: #000000;
  font-weight: bold;
}

:root[color-mode="light"] .splash .string {
  color: #dd1144;
}

:root[color-mode="light"] .splash .type {
  color: #000080;
}

:root[color-mode="light"] .splash .call {
  color: #990000;
  font-weight: bold;
}

:root[color-mode="light"] .splash .property {
  color: #000080;
}

:root[color-mode="light"] .splash .number {
  color: #027e83;
}

:root[color-mode="light"] .splash .comment {
  color: #676765;
  font-style: italic;
}

:root[color-mode="light"] .splash .dotAccess {
  color: #445588;
  font-weight: bold;
}

:root[color-mode="light"] .splash .preprocessing {
  color: #676767;
  font-weight: bold;
  font-style: italic;
}

@media (prefers-color-scheme: dark) {
  .splash .keyword {
    color: #ff79c6;
    font-weight: bold;
  }

  .splash .string {
    color: #f1fa8c;
  }

  .splash .type {
    color: #ff79c6;
  }

  .splash .call {
    color: #50fa7b;
    font-weight: bold;
  }

  .splash .property {
    color: #ff79c6;
  }

  .splash .number {
    color: #bd93f9;
  }

  .splash .comment {
    color: #96a6d8;
    font-style: italic;
  }

  .splash .dotAccess {
    color: #8be9fd;
    font-weight: bold;
  }

  .splash .preprocessing {
    color: #ff79c6;
    font-weight: bold;
    font-style: italic;
  }

}