.site-header-home-link {
  align-items: center;
  display: flex;
  height: 32px
}

.site-header-home-link__logo {
  display: block;
  height: auto;
  width: 35px
}

.site-header {
  text-rendering: optimizeLegibility;
  text-size-adjust: 100%;
  background-color: #fff;
  color: #222;
  font-family: Roboto,sans-serif;
  font-variant-ligatures: none;
  font-weight: 400;
  line-height: 1.4;
  position: relative;
  z-index: 1000
}

.site-header .sauce-button {
  -webkit-font-smoothing: antialiased;
  border-color: var(--color-background);
  border-style: solid;
  border-width: 2px;
  font-size: 18px;
  font-weight: 500;
  height: 42px;
  line-height: 20px;
  padding: .5em 14px;
  width: auto
}

.site-header .sauce-button--logout {
  background-color: transparent;
  border-color: #000;
  color: #000
}

.site-header__container {
  align-items: center;
  display: flex;
  gap: 16px;
  height: 64px;
  justify-content: flex-start;
  margin: 0 auto;
  max-width: 1300px;
  padding: 8px 16px
}

@media only screen and (min-width: 800px) {
  .site-header__container {
      padding:8px 70px
  }
}

@media only screen and (min-width: 1200px) {
  .site-header__container {
      padding:8px 84px
  }
}

.site-header__home-link {
  flex: 1;
  position: relative
}

.site-header__home-link img {
  height: 32px
}

@media only screen and (min-width: 1000px) {
  .site-header__home-link {
      flex:none
  }
}

.site-header__skipper:not(:focus-within) {
  clip: rect(0 0 0 0)!important;
  clip-path: inset(100%)!important;
  height: 1px!important;
  overflow: hidden!important;
  position: absolute!important;
  white-space: nowrap!important;
  width: 1px!important
}

.site-header__toggle {
  display: flex;
  justify-content: flex-end
}

@media only screen and (min-width: 1000px) {
  .site-header__toggle {
      display:none
  }
}

.site-header__nav {
  opacity: 0;
  position: absolute;
  right: 0;
  top: 64px;
  transform: translateX(-100%);
  transition-delay: 0s,.3s;
  transition-duration: .3s,0s;
  transition-property: opacity,transform;
  transition-timing-function: ease-in-out;
  width: 100%;
  z-index: 10000
}

[data-nav-open=true] .site-header__nav {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0s
}

@media only screen and (min-width: 1000px) {
  .site-header__nav {
      align-self:center;
      height: 48px;
      max-width: 800px;
      opacity: 1;
      position: static;
      transform: unset;
      transition-property: none;
      width: auto
  }
}

.site-header__persistent-nav {
  align-items: center;
  display: none;
  line-height: 48px;
  padding-left: 30px
}

@media only screen and (min-width: 420px) {
  .site-header__persistent-nav {
      display:flex;
      gap: 12px;
      justify-content: flex-end
  }
}

@media only screen and (min-width: 1000px) {
  .site-header__persistent-nav {
      flex:1;
      justify-content: space-between;
      padding-left: 0
  }
}

.site-header-nav {
  background-color: #fff;
  margin: 0;
  min-height: calc(100vh - 64px)
}

@media only screen and (min-width: 1000px) {
  .site-header-nav {
      height:48px;
      min-height: auto
  }
}

.site-header-nav__list {
  margin: 0;
  padding: 40px 0 0;
  padding-block-start:40px}

@media only screen and (min-width: 1000px) {
  .site-header-nav__list {
      display:flex;
      padding: 0
  }
}

@media only screen and (min-width: 1000px)and (min-width:1000px) {
  .site-header-nav__list {
      justify-content:center
  }
}

.site-header-nav__item {
  flex-grow: 1;
  list-style: none;
  opacity: 0;
  transform: translateY(15%);
  transition-duration: .15s;
  transition-property: opacity,transform;
  transition-timing-function: ease-in-out;
  width: 100%
}

.site-header-nav__item[data-section=learn] {
  transition-delay: .49s
}

.site-header-nav__item[data-section=teach] {
  transition-delay: .45s
}

.site-header-nav__item[data-section=research] {
  transition-delay: .41s
}

.site-header-nav__item[data-section=computers] {
  transition-delay: .37s
}

.site-header-nav__item[data-section=about] {
  transition-delay: .33s
}

.site-header-nav__item[data-section=donate] {
  transition-delay: .29s
}

.site-header-nav__item[data-section=logout] {
  transition-delay: .25s
}

[data-nav-open=true] .site-header-nav__item {
  opacity: 1;
  transform: translateY(0)
}

@media only screen and (min-width: 1000px) {
  [data-nav-open=true] .site-header-nav__item {
      transform:unset
  }
}

