/* Generated by https://scss.premo.biz/scss2css.php 
Uses scssphp-1.6.0 - https://scssphp.github.io/scssphp/ */

@import url('https://includes.premo.biz/meyerweb_reset.css');
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;700&display=swap');
html {
  overflow-y: hidden;
}
body {
  /* this eventually comes back */
  overflow-y: hidden;
  background-color: #4e004e;
  color: #FFFFFF;
  font-family: Chakra Petch;
  font-weight: 400;
}
.dev-screenshot {
  display: none;
  position: absolute;
  opacity: 50%;
  top: 0;
  right: -33px;
  right: -64px;
}
.bg {
  animation: slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-40deg, #4e004e 50%, #171761 50%);
  bottom: 0;
  left: -50%;
  opacity: 0.5;
  position: fixed;
  right: -50%;
  top: 0;
  z-index: -1;
}
.bg2 {
  animation-direction: alternate-reverse;
  animation-duration: 19s;
}
.bg3 {
  animation-duration: 11s;
}
@keyframes slide {
  0% {
    transform: translateX(-25%);
  }
  100% {
    transform: translateX(25%);
  }
}
header {
  position: relative;
  width: auto;
  max-width: 1706px;
}
header .network {
  color: rgba(122, 168, 191, 0.75);
  font-weight: 500;
  text-transform: lowercase;
  color: #8AA6BB;
}
header .title {
  position: relative;
  line-height: 1.05;
  font-weight: 500;
  text-transform: uppercase;
  color: #EFEFEF;
}
nav {
  width: auto;
  text-transform: uppercase;
  text-align: center;
  border-bottom-color: rgba(255, 255, 255, 0.25);
  border-bottom-style: solid;
}
nav ul li {
  display: inline;
  color: #86A6BB;
  cursor: pointer;
}
nav ul li.active, nav ul li:hover {
  color: #F0F0F0;
  border-bottom-color: #FFFFFF;
  border-bottom-style: solid;
}
main {
  box-sizing: border-box;
  margin: 0 auto;
}
main .deck {
  position: relative;
  display: none;
}
main .deck.active {
  display: block;
}
main .deck .progress {
  width: 100%;
  height: 79px;
  background-color: gray;
  visibility: hidden;
}
main .deck .challenge-list {
  overflow-y: scroll;
  overflow-x: visible;
  scroll-snap-type: y mandatory;
  scroll-snap-stop: always;
}
main .deck .challenge-list .challenge-blurb {
  box-sizing: border-box;
  position: relative;
  width: auto;
  border-color: rgba(122, 168, 191, 0.5);
  border-style: solid;
  cursor: pointer;
  scroll-snap-align: start;
  line-height: 1.48;
  color: rgba(122, 168, 191, 0.75);
  background: linear-gradient(#0A1C28, #00030C);
}
main .deck .challenge-list .challenge-blurb .challenge-title {
  width: auto;
  text-align: center;
  color: #EBF0F6;
  opacity: 0.9;
}
main .deck .challenge-list .challenge-blurb .challenge-desc {
  color: #7FADC5;
}
main .deck .challenge-list .challenge-blurb .challenge-num-required {
  position: absolute;
  right: 0;
  bottom: 0;
}
main .deck .challenge-list .challenge-detail {
  background: linear-gradient(#0A1C28, #00030C);
  display: none;
  position: absolute;
  line-height: 1.48;
}
main .deck .challenge-list .challenge-detail.active {
  display: block;
}
main .deck .challenge-list .challenge-detail .detail-section {
  border-color: rgba(122, 168, 191, 0.5);
  border-style: Solid;
}
main .deck .challenge-list .challenge-detail .detail-section .detail-section-title {
  text-transform: uppercase;
  color: #EBF0F6;
}
main .deck .challenge-list .challenge-detail .detail-section .detail-section-content {
  color: #7FADC5;
}
/*** RESPONSIVE INSENSITIVE above this line


RESPONSIVE SENSITIVE below this line ***/
body {
  padding: 61px 107px;
}
.dev-screenshot {
  top: 0;
  right: -33px;
  right: -64px;
}
header {
  max-width: 1706px;
}
header .network {
  font-size: 1.35rem;
  font-weight: 500;
}
header .title {
  font-size: 3.23rem;
}
nav {
  max-width: 1706px;
  border-bottom-width: 2px;
  font-size: 1.2rem;
  padding: 34px 0 9px;
}
nav ul li {
  margin: 0 8px;
  padding: 0 4px 2px;
}
nav ul li.active, nav ul li:hover {
  border-bottom-width: 3px;
}
main {
  max-width: 1240px;
}
main .deck {
  width: 500px;
  width: 517px;
}
main .deck .progress {
  width: 100%;
  height: 79px;
}
main .deck .challenge-list {
  height: calc(159px * 4);
}
main .deck .challenge-list .challenge-blurb {
  height: 159px;
  width: auto;
  border-width: 3px;
  padding: 11px 15px 0;
  font-size: 1.225rem;
}
main .deck .challenge-list .challenge-blurb .challenge-num-required {
  padding: 0 6px 1px 0;
}
main .deck .challenge-list .challenge-detail {
  left: 610px;
  top: 79px;
  width: 630px;
  font-size: 1rem;
}
main .deck .challenge-list .challenge-detail .detail-section {
  padding: 13px 7px;
  border-width: 2px;
}
main .deck .challenge-list .challenge-detail .detail-section .detail-section-content {
  padding: 0.35vw 0 0 0;
  padding: 1px 0 0 0;
}
@media screen and (max-height: 914px) {
  main .deck .challenge-list {
    height: calc(159px * 3);
  }
}
@media screen and (max-width: 1454px) {
  main .deck .challenge-list .challenge-detail {
    width: 430px;
  }
}