/* fonts (latin) */
@font-face {
  font-display: fallback;
  font-family: 'Catamaran';
  font-style: normal;
  font-weight: 400;
  src: local('Catamaran Regular'), local('Catamaran-Regular'), url(https://fonts.gstatic.com/s/catamaran/v4/o-0IIpQoyXQa2RxT7-5r5TRASf6M7Q.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-display:swap;
}
@font-face {
  font-family: 'Catamaran';
  font-style: normal;
  font-weight: 900;
  src: local('Catamaran Black'), local('Catamaran-Black'), url(https://fonts.gstatic.com/s/catamaran/v5/o-0NIpQoyXQa2RxT7-5jZhNVZNyBx2pqPA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-display:swap;
}
@font-face {
  font-display: fallback;
  font-family: 'Megrim';
  font-style: normal;
  font-weight: 400;
  src: local('Megrim'), url(https://fonts.gstatic.com/s/megrim/v9/46kulbz5WjvLqJZVam_hVUdI1w.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-display:swap;
}

/* basics */

html { scroll-behavior: smooth; }
body { background:#272755; background: linear-gradient(#17142d,#272755); color:#eee; font-family:'Catamaran', sans-serif; min-height:100%; margin:0 auto; padding:1em; }

footer, #header { padding:2em 0; text-align: center; }
  /*nav { font-family:'Megrim', sans-serif; font-weight: bold; margin:0 0 2em; }
    nav ul { list-style:none; margin:0; padding:0; }
      nav li { border-right: 1px solid #000; display:inline-block; padding:0 1em; }
      nav li:last-child { border:none; }
    nav a { color:rgb(60, 179, 113); }*/

  nav, #rules-menu { font-size:1.2em; font-weight: bold; text-align: center; }
    nav a, #rules-menu a { display:block; padding:.25em 1em; text-decoration: none; }
    nav ul, .social ul, #rules-menu ul { list-style:none; margin:1em 0; padding:0; }
      nav ul li, .social li, #rules-menu li { display:inline-block; margin:.5em .25em; width:auto; }
        nav li::before { display:none; }

    #rules-menu { background:#17142d; bottom:1.2em; display:none; font-size:1.5em; height:1.9em; left:.65em; overflow:hidden; padding:.12em 0 0 .12em; position:fixed; right:.65em; width:calc(100% - 1.3em); z-index:10; }
      #rules-menu::after { background:#17142d; background: linear-gradient(to right, rgba(23, 20, 45,0), rgb(23, 20, 45)); bottom:0; content:''; font-weight: bold; height:1.9em; position:absolute; right:-1px; width:2em; }
      #rules-menu::before, #rules-menu .active::after { background:#17142d; background: linear-gradient(to left, rgba(23, 20, 45,0), rgb(23, 20, 45)); bottom:0; content:''; font-weight: bold; height:2.5em; position:absolute; left:-1px; width:2em; z-index: 1}
      #rules-menu ul { display:none; margin:0;  overflow-x:scroll; padding:0 2.9em 0 1.2em; scroll-snap-type: x mandatory; white-space:nowrap; }
        #rules-menu li { font-size:.8em; margin:0; padding:0; }
        #rules-menu li::before { display:none; }
          #rules-menu a { background:#17142d; border:solid rgba(255,255,255,.65); border-width:.12em; margin:0 0 .12em; padding:.25em .5em; }
        #rules-menu .active { left:-1.5em; position:sticky; z-index: 2; }
          #rules-menu .active a { background:hotpink; border-color:hotpink; border-radius:0; }
            #rules-menu .active::after { left: auto; right:-2em; }


      nav .active a { border:1px solid white; border-radius:2em; }

  #header p { font-size:2.9em; }
    #header p:first-of-type { font-family:'Megrim', sans-serif; font-size:3em; text-align:center; text-transform: lowercase !important; }
  #footer, main { margin:0 auto; max-width:42em; }
  .social { margin:3em 0 1em; }
    .social a { display:inline-block; margin:0 .25em 0 0; }
      .social a::after { content:"·"; display:inline-block; margin:0 0 0 .25em; }
        .social a:last-of-type::after { content:""; }
        .social a:first-of-type::before { content:"·"; display:inline-block; margin:0 .25em; }

    .copyright { color:#000; font-size:.8em; }

h1 { font-family:'Megrim', sans-serif; font-size:3em; text-align:center; text-transform: lowercase !important; }
  /*h1 { border-top: 0.12em yellow solid; margin: 3em 0 1em; padding: 1em 0 0; }*/
  h1:first-of-type { border-top:0; margin: 0 0 1em; padding: 0; }
h2, h3, h4, h5, h6 { color:#dec560; font-family: 'Catamaran', sans-serif; }
h2 img, h3 img, h4 img, h5 img, li img, .dice { height:2em; margin:0 .5em 0 0; vertical-align:middle; }
  h2 img:nth-child(2), h3 img:nth-child(2), h4 img:nth-child(2), h5 img:nth-child(2) { height:1.5em; }

ol, ul { margin:2em 0; }
  ol ol, ol ul, ul ul, ul ol { margin:.5em 0; }
  li { margin:0 0 .5em; }

ul { list-style:none; margin:1em 0; padding:0; }
  ul li { background:#17142d; border-radius:.5em; margin:0 0 .5em; padding:.25em 1.5em .25em 2em; }
  ul li::before { color:#6dbc84; content:'>'; font-weight:bold; margin-left: -1em; position:absolute; }

ol { counter-reset: item; margin: 0 0 1.5em; padding: 0; }
  ol > li { counter-increment: item; list-style-type: none; padding: 0 0 0 3em; }
    ol > li::before { color:white; content:"0" counter(item); display: inline-block; font-weight: bold; position:absolute; text-align:center;  text-indent:-3em; }
      ol > li:nth-child(n+10)::before { content:counter(item); }
    ol h4, ol h5, ol p { margin:0 0 .25em; }

  .rules ol:nth-of-type(1) > li::before, .rules ol:nth-of-type(4) > li::before, .rules ol:nth-of-type(7) > li::before, .rules ol:nth-of-type(8) > li::before, .rules ol:nth-of-type(9) > li::before, .rules ol:nth-of-type(10) > li::before, .rules ol:nth-of-type(12) > li::before, .rules ol:nth-of-type(13) > li::before, .rules ol:nth-of-type(14) > li::before  { content:counter(item, upper-roman); }


blockquote { border:solid #6dbc84; border-radius: .42em; border-width:0 .42em; color:#d098c0; margin:2em .25em 3em; padding:.42em 1.2em; position:relative; text-align:justify; text-shadow:0 0 .42em hotpink; }
  blockquote::before, blockquote::after { bottom: .22em; box-shadow: 0 0 .42em .12em hotpink; content: ""; left: -.42em; position: absolute; top: .22em; width: 5px; }
  blockquote::after { left: auto; right:-.42em; }
  blockquote cite { color:#6dbc84; font-size:.9em; text-transform: uppercase; }

details {}
  details summary { font-size:1.2em; font-weight: bold; }

hr { background:hotpink; border:0; clear: both; height:.29em; margin:2em; }

img { width:auto; max-width:100%; }

strong { color:white; font-weight:900; }
em { font-size:.8em; text-transform:uppercase; }

mark { background:none; border:1px solid white; border-radius: .42em; box-shadow:0 0 .42em .12em #f5e75d; color:white; display: block; font-size:larger; margin:2em auto; padding:.5em; text-align: center; text-shadow: 0 2px 9px hotpink; width:65%; }

a, a strong { color:#f5e75d; font-weight:bold; text-decoration:none; }
  a:hover { text-decoration:underline; }
  /*a.button  { border:1px solid rgb(46, 139, 87); background: transparent; color:rgb(46, 139, 87); display:block; font-size:1.2em; margin:0 auto .29em; padding:.42em .69em; text-align: center; width:9em; }
    a.button:hover { }*/

.button { -webkit-appearance:none; box-sizing:content-box; color:#fff; display:block; font-family:'Megrim', sans-serif; font-size:1.2em; margin:0 auto .29em; padding:.42em .69em; text-align: center; width:9em; }
  .button:hover { text-decoration:none; }
  .primary { animation-name: pulse; animation-duration: 6.5s; animation-iteration-count: infinite; background:#6dbc84; background:radial-gradient(circle at 50%, #6dbc84, #6dbc84 42%,#4c845c 80%); border:.12em solid #6cbb85; border-radius:100%; color:#17142d; font-size:42px; font-weight:bold; height:142px; line-height:1; padding:12px 12px 20px; text-shadow: 0 1px white; white-space: normal; width:150px; }
    /*.jump .primary { animation-name: pulse_jump; }*/
/* OLD
@keyframes pulse {
   0% { box-shadow:inset 0 0 1em .42em rgba(255, 255, 255, 0.42), 0 0 0 .42em rgba(23,20,45,0.65); }
  100 { box-shadow:inset 0 0 0 0 rgba(255, 255, 255, 0.42),       0 0 0 .42em rgba(23,20,45,.8); }
}*/
@keyframes pulse {
   0% { box-shadow:inset 0 0 0 .42em rgba(255, 255, 255, 0.42), 0 0 .42em .12em rgba(245, 231, 93, .42);
         border-color:rgba(255,255,255,0.29); }
   2% { box-shadow:inset 0 0 1.2em .42em rgba(255, 255, 255, 0.42), 0 0 .42em .29em rgba(245, 231, 93, .42);
         border-color:rgba(255,255,255,0.65); }
  100 { box-shadow:inset 0 0 0 .42em rgba(255, 255, 255, 0.65), 0 0 .42em .42em rgba(245, 231, 93, .42);
        border-color:rgba(255,255,255,0.8); }
}
@keyframes pulse_jump {
   0% { box-shadow:inset 0 0 0 0 rgba(255, 255, 255, 0.42), 0 0 1.2em 1.2em rgba(134,108,22,0.12); }
  30% { box-shadow:inset 0 0 0 0 rgba(255, 255, 255, 0.42), 0 0 .4em .8em rgba(134,108,22,0.29); }
  60% { box-shadow:inset 0 0 0 0 rgba(255, 255, 255, 0.42), 0 0 .3em .6em rgba(134,108,22,0.42); }
  90% { box-shadow:inset 0 0 1em .29em rgba(255, 255, 255, 0.42), 0 0 0 0 rgba(134,108,22,0.65); }
  100 { box-shadow:inset 0 0 0 0 rgba(255, 255, 255, 0.42),       0 0 0 1.2em rgba(134,108,22,.65); }
}

    .primary:hover { border-color:#e2f2e6; }
  .secondary { border:1px solid #6dbc84; background: transparent; color:#6dbc84; }
    .secondary:hover { color:#fff; }
  .tertiary { border:1px solid #f5e75d; background: transparent; color:#f5e75d; }
    .tertiary:hover { color:#fff; }

form { text-align:center; }
  /*input[type=button] { font-size:1.42em; margin:0 0 .29em; padding:.42em .69em; text-align: center; width:9em; }
    input[type=button]:hover { background:rgb(60, 179, 113); }*/

aside { background:#17142d; border:.12em solid white; border-radius:12px; text-align: left; padding:.5em 2em; }

.responsive-iframe { clear: both; margin:2em 0; overflow: hidden; position: relative; width: 100%; }
.responsive-iframe { padding-top: 56.25%; } /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  .responsive-iframe iframe { height: 100%;  position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; }

/* MailerLite */

.notice { }
  .notice a { font-size:1.2em; display:inline-block; text-decoration: none; }
  .notice b { text-decoration: underline; }
  .notice p { background:hotpink;  border-radius: .42em; margin:0; padding:.5em; text-align: center; }
  .notice span { color:white; display:inline-block; font-size:.8em; font-weight:normal; text-transform: uppercase; }

  .ml-button { background:#dec560; color:#17142d; border:none; border-radius:.42em; clip-path:polygon( 10% 0, -10% 100%, 100% 100%, 100% 0); padding:.69em; }
      .ml-button:hover { background:#c6ac3d; color:#fff }

  .newsletter { margin:0 0; padding:2em; }
  .newsletter h2 { text-transform:none; }
  .ml-form-embedContainer { }
    button.ml-button, input { background:hotpink; color:white; border:0; border-radius:0; box-shadow:none; font-size:1em; line-height:1.5; padding:.5em 1em; }
      button.ml-button { border-radius:0; font-size:1.5em; outline:0; padding:.5em 1.5em; transition:all .2s ease-out; }
        button.ml-button:hover { background:darkorchid; color:white; }
      input::placeholder { color:silver; }
    input[type=checkbox] { display:inline-block; }
    input[type=email] { background:ivory; color:black; outline:1px solid white; outline-offset:.25em; margin:0 0 .8em; padding:.75em; width:calc(100% - 2em); }
    label { font-weight:bold; }
      label div { display:inline-block; }

    .ml-error input { background: url(https://bucket.mlcdn.com/images/default/error-icon.png) 98% center no-repeat #fff!important; background-size: 24px 24px!important; outline-color:crimson; }
    .ml-error .label-description, .ml-error .label-description p, .ml-error .label-description p a, #mlb2-1661160.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow.ml-error .label-description p, #mlb2-1661160.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow.ml-error .label-description p:first-letter { color: crimson; }

    .ml-form-recaptcha{margin-bottom:20px;float:left}.ml-form-recaptcha.ml-error iframe{border:solid 1px crimson}
    @media screen and (max-width:768px){
      .ml-form-recaptcha{transform:scale(.77);-webkit-transform:scale(.77);transform-origin:0 0;-webkit-transform-origin:0 0}
    }


.skip { position:absolute; top:-666em; }
  .skip:focus { position:relative; top:auto; }

.purchase { align-items:flex-end; background:#17142d; border:solid white; border-width: 2px 0; display:flex; flex-flow:row wrap; margin:2em auto; padding:.5em .25em; text-align:center; }
  .purchase li { align-content:center; background:none; font-size:.8em; font-style: italic;  list-style:none; margin:.5em 0; padding:0 .5em; text-transform: uppercase; width:calc(25% - 1.0625em);  }
    .purchase li::before { display:none; }
  .purchase a { color:white; font-weight:normal; }
    .purchase a:hover { color:#f5e75d; text-decoration: none; transition: color .2s ease-in;}
    .purchase .price { background:hotpink; border-radius:.25em; color:#f5e75d; display:block; font-style: normal; font-weight: bold; margin:.25em 0; padding:.25em; text-transform:uppercase; }
    .purchase .vendor { font-size:1.2em; font-weight: bold; text-transform: none; }

#the-loop { float:right; margin:1em 0 1em 1em; width:calc(50% - 1em)}

.home { padding-top:0; text-align: center; }
  .home h1 { font-size:2em; }
  .home aside { float: right; margin: 1em 0 1em 2em; width: 42%; }
    .home aside::after { clear:both; content:''; height:0; visibility: collapse; }
    .home aside strong { display:block; }
  .home .primary { margin: 0 auto 2em; }

body.jump { background:#dec560; box-shadow:0 0 0 2px black, 0 0 0 4px #dec560, 0 0 0 6px black, 0 0 0 8px #dec560, 0 0 0 10px black, 0 0 0 12px #dec560, 0 0 0 14px black; border-radius:2em; color:black; margin:2em; }
  body.jump a { color:#2b2861; }
  body.jump strong { color:black; }
  body.jump #header { margin:-.65em 0 -2em; padding:0 0 2em; }
  body.jump #logo svg { min-width:200px; width:65%; }
    body.jump #logo svg path { fill:black !important; }
      body.jump #logo svg path.logo-text { fill:#dec560 !important; stroke:#dec560 !important; }
  body.jump .button.primary {margin-bottom:1em; }

.rules {}
  .rules h1 { border-top: 12px double hotpink; margin-top:4.2em; padding-top: 2.9em; }
    .rules h1:first-of-type { border-top:0; margin: 0 0 1em; padding: 0; }
  .rules #rules-menu, .rules #rules-menu ul { display:block; }

.scanner {}
  .scanner h2 { line-height:2.5em; text-align: center; }
  .scanner main > ul { align-items: stretch; display:flex; flex-flow: row wrap; gap:1em; }
  .scanner main > ul > li { width:calc(32.9% - 4em); }
    .scanner main > ul > li::before { content: "";}
    .scanner main > ul > li:last-of-type { width:calc(100% - 3.5em); }


.console {}
  .console h3 { text-align: center; }
  .console main > ul { align-items: stretch; display:flex; flex-flow: row wrap; gap:1em; }
  .console main > ul > li { width:calc(50% - 4em); }
    .console main > ul > li:nth-child(3) { width:calc(100% - 4em); }
    .console main > ul > li::before { content: "";}
    .console main > ul > li:last-of-type { width:calc(100% - 3.5em); }
  .console main > ul > li:nth-child(3) ol { column-count:2; }


.timer { font-size:3em; font-weight: bold; text-align: center; }

ul.inline, .inline li { list-style:none; margin:0; padding:0; }
  ul.inline { margin:1em 0; text-align: center; }
    .inline li { display:inline-block; margin:0 .5em; }

.parallax {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: solid rgba(0,0,0,.2);
    border-width: 5px 0;
    left: 0;
    min-height: 500px;
    /*margin: -530px 0 0;*/
    overflow: hidden;
    position: absolute;
    right: 0;
    height: 500px;
    z-index: -1;
}



/* thanks lists */

.thanks { margin:1em; padding:0; text-align:center; }
.thanks li { background:none; display:inline-block; font-size:1.2em; line-height:1.8; list-style:none; margin:0 0 0 1em; padding:0; }
.thanks li::after, .thanks li:first-of-type::before { color:orchid; content:'\272D'; display:inline-block; opacity:.25; padding:0 0 0 1em; }
.thanks li:first-of-type::before { padding:0 1em 0 0; }
  ul li::before { content:''; }

@media (max-width:42em) {
  .purchase li { width:calc(50% - 1.0625em);  }
  .scanner main > ul > li { width:calc(50% - 4em); }
}

@media (max-width:520px) {
  #header p { font-size:1.29em; }
  #the-loop { float:none; margin: 1em auto; width: auto; }
  .home aside { float:none; margin:1em; width:auto; }
  nav { font-size:1em; }
    nav ul { margin:1em; }
      nav li { margin:.5em; padding:0; }
  .scanner main > ul > li { width:calc(100% - 4em); }

  .console main > ul > li, .console main > ul > li:nth-child(3) { width:calc(100% - 4em); }
    .console main > ul > li:nth-child(3) ol { column-count:1; }
}

@media (min-width:42em) {
  #rules-menu { background:none; bottom:auto; display:none; float:left; font-size:1.2em; height:auto; left:auto; overflow:auto; padding:0 .5em; position:sticky; right:auto; text-align: left; top:1em; width:20%; z-index:10; }
    #rules-menu::after { display:none; }
    #rules-menu ul { margin:0; overflow:hidden; padding:0; }
    #rules-menu li { background:none; display:block; margin:0 0 .25em; }
    #rules-menu li::before { display:none; }
      #rules-menu a { background:none; border:0; display:inline-block; margin:0 0 .12em; padding:.25em .5em; }
      #rules-menu .active a { background:hotpink; border-color:hotpink; border-radius:0; }
  .rules main { margin:0 0 0 25%; padding-right:1em; width:calc(75% - 1em); }
}

@media (min-width:56em) {
  .scanner main, .console main { max-width:100%; }
    .scanner main > ul > li { width:calc(25% - 4.25em); }
      .scanner main > ul > li:nth-child(5), .scanner main > ul > li:nth-child(6) { width:calc(50% - 4em); }

    .console main > ul > li, .console main > ul > li:nth-child(3) { width:calc(33% - 4em); }
      .console main > ul > li:nth-child(4), .console main > ul > li:nth-child(5), .console main > ul > li:nth-child(6), .console main > ul > li:nth-child(7) { width:calc(50% - 4em); }
      .console main > ul > li:nth-child(3) ol { column-count:1; }
}
