#pac-common-header {
  background-color: hsl(138, 36%, 95%);
  color: hsl(138, 0%, 33%);
}
#pac-common-navigation {
  background-color: hsl(185, 57%, 35%);
}
#pac-common-navigation a:hover,
#pac-common-navigation button:hover,
#pac-common-navigation button.open,
#pac-common-navigation .section .dropdown {
  background-color: hsl(185, 62%, 40%);
}
#pac-common-navigation .section .dropdown a:hover,
#pac-common-navigation .section .dropdown button:hover {
  background-color: hsl(185, 72%, 45%);
}
#pac-common-navigation #pac-repo-common-nav-sorting-properties > ul .dropdown {
  background-color: hsl(185, 57%, 35%);
}
#pac-common-navigation
  #pac-repo-common-nav-sorting-properties
  > ul
  .dropdown
  a:hover,
#pac-common-navigation
  #pac-repo-common-nav-sorting-properties
  > ul
  .dropdown
  button:hover {
  background-color: hsl(185, 62%, 40%);
}
#pac-common-header .header-top .logo-frame svg .small-icons {
  opacity: 0;
}
#pac-common-header .header-top h1.site-title {
  font-size: 1.5625em; /* 25px */
}
#pac-common-header .header-top h1.site-title .wordmark .wl {
  font-weight: 300;
  letter-spacing: 0.048387em;
  display: block;
}
#pac-common-header .header-top h1.site-title .wordmark .repo {
  font-weight: 600;
  display: block;
  color: hsl(185, 57%, 35%);
}
#pac-common-header .header-top h1.site-title .under-development {
  top: -1em;
}
#pac-common-header .header-top .tagline {
  display: none;
}
@media only screen and (min-width: 700px) {
  #home-page #pac-common-header .header-top {
    font-size: 1.25em; /* 20px */
    padding: 0.5em 0;
  }
  #home-page #pac-common-header .header-top .logo {
    width: 8.85em;
    height: 8.85em;
  }
  #home-page #pac-common-header .header-top .logo-frame {
    padding-right: 2.5em;
  }
  #home-page #pac-common-header .header-top .logo-frame svg .small-icons {
    opacity: 1;
  }
  #home-page #pac-common-header .header-top h1.site-title {
    font-size: 1.8em; /* 36px */
  }
  #home-page #pac-common-header .header-top .tagline {
    display: block;
    font-size: 0.75em;
    margin: 0.2em 0;
  }
}
#pac-auth-menu a.sign-in-button {
  border-color: hsl(180, 30%, 64%);
  color: hsl(180, 30%, 64%);
}
#pac-auth-menu a.sign-in-button:hover {
  background-color: hsl(180, 50%, 50%);
}
#pac-auth-menu.signed-in {
  background: hsl(180, 30%, 64%);
}

#results-page .resources-list .entry .release-date {
  margin-top: -0.1875em;
}
@media only screen and (min-width: 480px) {
  #results-page .resources-list .entry {
    display: table;
    width: 100%;
  }
  #results-page .resources-list .entry > .col {
    display: table-cell;
    vertical-align: middle;
  }
  #results-page .resources-list .entry > .img {
    width: 5.375em;
  }
  #results-page .resources-list .entry .hero-image {
    width: 4em;
    height: 4em;
    border: 1px solid #ccc;
    background-position: center;
    background-size: cover;
  }
}

body#shingle main.shingle-content #nbExampleNotebook {
  margin-left: -2.5em;
}
main .hero-image-frame img.hero-image {
  display: block;
  margin: 0 auto;
  max-height: 7.5em;
  max-width: 7.5em;
  padding: 0.5em 0;
}
#shingle .col.main {
  padding-top: 5em;
}

#shingle #page-title-frame .shingle-header .title-copy-frame {
  font-size: 0.8em;
}
@media only screen and (min-width: 540px) {
  main.shingle-content .page-title {
    width: unset;
  }
  #shingle #page-title-frame .shingle-header {
    display: FLEX;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  #shingle #page-title-frame .shingle-header .title-copy-frame {
    width: calc(100% - 9rem);
  }
  main .hero-image-frame img.hero-image {
    padding: 0.5em 0;
  }
}
@media only screen and (min-width: 644px) {
  #shingle #page-title-frame .shingle-header .title-copy-frame {
    font-size: 1em;
  }
}

#rate-as-good-frame {
  margin-top: -1.5em;
}
#rate-as-good-frame p.counter {
  margin: 0;
}
@media only screen and (min-width: 1260px) {
  #rate-as-good-frame {
    position: unset;
    display: block;
    text-align: left;
  }
  #rate-as-good-frame button.star-frame,
  #rate-as-good-frame p.counter {
    display: inline-block;
    margin: 0;
  }
}