@media only screen and (min-width: 1000px) {
  .site-header-nav__item {
      opacity:1;
      transform: unset;
      transition-property: none;
      width: auto
  }

  .site-header-nav__item.site-header-nav__item--mobile-only {
      display: none
  }
}

.site-header-nav__item .sauce-button {
  font-size: 20px;
  margin-left: 16px;
  margin-top: 10px;
  width: calc(100% - 32px)
}

@media only screen and (min-width: 420px) {
  .site-header-nav__item .sauce-button {
      display:none
  }
}

.site-header-nav-link,.site-header-nav-link:visited {
  align-items: center;
  color: #000;
  display: flex;
  font-size: 20px;
  font-weight: 400;
  height: 50px;
  overflow: hidden;
  padding: 0 16px;
  position: relative;
  text-decoration: none;
  transition-duration: .3s;
  transition-property: text-indent;
  transition-timing-function: cubic-bezier(.68,-.55,.265,1.55)
}

.site-header-nav-link:focus,.site-header-nav-link:hover,.site-header-nav-link:visited:focus,.site-header-nav-link:visited:hover {
  text-decoration: none
}

@media only screen and (min-width: 800px) {
  .site-header-nav-link,.site-header-nav-link:visited {
      padding:0 70px
  }
}

.site-header-nav-link:after,.site-header-nav-link:visited:after {
  content: " ";
  display: block;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  transform: translateX(-200%);
  transition-duration: .3s;
  transition-property: opacity,transform;
  transition-timing-function: cubic-bezier(.68,-.55,.265,1.55);
  width: 10px
}

@media only screen and (min-width: 1000px) {
  .site-header-nav-link,.site-header-nav-link:visited {
      align-items:flex-end;
      height: 48px;
      justify-content: center;
      line-height: 48px;
      padding: 0 15px;
      transition-property: none
  }

  .site-header-nav-link:after,.site-header-nav-link:visited:after {
      bottom: 0;
      height: 10px;
      left: 15px;
      transform: translateY(200%);
      width: calc(100% - 30px)
  }
}

.site-header-nav-link--learn:after {
  background-color: #c7134b
}

.site-header-nav-link--teach:after {
  background-color: #f69986
}

.site-header-nav-link--research:after {
  background-color: #ffdf6e
}

.site-header-nav-link--computers:after {
  background-color: #9deead
}

.site-header-nav-link--about:after {
  background-color: #87d9ba
}

.site-header-nav-link--donate:after {
  background-color: #afdbeb
}

.site-header-nav-link--logout:after {
  background-color: #afdbeb
}

.site-header-nav-link--current,.site-header-nav-link:focus,.site-header-nav-link:hover {
  text-indent: 10px
}

.site-header-nav-link--current:after,.site-header-nav-link:focus:after,.site-header-nav-link:hover:after {
  opacity: 1;
  transform: translateX(-50%)
}

@media only screen and (min-width: 1000px) {
  .site-header-nav-link--current,.site-header-nav-link:focus,.site-header-nav-link:hover {
      text-indent:0
  }

  .site-header-nav-link--current:after,.site-header-nav-link:focus:after,.site-header-nav-link:hover:after {
      transform: translateY(50%)
  }
}

@media only screen and (min-width: 1000px) {
  .site-header-nav__item:focus-within .site-header-nav-link,.site-header-nav__item:hover .site-header-nav-link {
      text-indent:10px
  }

  .site-header-nav__item:focus-within .site-header-nav-link:after,.site-header-nav__item:hover .site-header-nav-link:after {
      opacity: 1;
      transform: translateX(-50%)
  }
}

@media only screen and (min-width: 1000px)and (min-width:1000px) {
  .site-header-nav__item:focus-within .site-header-nav-link,.site-header-nav__item:hover .site-header-nav-link {
      text-indent:0
  }

  .site-header-nav__item:focus-within .site-header-nav-link:after,.site-header-nav__item:hover .site-header-nav-link:after {
      transform: translateY(50%)
  }
}

.site-header-nav-panel {
  background-color: #fff;
  box-shadow: 0 100vh 0 100vh rgba(34,34,34,.25);
  display: none;
  left: 0;
  position: absolute;
  top: 64px;
  width: 100vw;
  z-index: 500
}

@media only screen and (min-width: 1000px) {
  .site-header-nav__panel[aria-expanded=true] .site-header-nav-panel {
      display:block
  }
}

.site-header-nav-panel__container {
  margin: 0 auto;
  max-width: 1300px;
  padding: 0 16px
}

@media only screen and (min-width: 800px) {
  .site-header-nav-panel__container {
      padding:0 70px
  }
}

@media only screen and (min-width: 1200px) {
  .site-header-nav-panel__container {
      padding:0 84px
  }
}

