/* all icons from https://fontawesome.com/ */
:root {
  /* START COLOR PALETTE */

  /* viridis solid colors */
  --dark-purple: #440154;
  --purple: #482475;
  --blue: #355f8d;
  --teal: #22a884;
  --green: #7ad151;
  --lime: #bddf26;

  /* utility colors for text, links, etc... */
  --grey: #4f4f4f;
  --logo-blue: #11557c;
  --pale-blue: #869fbb;
  --pale-orange: #ffc9a5;
  --orange: #ffaa70;
  --bold-orange: #ffaa70;
  --light-gray: #e5e5e5;
  --medium-gray: #c4c4c4;
  --black: #000;
  --white: #fff;
  --alpha-white: rgba(255, 255, 255, 0.8);
  /* END COLOR PALETTE */

  /* START BACKGROUND GRADIENTS */

  /* viridis gradients */
  --viridis: linear-gradient(
    90deg,
    #0c0154,
    #482475,
    #414487,
    #355f8d,
    #2a788e,
    #21908d,
    #22a884,
    #7ad151,
    #bddf26
  );
  --viridis-purple: linear-gradient(90deg, #440154, #355f8d);
  --viridis-blue: linear-gradient(90deg, #414487, #21908d);
  --viridis-teal: linear-gradient(90deg, #2a788e, #42be71);
  --viridis-green: linear-gradient(90deg, #42be71, #bddf26);

  --viridis-purple-vert: linear-gradient(180deg, #440154, #355f8d);
  --viridis-purple-invert: linear-gradient(180deg, #355f8d, #440154);
  --viridis-blue-vert: linear-gradient(180deg, #414487, #21908d);
  /* END BACKGROUND GRADIENTS */

  /* FONTS */
  --regular: 400;
  --bold: 700;

  /* Other metrics */
  --border-radius: 4px;
  --shadow: 0px 2px 2px rgba(0, 0, 0, 0.11);
}

/* callout boxes */
.callout {
  border-left: solid 1px var(--pst-color-border);
  border-bottom: solid 1px var(--pst-color-border);
  border-right: solid 1px var(--pst-color-border);
  border-bottom-right-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
  box-shadow: var(--shadow);
  margin-bottom: 20px;
  padding: 28px 20px 20px;
  position: relative;
}

.callout__list {
  display: flex;
  flex-direction: row;
}

.callout__list p{
  margin: 1em 0;
}

.callout::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 8px;
  width: 100%;
  background-color: var(--blue);
}

.callout--purple::before {
  background-image: var(--viridis-purple);
}

.callout--blue::before {
  background-image: var(--viridis-blue);
}

.callout--teal::before {
  background-image: var(--viridis-teal);
}

.callout--green::before {
  background-image: var(--viridis-green);
}

.callout__icon {
  color: var(--pst-color-primary);
  font-size: 2em;
  margin: auto 10px auto 0;
}

.callout > * {
  margin-top: 0;
}
/* offsite links */
a.link--offsite {
  font-size: var(--pst-font-size-h5);
  display: block;
  position: relative;
  left: 0;
  transition: left 0.2s ease-in-out;
}

a.link--offsite::after {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: "\f061";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-left: 10px;
}
/* Rulers */
.rule {
  width: 100%;
  background-color: var(--pst-color-border);
  border: none;
  height: 1px;
  margin-bottom: 0em;
}

.rule--viridis {
  background-image: var(--viridis);
  height: 3px;
  margin-bottom: 0em;
}

/* Quicklinks */
.quicklinks {
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}

.quicklinks a {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 100px;
  font-size: var(--heading-4);
  font-family: var(--heading-font);
}

.quicklinks a, .quicklinks a:visited,
.quicklinks a:hover, .quicklinks a:visited:hover {
  color: var(--default-text);
}

.quicklinks__icon {
  width: 1in;
  display: block;
  margin-bottom: 10px;
}

@media (max-width: 700px) {
  .quicklinks__icon {
    width: 60px;
  }
  .quicklinks a {
    font-size: var(--base-font);
  }
  .quicklinks li {
    margin-bottom: 20px;
  }
}

/* News */
.news {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 2em;
}

.news__item:not(:last-of-type){
  margin-bottom: 2em;
}

.news__item--highlight, .news__item:last-of-type {
  margin-bottom: 40px;
}

.news__item .date, .news__item--highlight .date{
  margin: 1em 0 .5em;
}

.date{
  font-size: small;
}
/* tab switcher */
.tools {
  min-height: 280px;
}

.tabs {
  padding: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  position: relative;
}

.tabs__tab {
  border: none;
  text-align: right;
  line-height: 1em;
  cursor: pointer;
  padding: 0.5em 0;
  background-color: transparent;
  font-family: var(--heading-font);
  color: var(--pst-color-link);
  font-size: var(--heading-4);
  font-weight: var(--bold);
  transition: left 0.2s ease-out;
  position: relative;
  left: 0;
}

.tabs__tab:hover {
  left: 8px;
}

.tabs__content {
  border-top: solid 1px var(--pst-color-border);
  border-bottom: solid 1px var(--pst-color-border);
  border-right: solid 1px var(--pst-color-border);
  flex-grow: 1;
  padding: 20px 40px 20px 50px;
  position: relative;
}

.tabs::before {
  content: "";
  width: 8px;
  height: 100%;
  background-color: var(--dark-purple);
  position: absolute;
  top: 0;
  right: -20px;
  display: block;
  transition: background-color 0.2s ease-in-out;
}

.tabs[data-current-tab="0"]::before {
  background-color: var(--dark-purple);
}

.tabs[data-current-tab="1"]::before {
  background-color: var(--purple);
}

.tabs[data-current-tab="2"]::before {
  background-color: var(--blue);
}

.tabs[data-current-tab="3"]::before {
  background-color: var(--teal);
}

.tabs[data-current-tab="4"]::before {
  background-color: var(--green);
}

.tabs::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-left: 18px solid var(--purple);
  border-bottom: 9px solid transparent;
  position: absolute;
  right: -38px;
  top: 0;
  display: block;
  margin: 10% 0;
  transition: top 0.2s ease-out, border-left-color 0.2s ease-in-out;
}

.tabs[data-current-tab="0"]::after {
  top: 0;
  border-left-color: var(--dark-purple);
}

.tabs[data-current-tab="1"]::after {
  top: 20%;
  border-left-color: var(--purple);
}

.tabs[data-current-tab="2"]::after {
  top: 40%;
  border-left-color: var(--blue);
}

.tabs[data-current-tab="3"]::after {
  top: 60%;
  border-left-color: var(--teal);
}

.tabs[data-current-tab="4"]::after {
  top: 80%;
  border-left-color: var(--green);
}

/* footer */
footer {
  color: var(--alpha-white);
  background-image: var(--viridis-purple-vert);
}
html[data-theme=light] footer {
  background-image: var(--viridis-purple-vert);
}
html[data-theme=dark] footer {
  background-image: var(--viridis-purple-invert);
}

footer a {
  color: var(--white);
}

footer h1 {
  color: var(--white);
}

ul.social {
  list-style-type: none;
  padding: 0;
  display: block;
  font-size: 18px;
}

ul.social li {
  display: inline-block;
  margin-right: 5px;
}
ul.social a {
  color: var(--white);
  transition: color 0.2 ease-in-out;
}
ul.social a:hover i {
  color: var(--alpha-white);
}

ul.mpl-links,
ul.release-docs {
  list-style-type: none;
  padding: 0;
  margin-top: 1.33em;
}

ul.mpl-links li,
ul.release-docs li {
  margin-bottom: 10px;
}

ul.mpl-links {
  font-weight: bold;
}

ul.mpl-links a, ul.mpl-links a:visited,
ul.release-docs a, ul.release-docs a:visited
{
  color: var(--white);
  text-decoration: none;
}

ul.mpl-links a:hover, ul.mpl-links a:visited:hover,
ul.release-docs a:hover, ul.release-docs a:visited:hover
{
  color: var(--pst-color-link-hover);
}

.release dt {
  font-family: var(--heading-font);
  font-size: var(--heading-5);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 1em;
}

.release dt:first-child {
  margin-top: 0;
}

.release dd {
  margin: 0;
}

@media (min-width: 650px) {
  .release dt,
  .release dd,
  ul.mpl-links {
    text-align: right;
  }
}

/* layout */
html, body {
    width: 100%;
    height: 100%;
}

.document {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

@media (min-width: 960px) {
  /* Undo pydata-sphinx-theme's max width setting. */
  div.bd-container__inner.bd-page-width {
    max-width: inherit;
  }
}

main.bd-main {
  flex-grow: 1;
  display: grid;
  column-gap: 20px;
}

@media (min-width: 800px) {
  main.bd-main {
    grid-template-columns:
      minmax(1em, auto) repeat(12, minmax(44px, 118px)) minmax(1em, auto);
    grid-template-areas:
      /* These are mostly two sections side-by-side (6 columns each), except
       * for tools+tool-switcher which are 1/3+2/3. */
      ". intro intro intro intro intro intro intro-text intro-text intro-text intro-text intro-text intro-text ."
      ". quicklinks quicklinks quicklinks quicklinks quicklinks quicklinks quicklinks quicklinks quicklinks quicklinks quicklinks quicklinks ."
      "rule1 rule1 rule1 rule1 rule1 rule1 rule1 rule1 rule1 rule1 rule1 rule1 rule1 rule1"
      ". news news news news news news resources resources resources resources resources resources ."
      "rule2 rule2 rule2 rule2 rule2 rule2 rule2 rule2 rule2 rule2 rule2 rule2 rule2 rule2"
      ". tools tools tools tools tool-switcher tool-switcher tool-switcher tool-switcher tool-switcher tool-switcher tool-switcher tool-switcher ."
      "rule3 rule3 rule3 rule3 rule3 rule3 rule3 rule3 rule3 rule3 rule3 rule3 rule3 rule3"
      ". support support support support support support support support support support support support ."
      "footer footer footer footer footer footer footer footer footer footer footer footer footer footer";
  }
}

@media (max-width: 799px) {
  main.bd-main {
    margin-top: 0px;
    grid-template-columns: 1em auto 1em;
    grid-template-areas:
      ". intro-text ."
      ". intro ."
      ". quicklinks  ."
      "rule1 rule1 rule1"
      ". resources ."
      ". news ."
      "rule2 rule2 rule2"
      ". tools ."
      ". tool-switcher ."
      "rule3 rule3 rule3"
      ". support ."
      "footer footer footer";
  }
}

.grid__full-page {
  grid-area: intro-start / intro-start / footer-start / intro-text-end;
}

.grid__intro-text {
  grid-area: intro-text;
}

.grid__intro {
  margin-top: 4em;
  grid-area: intro;
}

.grid__quicklinks {
  margin-top: 2em;
  grid-area: quicklinks;
}

@media (min-width: 1000px) {
  .grid__quicklinks {
    padding: 0 100px;
  }
}

.grid__rule1 {
  margin-top: 1em;
  grid-area: rule1;
}

.grid__resources {
  grid-area: resources;
}

.grid__news {
  grid-area: news;
}

.grid__rule2 {
  margin-top: 1em;
  grid-area: rule2;
}

.grid__tools {
  margin-top: 2em;
  margin-bottom: 2em;
  grid-area: tools;
}

.grid__tools-switcher {
  margin-top: 2em;
  margin-bottom: 2em;
  grid-area: tool-switcher;
}

.grid__rule3 {
  margin-top: 1em;
  grid-area: rule3;
}

.grid__support {
  grid-area: support;
}

.grid__contribute {
  grid-area: contribute;
}

.support__items {
  list-style-type: none;
  padding: 0;
}

@media (min-width: 800px) {
  .support__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

.support__items .callout {
  flex: 0 0 calc(33.333333% - 13.3333333333333px);
}

footer {
  grid-area: footer;
  display: grid;
}

@media (min-width: 800px) {
  footer {
    grid-template-columns: minmax(1em, 40px) 1fr 1fr 1fr 1fr minmax(1em, 40px);
    grid-template-areas: ". mpl mpl links release .";
  }
}

@media (max-width: 799px) and (min-width: 650px) {
  footer {
    grid-template-columns: minmax(1em, 40px) 1fr 1fr minmax(1em, 40px);
    grid-template-areas:
      ". mpl links ."
      ". mpl release .";
  }
}

@media (max-width: 649px) {
  footer {
    grid-template-columns: minmax(auto, 1em) auto minmax(auto, 1em);
    grid-template-areas:
      ". mpl ."
      ". links ."
      ". release .";
  }
}

.grid__mpl-info {
  grid-area: mpl;
}

.grid__mpl-links {
  grid-area: links;
}

.grid__release-docs {
  grid-area: release;
}

.grid__tools-switcher__tabs {
  display: grid;
  gap: 2em;
}

@media (min-width: 800px) {
  .grid__tools-switcher__tabs {
    grid-template-columns:
      minmax(44px, 118px) minmax(44px, 118px) minmax(44px, 118px)
      minmax(44px, 118px) minmax(44px, 118px) minmax(44px, 118px) minmax(
        44px,
        118px
      )
      minmax(44px, 118px);
    grid-template-areas: "tabs tabs panel panel panel panel panel panel";
  }
}

@media (max-width: 799px) {
  .grid__tools-switcher__tabs {
    grid-template-columns: 30% auto;
    grid-template-areas: "tabs panel";
  }
}

.grid__tabs__tabs {
  grid-area: tabs;
}

.grid__tabs__panel {
  grid-area: panel;
}

/* buttons */
.button,
a.button {
  background-color: var(--blue);
  padding: 15px 20px;
  width: fit-content;
  width: -moz-fit-content;
  display: block;
  border-radius: var(--border-radius);
  color: var(--white);
  margin: 1em 0;
  font-family: var(--pst-font-family-heading);
  font-size: var(--pst-font-size-h5);
  font-weight: var(--regular);
  box-shadow: var(--shadow);
}

.button::after,
a.button::after {
  content: "\f061"; /* fa-arrow-right */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-left: 60px;
  display: inline-block;
  transition: margin 0.2s ease-out;
}

a.button:hover {
  color: var(--white);
}

.button:hover::after,
a.button:hover::after {
  margin-left: 80px;
}

.button--purple,
a.button--purple {
  background: var(--viridis-purple);
}

.button--blue,
a.button--blue {
  background: var(--viridis-blue);
}

.button--teal,
a.button--teal {
  background: var(--viridis-teal);
}

.button--green,
a.button--green,
a.button--green:hover {
  background: var(--viridis-green);
  color: var(--black);
}

.button--green::after,
a.button--green::after {
  content: "\f061"; /* fa-arrow-right */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

.imrot-img {
  display: flex;  
  margin: auto;
  max-width:18em;
  align-self: center;
}

.imrot-cap {
  text-align: center;
  font-style: italic;
  font-size:  large;
}

.copywrite {
  color: var(--white);
}