#shingle .notebook-dropdown.toggle {
  color: hsl(185, 57%, 35%);
}
#shingle .notebook-dropdown.list {
  border: 1px solid hsl(185, 57%, 35%);
}
#shingle .notebook-dropdown.list:after {
  border-bottom-color: hsl(185, 57%, 35%);
}
#shingle .notebook-dropdown.list:before {
  border-bottom-color: hsl(185, 57%, 35%);
}
#shingle .notebook-dropdown.list li {
  border-top: 1px solid hsl(185, 57%, 35%);
}
#shingle .notebook-dropdown.list li a {
  color: hsl(185, 57%, 35%);
}
#shingle .notebook-dropdown.list li a:hover {
  background-color: hsl(185, 57%, 35%);
}

main h1 {
  font-size: 2.625em;
  font-weight: 600;
  color: #333;
}
main p.lead {
  font-style: italic;
  font-size: 1.0625em;
  margin-top: 0.58823529em;
}

main.gallery-content .wrap {
  max-width: 67em;
}
main.gallery-content .page-description {
  font-size: 1.25em;
  font-weight: 300;
  line-height: 1.45;
}
main.gallery-content .section-description {
  font-size: 1em;
  font-weight: 300;
  line-height: 1.25;
  margin-top: -1.25em;
  margin-bottom: 1.5em;
}
main.gallery-content .main-page-sections {
  margin-bottom: 5em;
}
main.gallery-content .main-page-sections section {
  border-top: 1px solid #ddd;
  position: relative;
}
main.gallery-content .main-page-sections section h2 {
  font-size: 1.5625em;
  line-height: 1.2;
  text-transform: none;
  color: #333;
  font-weight: 400;
  margin: 1em 0;
}
main.gallery-content .main-page-sections section p.see-more-frame {
  font-size: 0.9375em;
  margin-top: -1.33333333em;
  margin-bottom: 1.66666667em;
}
@media only screen and (min-width: 800px) {
  main.gallery-content .main-page-sections section h2 {
    width: calc(100% - 6em);
  }
  main.gallery-content .main-page-sections section p.see-more-frame {
    position: absolute;
    top: 0;
    right: 0;
    margin: 1em 0;
  }
}
main.gallery-content .gallery-resource-list .resource-tile {
  display: inline-block;
  width: 21em;
  vertical-align: top;
  margin-right: 1em;
  margin-bottom: 3em;
}
main.gallery-content .gallery-resource-list .resource-tile p {
  font-size: 1em;
  color: #474747;
  margin: 0;
}
main.gallery-content .gallery-resource-list .resource-tile h3 {
  font-size: 1.25em;
  line-height: 1.2;
  color: hsl(185, 57%, 35%);
  text-transform: none;
  margin: 0.6em 0 0.25em;
}
main.gallery-content .gallery-resource-list .resource-tile a:hover h3 {
  color: hsl(185, 57%, 20%);
}
main.gallery-content
  .gallery-resource-list
  .resource-tile
  .hero-image-frame
  .hero-image {
  padding: 0;
  max-width: unset;
  max-height: unset;
  width: 15.625em;
  height: 8.4375em;
  margin: 0;
  border: 1px solid #ccc;
}
main.gallery-content
  .gallery-resource-list
  .resource-tile
  a:hover
  .hero-image-frame
  .hero-image {
  border-color: hsl(30, 100%, 50%);
}
main.gallery-content footer {
  background: #22919c;
  color: #fff;
  padding: 1.25em 0 4em;
}
main.gallery-content footer .section-frame {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
  column-gap: 6.25%;
}
main.gallery-content footer section {
  border-top: 1px solid #60a9af;
  padding: 0.625em 0 1em;
}
main.gallery-content footer h2,
main.gallery-content footer h3 {
  margin: 0;
  font-size: 1em;
}
main.gallery-content footer h2 {
  text-transform: none;
  font-weight: 300;
  font-size: 1.875em;
  margin: 1em 0;
}
main.gallery-content footer h3 {
  text-transform: uppercase;
  font-size: 1.125em;
  color: #9ee;
}
main.gallery-content footer h3 svg {
  fill: #fff;
  width: 1.61111111em;
  height: 1.61111111em;
  margin-right: 0.27777778em;
}
main.gallery-content footer h3 .text {
  display: inline-block;
  vertical-align: middle;
}
main.gallery-content footer ul {
  color: #9ee;
  list-style: square;
  padding-left: 2em;
  font-size: 1em;
  margin: 0;
}
main.gallery-content footer ul li {
  margin: 0.75em 0;
}
main.gallery-content footer ul a {
  color: #fff;
}
main.gallery-content footer ul a:hover {
  color: #9ee;
}