.site-header-nav-panel__inner {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 800px;
  padding-block-end:40px;padding-block-end:clamp($min,$target,$max);padding-block-start:40px;padding-block-start:clamp($min,$target,$max);padding-bottom: clamp($min,$target,$max);
  padding-top: clamp($min,$target,$max);
  transform: translateX(35px)
}

.site-header-nav-panel__primary-cta {
  padding-inline-end:20px;padding-right: clamp($min,$target,$max);
  padding-inline-end:clamp($min,$target,$max);width: 60%
}

.site-header-nav-panel__summary {
  color: #000;
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 clamp($min,$target,$max);
  margin-block-start: 0;
  margin-block-end:30px;margin-block-end:clamp($min,$target,$max)}

.site-header-nav-panel__buttons {
  display: flex
}

.site-header-nav-panel__button,.site-header-nav-panel__button:visited {
  margin-inline-end:10px;margin-inline-end:clamp($min,$target,$max);margin-right: clamp($min,$target,$max);
  padding-inline:20px;padding-inline:clamp($min,$target,$max);padding-left: clamp($min,$target,$max);
  padding-right: clamp($min,$target,$max)
}

.site-header-nav-panel__button:last-child,.site-header-nav-panel__button:visited:last-child {
  margin: 0
}

.site-header-nav-panel__list {
  width: 40%
}

.site-header-nav-panel__item {
  font-size: 20px;
  list-style: none;
  margin-block-end:10px;margin-block-end:clamp($min,$target,$max);margin-bottom: clamp($min,$target,$max)
}

.site-header-nav-panel__item:last-child {
  margin: 0
}

.site-header-nav-panel__link,.site-header-nav-panel__link:visited {
  align-items: center;
  color: #004881;
  display: flex;
  text-decoration: none
}

.site-header-nav-panel__link:active,.site-header-nav-panel__link:focus,.site-header-nav-panel__link:hover,.site-header-nav-panel__link:visited:active,.site-header-nav-panel__link:visited:focus,.site-header-nav-panel__link:visited:hover {
  color: #c51d4a
}

.site-header-nav-panel__icon {
  margin-right: 5px
}

.site-header-nav-panel__icon path {
  transition-duration: .1s;
  transition-property: stroke;
  transition-timing-function: ease-in-out
}

.site-header-nav-panel__link:focus .site-header-nav-panel__icon path,.site-header-nav-panel__link:hover .site-header-nav-panel__icon path {
  stroke: #c51d4a
}

.site-header-nav-panel__label {
  text-decoration: underline
}

.site-header-skipper {
  margin: 0;
  position: relative
}

.site-header-skipper__item {
  list-style: none
}

.site-header-skipper__item:not(:focus-within) {
  clip: rect(0 0 0 0)!important;
  clip-path: inset(100%)!important;
  height: 1px!important;
  overflow: hidden!important;
  position: absolute!important;
  white-space: nowrap!important;
  width: 1px!important
}

.site-header-skipper__link {
  background: #fff;
  border: 2px solid #0062c8;
  border-radius: 5px;
  color: #004881;
  left: 45px;
  padding: clamp($min,$target,$max);
  position: absolute;
  top: 32px;
  transform: translateY(-50%);
  width: 250px;
  z-index: 2000
}

@media only screen and (min-width: 1000px) {
  .site-header-skipper__link {
      left:0;
      top: 74px;
      transform: translateY(0)
  }
}

.site-header-skipper__link:hover {
  color: #c51d4a
}

.site-header-toggle {
  appearance: none;
  background: none;
  block-size: 26px;
  border: none;
  height: 26px;
  inline-size: 26px;
  padding: 0;
  width: 26px
}

.site-header-toggle .site-header-toggle__line {
  background-color: #000;
  block-size: 4px;
  border-radius: 4px;
  content: " ";
  display: block;
  height: 4px;
  inline-size: 100%;
  transform-origin: left center;
  transition-duration: .15s;
  transition-property: background-color,opacity,transform;
  transition-timing-function: cubic-bezier(.68,-.55,.265,1.55);
  width: 100%;
  will-change: background-color,opacity,transform
}

.site-header-toggle .site-header-toggle__line:nth-child(2) {
  margin: 7px 0
}

.site-header-toggle:focus .site-header-toggle__line,.site-header-toggle:hover .site-header-toggle__line {
  background-color: #f3524f
}

.site-header-toggle[aria-pressed=true] .site-header-toggle__line {
  opacity: 0
}

.site-header-toggle[aria-pressed=true] .site-header-toggle__line:first-child,.site-header-toggle[aria-pressed=true] .site-header-toggle__line:last-child {
  opacity: 1;
  width: 119%
}

.site-header-toggle[aria-pressed=true] .site-header-toggle__line:last-child {
  transform: rotate(-45deg)
}

.site-header-toggle[aria-pressed=true] .site-header-toggle__line:first-child {
  transform: rotate(45deg) translateX(1%)
}

:root {
  --color-background-button-primary-base: #0045ad;
  --color-background-button-primary-active: #0052cc;
  --color-background-button-primary-disabled: #eee;
  --color-text-button-primary-base: #fff;
  --color-text-button-primary-active: #fff;
  --color-text-button-primary-disabled: #444
}

.sauce-button {
  padding-block:10px;padding: 10px 40px;
  padding-inline:40px;--color-background-base: var(--color-background-button-primary-base);
  --color-background-active: var(--color-background-button-primary-active);
  --color-background-disabled: var(--color-background-button-primary-disabled);
  --color-text-base: var(--color-text-button-primary-base);
  --color-text-active: var(--color-text-button-primary-active);
  --color-text-disabled: var(--color-text-button-primary-disabled);
  --color-background: var(--color-background-base);
  --color-text: var(--color-text-base);
  --width: 100%;
  background-color: var(--color-background);
  border-radius: .5rem;
  border-width: 0;
  color: var(--color-text);
  display: inline-block;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  width: var(--width)
}

.sauce-button:-webkit-any-link {
  --color-background: var(--color-background-base);
  --color-text: var(--color-text-base);
  text-decoration: none
}

.sauce-button:-moz-any-link {
  --color-background: var(--color-background-base);
  --color-text: var(--color-text-base);
  text-decoration: none
}

.sauce-button:any-link {
  --color-background: var(--color-background-base);
  --color-text: var(--color-text-base);
  text-decoration: none
}

.sauce-button:active,.sauce-button:focus,.sauce-button:hover {
  --color-background: var(--color-background-active);
  --color-text: var(--color-text-active)
}

@media only screen and (min-width: 500px) {
  .sauce-button {
      --width:auto
  }
}

.sauce-button:disabled,.sauce-button[disabled] {
  --color-background: var(--color-background-disabled);
  --color-text: var(--color-text-disabled);
  pointer-events: none
}

.sauce-button[data-breakout]:after,[data-breakout] .sauce-button:after {
  bottom: 0;
  content: " ";
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1
}

.site-header .sauce-button.sauce-button--donate,
.site-header .sauce-button.sauce-button--logout {
  box-sizing: border-box;
  height: min-content;
}

:root{--font-weight-bold:700;}
:root{--rpf-red-900:#c23f3d;--rpf-navy-600:#5a61b5;--rpf-navy-800:#232d9a;--rpf-navy-900:#1c267d;}
:root{--rpf-brand-black:#1d1d1b;--rpf-brand-leaf:#46af4b;--rpf-brand-raspberry:#cd2356}
:root{--rpf-white:#fff;--rpf-grey-600:#4a4d59;}
:root{--rpf-button-primary-background-color:var(--rpf-navy-800);--rpf-button-primary-background-color-hover:var(--rpf-navy-900);--rpf-button-primary-background-color-active:var(--rpf-navy-600);--rpf-button-primary-background-color-disabled:var(--rpf-grey-600);--rpf-button-primary-text-color:var(--rpf-white);--rpf-button-border-radius:var(--border-radius);--rpf-button-lg-height:48px;--rpf-button-sm-height:32px;--rpf-button-min-target-size:44px}
.rpf-button {
  --space-1:0.5rem;--space-1-5:0.75rem;--space-2: 1rem;--space-3:1.5rem;
  --font-size-1:1rem;--font-size-1-5:1.5rem;
  --rpf-button-border-radius: var(--space-1);

  all: unset;
  align-items: center;
  color: var(--rpf-button-primary-text-color);
  cursor: pointer;
  display: flex;
  font-size: var(--font-size-1-5);
  font-weight: var(--font-weight-bold);
  gap: var(--space-1-5);
  inline-size: fit-content;
  min-block-size: calc(
    var(--rpf-button-lg-height) - var(--space-1-5) - var(--space-1-5)
  );
  padding: var(--space-1) var(--space-2);
  position: relative;
  text-align: center;
  text-decoration: none;
  transform: scale(1);
}
.rpf-button:before {
  background-color: var(--rpf-button-primary-background-color);
  border-color: var(--rpf-button-primary-background-color);
  border-radius: var(--rpf-button-border-radius);
  border-style: solid;
  border-width: 2px;
  content: "";
  display: block;
  inset: 0;
  position: absolute;
  z-index: -1;
}
.rpf-button:hover:before {
  background-color: var(--rpf-button-primary-background-color-hover);
  border-color: var(--rpf-button-primary-background-color-hover);
}
.rpf-button:active:before {
  background-color: var(--rpf-button-primary-background-color-active);
  border-color: var(--rpf-button-primary-background-color-active);
}
.rpf-button:focus-visible:before {
  outline: 3px solid var(--rpf-brand-raspberry);
}