body#home-page {
  background: hsl(185, 0%, 95%);
}
#results-page .wrap {
  padding: 0 10vw;
  max-width: 100%;
}

#results-page .grid .tile {
  background: #fff;
  border: 1px solid hsl(185, 0%, 80%);
  break-inside: avoid;
  padding: 10px;
}
#results-page .grid a:hover .tile {
  outline: 2px solid hsl(30, 100%, 50%);
}
#results-page .grid a .tile img.hero-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  margin-bottom: 0.9375em;
}
#results-page .grid a .tile h3.name {
  font-size: 1.25em;
  line-height: 1.2;
  color: hsl(185, 57%, 35%);
  margin: 0;
}
#results-page .grid a:hover .tile h3.name {
  color: hsl(185, 57%, 20%);
}
#results-page .grid a .tile p.description {
  font-size: 0.75em;
  line-height: 1.33333333;
  color: hsl(185, 0%, 50%);
  margin: 0.5em 0;
}

body#home-page #results-page h2 {
  border: none;
  font-size: 1.375em;
  line-height: 1;
  font-weight: 300;
  text-transform: none;
  padding: 0 0.4545454545em;
  color: #555;
  margin: 0;
  margin-top: -0.18181818em;
  margin-bottom: 0.68181818em;
}
#hp-categories {
  font-size: 1em;
  line-height: 1.72222222em;
  padding: 0 10px;
  margin: 0.83333333em 0 2.83333333em;
}
@media only screen and (min-width: 720px) {
  #hp-categories {
    font-size: 1.125em;
  }
}
#hp-categories li {
  display: inline-block;
  vertical-align: middle;
}
#hp-categories li::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  background: #bbb;
  width: 0.5em;
  height: 0.5em;
  margin: 0 1em;
}
#hp-categories li:last-child::after {
  display: none;
}
#hp-categories a {
  color: hsl(185, 57%, 35%);
}
#hp-categories a:hover {
  color: hsl(185, 57%, 20%);
}
#hp-category-show-hide-button {
  font-size: 0.77777778em;
  line-height: 1;
  text-transform: uppercase;
  padding: 2px 0.78571429em;
  background: none;
  color: hsl(185, 57%, 35%);
  border: 1px solid hsl(185, 57%, 35%);
  border-radius: 0.21428571em;
}
#hp-category-show-hide-button:hover {
  color: hsl(185, 57%, 20%);
  border-color: hsl(185, 57%, 20%);
}
#hp-category-show-hide-button svg {
  display: inline-block;
  vertical-align: 1px;
  fill: hsl(185, 57%, 35%);
}
#hp-category-show-hide-button:hover svg {
  fill: hsl(185, 57%, 20%);
}

#top-frame {
  position: fixed;
  bottom: 2em;
  right: 2em;
  text-align: center;
}
#top-frame.hide {
  display: none;
  opacity: 0;
}
#top-frame a {
  color: hsl(30deg 0% 0% / 20%);
}
#top-frame a svg .bg {
  fill: hsl(30deg 0% 0% / 20%);
}
#top-frame a:hover svg .bg {
  fill: hsl(30, 100%, 50%);
}
#top-frame span {
  display: block;
}

#hp-loading-frame {
  margin: 5% auto;
  text-align: center;
}
#hp-loading-frame svg {
  width: 20%;
  display: block;
  margin: 0 auto;
}
#hp-loading-frame p {
  padding: 0 20%;
  font-size: 1.25em;
  line-height: 1.25;
}
#hp-loading-frame .ex-load-lines {
  fill: none;
  stroke: hsl(0, 0%, 85%);
}
#hp-loading-frame .ex-load-circle-dark {
  fill: hsl(0, 0%, 80%);
}
#hp-loading-frame .med-circle {
  fill: hsl(0, 0%, 85%);
}
#hp-loading-frame .ex-load-circle-lt {
  fill: hsl(0, 0%, 90%);
}
#hp-loading-frame svg.hp-loading .ex-load-frame {
  opacity: 0;
  transform: scale(0.9);
  transform-origin: center;
  animation: 10s ease 1s forwards ex-load-fade;
}
#hp-loading-frame svg.hp-loading .ex-load-bg {
  transform-origin: center;
  animation: 60s linear 0s infinite ex-load-spin;
}
@keyframes ex-load-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes ex-load-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

main#results-page header.browse-by-category {
    margin-bottom: 3.75em;
}

#shingle main #cc-license-frame {
  margin: 2em 0 -2em;
}
#shingle main #cc-license-frame p {
  font-size: 1em;
  margin: 0;
}
#shingle main #cc-license-frame svg {
  width: 1.125em;
  height: 1.125em;
  fill: #bbb;
}

footer#bottom {
  text-align: left;
}
footer#bottom ul {
  margin-left: 0;
}
footer#bottom li {
  display: block;
  margin: 0.3125em 0;
}
footer#bottom .feedback svg {
  width: 1.375em;
  fill: #aaa;
}
footer#bottom .community svg {
  width: 1.5625em;
}
footer#bottom {
  position: relative;
}
footer#bottom li.top {
  position: absolute;
  top: 0.3125em;
  right: 0;
  margin-right: 0;
}
footer#bottom a:hover {
  color: hsl(185, 57%, 35%);
}
footer#bottom a:hover svg {
  fill: hsl(185, 57%, 35%);
}

main.contact p {
  font-size: 1.0625em;
  line-height: 1.47058824;
}
main form.contact {
  margin: 2em 0 4em;
}
@media only screen and (min-width: 480px) {
  main form.contact .row {
    margin: -1em 0;
  }
  main form.contact .row .line.half {
    display: inline-block;
    width: 48%;
    margin-right: 2%;
    vertical-align: top;
  }
  main form.contact .row .line.half + .line.half {
    margin-right: 0%;
    margin-left: 2%;
  }
}
main form.contact p {
  font-size: 1em;
}
main form.contact .line.text label {
  display: inline-block;
  padding: 0.3125em 0;
}
main form.contact .line.text input,
main form.contact .line.text textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 0.375em;
  border-radius: 0.25em;
  border: 0.0625em solid #ccc;
}
main form.contact .line.text input[type="file"] {
  width: auto;
  border: 0;
  padding: 0;
}
main form.contact .line.text input.invalid,
main form.contact .line.text textarea.invalid {
  border-color: #d10;
}
main form.contact .line.text input:disabled,
main form.contact .line.text input.read-only {
  color: #bbb;
  background: #fff;
  border: 0.0625em solid #ccc;
}
main form.contact .line.text small {
  font-size: 0.875em;
  font-weight: 300;
  position: relative;
  top: -0.5em;
}
main form.contact .line.submit {
  padding: 1em 0;
}
main form.contact button {
  background: hsl(185, 57%, 35%);
  color: #fff;
  border: 0;
  padding: 0.5em 2em;
  border-radius: 0.25em;
}
main form.contact button:hover {
  background: hsl(185, 57%, 20%);
}
main form.contact button:disabled {
  opacity: 0.3;
}
main form.contact .error {
  display: block;
  color: #d10;
  font-size: 0.875em;
  font-weight: 400;
  margin-top: 0.285714em;
}
main form.contact .error a {
  text-decoration: underline;
  color: inherit;
}
main form.contact .error:before {
  content: "";
  display: inline-block;
  height: 1em;
  width: 1em;
  vertical-align: -0.142857em;
  margin-right: 0.357143em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle fill='%23d10' cx='7' cy='7' r='7'/%3E%3Cg fill='%23fff'%3E%3Cpath class='cls-2' d='M6,3H8L7.7,8H6.3Z'/%3E%3Ccircle class='cls-3' cx='7' cy='10' r='1'/%3E%3C/g%3E%3C/svg%3E");
}
main.contact p.line.success {
  max-width: 18em;
  margin: 0 auto;
  margin-top: -1.47058824em;
}
main.contact p.line.success + p {
  margin-top: 1.47058824em;
  margin-bottom: 7em;
}
main.contact p.line.success a.button {
  font-size: 0.941176em;
  line-height: 1;
  background: #fff;
  color: hsl(185, 57%, 35%);
  border: 1px solid hsl(185, 57%, 35%);
  padding: 0.5em 1em;
  border-radius: 0.25em;
}
main.contact p.line.alternate {
  margin-top: -1.47058824em;
  margin-bottom: 4em;
  font-weight: 300;
}
main.contact p.line.alternate a {
  color: #7d7d7d;
}
main.contact p.line.alternate a:hover {
  color: hsl(185, 57%, 35%);
}
main.contact p.line.success a.button:hover {
  background-color: hsl(185, 57%, 35%);
  color: #fff;
}
main.contact .publisher-autofill-info {
  margin: -0.375em 0 2.875em;
}
main.contact .publisher-autofill-info ul {
  font-size: 0.9375em; /* 15px */
  border: 0.066667em solid #ccc;
  background: #f2f2f2;
  padding: 1.133333em;
  line-height: 1.6;
  color: #7d7d7d;
  margin: 0;
}
main.contact .publisher-autofill-info ul .property {
  color: #333;
}
main.contact .publisher-autofill-info p {
  font-size: 0.8125em; /* 13px */
  color: #7d7d7d;
  margin: 1em 0;
  font-style: italic;
}