:root {
  --radius-barely:4px;
  --radius-medium:0.5em;
  --radius-mega:1em;

  --shadow-barely: 0 0 2px hsla(0, 0%, 0%, 0.4);
  --shadow-major: 0px 0px 3px hsla(0, 0%, 0%, 0.4);

  --page-max-width:656px;

  --input-padding: 0.5em;
  --input-max-width: 90%;

  --boldish: 600;

  --avatar-size:4em;
  --avatar-size-bigger:4.5em;

  --font-size-ittybitty:0.65rem;
  --font-size-petite:0.75rem;
  --font-size-smaller:0.9rem;
  --font-size-larger:1.1rem;
  --font-size-honker: 1.25rem;
  --font-size-bigchungus: 2rem;

  --pinwheel-size:100em;

  --header-margin: 0.5em;

  --nav-padding: 3em;
  --nav-item-height:1.25em;
  --nav-overlay-offset:2em;

  /*------------------------*/

  --color-off-white: #F9F9F9;
  --color-orange:#F6B567;
  --color-orange-alt:#A57945;
  --color-darkorange: #F4895F;
  --color-darkorange-alt: #AC6043;
  --color-yellow: #F8E16F;
  --color-yellow-alt: #D4C05F;
  --color-green: #95CF92;
  --color-green-alt: #7BAB79;
  --color-green-contrast: #3A5139;
  --color-beige: #FFF6E1;
  --color-beige-alt: #C9C2B1;
  --color-lightbeige:#FFFCF5;
  --color-lightbeige-alt:#C9B38A;
  --color-black: #242424;
  --color-blue: #369ACC;
  --color-blue-alt: #236384;
  --color-red: #D55648;
  --color-lightgrey: #E5E5E5;
  --color-darkgrey: #686868;

  /*------------------------*/

  --color-mainwrapper:                var(--color-off-white);
  --color-mainwrapper-border:         white;

  --color-card:                       var(--color-beige);
  --color-card-border:                var(--color-beige-alt);

  --color-card-alt:                   var(--color-lightbeige);
  --color-card-alt-border:            var(--color-lightbeige-alt);

  --color-cardcomponent:              var(--color-lightbeige);
  --color-cardcomponent-border:       var(--color-lightbeige-alt);

  --color-rowodd:                     var(--color-beige);
  --color-rowodd-border:              var(--color-beige-alt);
  --color-roweven:                    var(--color-lightbeige);
  --color-roweven-border:             var(--color-lightbeige-alt);

  --color-primarybutton:              var(--color-blue);
  --color-primarybutton-border:       var(--color-blue-alt);
  --color-primarybutton-icon:         white;
  --color-primarybutton-text:         white;

  --color-secondarybutton:            var(--color-green);
  --color-secondarybutton-border:     var(--color-green-alt);
  --color-secondarybutton-icon:       white;

  --color-togglebutton:               var(--color-orange);
  --color-togglebutton-border:        var(--color-orange-alt);
  --color-togglebutton-icon:          var(--color-black);
  --color-togglebutton-text:          var(--color-black);

  --color-togglebutton_active:        var(--color-darkorange);
  --color-togglebutton_active-border: var(--color-darkorange-alt);
  --color-togglebutton_active-icon:   var(--color-black);

  --color-primarynav:                 var(--color-lightbeige);
  --color-primarynav-border:          var(--color-lightbeige-alt);
  --color-primarynavitem:             var(--color-blue);
  --color-primarynavitem_active:      var(--color-red);

  --color-notificationbadge:          var(--color-red);
  --color-notificationbadge-border:   white;

  --color-backbutton:                 var(--color-beige);
  --color-backbutton-border:          var(--color-beige-alt);
  --color-backbutton-icon:            var(--color-red);

  --color-disabled:                   var(--color-lightgrey);
  --color-disabled-border:            var(--color-darkgrey);
  --color-disabled-text:              var(--color-darkgrey);
  --color-disabled-icon:              var(--color-darkgrey);

  --color-navoverlay:                var(--color-beige);
  --color-navoverlay-border:         var(--color-beige-alt);

  --color-input:                      white;
  --color-input-border:               var(--color-beige-alt);

  --color-griditem:                   white;
  --color-griditem-border:            transparent;

  --color-griditem_selected:          var(--color-blue);
  --color-griditem_selected-border:   var(--color-blue-alt);

  --color-messagestatus-icon:         var(--color-black);

  --color-gear1:                      var(--color-darkgrey);
  --color-gear2:                      var(--color-darkorange);
  --color-gear3:                      var(--color-green);

  --color-workbutton:                 var(--color-blue);
  --color-workbutton-border:          var(--color-blue-alt);

  --color-dialog:                     var(--color-lightbeige);
  --color-spinner:                    var(--color-blue);

  --color-welcomestep:                var(--color-green-alt);
  --color-welcomestep_active:         var(--color-green);

  --color-contentgraphic:             var(--color-red);

  --color-help:                       var(--color-lightbeige);
  --color-help-border:                var(--color-lightbeige-alt);
  --color-help-bullet:                var(--color-red);

  --color-help_alt:                   var(--color-lightbeige);
  --color-help_alt-border:            var(--color-lightbeige-alt);

  --color-favorite:                   var(--color-orange);

  --color-team-expiry:                var(--color-red);
  --color-team-expiry-text:           white;

  --color-header:                     var(--color-red);

  --color-boringtext:                 var(--color-darkgrey);

  --color-first:                      var(--color-darkorange);
  --color-first-border:               var(--color-darkorange-alt);
  --color-second:                     var(--color-orange);
  --color-second-border:              var(--color-orange-alt);
  --color-third:                      var(--color-yellow);
  --color-third-border:               var(--color-yellow-alt);
}

[hidden] { display: none !important; }

@font-face {
  font-family: 'Open Sans';
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: url('/app/static/fonts/opensans-latin-normal-v34.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-display: swap;
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  src: url('/app/static/fonts/opensans-latin-semibold-v34.woff2') format('woff2');
}

* {
  user-select: none;
}

html, body {
  margin:0;
  padding:0;
  font-family: "Open Sans";
  font-size: 24px;
  position: relative;
  background-color: var(--color-mainwrapper);
  background-attachment: fixed;
  color:var(--color-black);
  /* https://heropatterns.com/ aztec */
  background-image: url("data:image/svg+xml,%3Csvg width='64' height='128' viewBox='0 0 32 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 28h20V16h-4v8H4V4h28v28h-4V8H8v12h4v-8h12v20H0v-4zm12 8h20v4H16v24H0v-4h12V36zm16 12h-4v12h8v4H20V44h12v12h-4v-8zM0 36h8v20H0v-4h4V40H0v-4z' fill='%23ffffff' fill-opacity='1' fill-rule='evenodd'/%3E%3C/svg%3E");
}

body > wrapper {
  display: block;
  box-sizing: content-box;
  min-height: 100vh;
  max-width: var(--page-max-width);
  overflow-x: clip;
  margin:0 auto;
  background-color: var(--color-mainwrapper);
  position: relative;
  padding: 0;
}
#template-iframe {
  display: none;
}
#screens {
  display: block;
  position: relative;
  background-color: var(--color-mainwrapper);
}
#screens>section {
  display: none;
  box-sizing: border-box;
  min-height: 100vh;
  padding-bottom:var(--nav-padding);
}
#screens>section.fullscreen {
  min-height:100vh;
  box-sizing:border-box;
  padding:2em;
  padding-bottom: 0;
}
#screens>section.active {
  display: block;
}
section > header {
  margin: 0 0  var(--header-margin) 0;
  padding:0.5em;
  position: relative;
}
section > header h1 {
  font-size: var(--font-size-honker);
  font-weight:var(--boldish);
  text-align: center;
  margin: 0;
}
section > header h2 {
  font-size: var(--font-size-smaller);
  font-weight: normal;
  text-align: center;
  margin: 0 0 0.5em 0;
}
section > h2 {
  margin:0;
  font-size: 1em;
  font-weight:var(--boldish);
  text-align: center;
}

member-leaderboard {
  display: block;
  margin-bottom: 2em;
}

primary-nav {
  position: fixed;
  display: block;
  bottom: 0em;
  z-index: 1000;
  background-color: var(--color-primarynav);
  border-top: 1px solid var(--color-primarynav-border);
  text-align: center;
  max-width: var(--page-max-width);
  width: 100vw;
}
primary-nav item {
  display: inline-block;
  position: relative;
  font-size: var(--font-size-honker);
  margin:0 0.5em;
  padding:0.5em 0.5em 0.25em 0.5em;
  cursor: pointer;
  height:var(--nav-item-height);
  width:var(--nav-item-height);
}
primary-nav blinger {
  position: absolute;
  top: 0.3em;
  right: 0.1em;
  height: 0.6em;
  width: 0.6em;
  border-radius: 10em;
  background-color: var(--color-notificationbadge);
  border: 2px solid var(--color-notificationbadge-border);
}
primary-nav item svg {
  display: inline-block;
  position: absolute;
  top:25%;
  left:25%;
  height: 1em;
  fill:var(--color-primarynavitem);
}
back-button {
  display: none;
  position: absolute;
  height: 1.75em;
  width: 1.75em;
  top: 0.5em;
  left: 0.5em;
  padding: 0.2em;
  background-color: var(--color-backbutton);
  border: 1px solid var(--color-backbutton-border);
  border-radius: 10em;
  text-align: center;
  cursor: pointer;
  fill: var(--color-backbutton-icon);
}
back-button svg {
  display: inline-block;
  height: 1.75em;
}
back-button.clicked {
  animation: menu-selection 0.5s;
}
primary-nav item.active {
  animation: menu-selection 0.25s;
  border-bottom:4px solid var(--color-primarynavitem_active);
}
primary-nav item.active svg {
  fill: var(--color-primarynavitem_active);
  animation: menu-selection-icon .6s;
}
@keyframes menu-selection {
  20% {
    scale:120%;
    background-color: var(--color-primarynavitem_active);
    opacity: 0.5;
  }
}
@keyframes menu-selection-icon {
  0% {
    fill:hsl(0, 0%, 50%);
    transform: scale(-1, 1);
    fill: var(--color-primarynavitem);
  }
  35% {
    margin-top:-0.2em;
  }
  36% {
    fill: var(--color-primarynavitem_active);
  }
  100% {
    transform: scale(1, 1);
  }
}

svg {
  height: 1em;
  pointer-events: none;
}

blinger {
  pointer-events: none;
}

#screen-home members {
  display: block;
}
#screen-team-interval .h-padded > *,
#screen-home .h-padded > * {
  margin-bottom: 1.5em;
}

#screen-upgrade {
  display:block;
  min-height:100vh;
  box-sizing:border-box;
  text-align: center;
  padding:2em;
}
#screen-upgrade img {
  display:inline-block;
  height:10em;;
  width:10em;;
}
#screen-upgrade h1 {
  font-size:var(--font-size-larger);
  font-weight:normal;
}
#screen-upgrade section.secondary {
  font-size:var(--font-size-smaller);
  margin-top:5em;
}
#screen-upgrade #image-wrapper {
  display:inline-block;
  position:relative;
}
#screen-upgrade svg {
  fill: gold;
  height: 5em;
  position: absolute;
  top: -0.5em;
  right: -1.75em;
}

#screen-crash {
  text-align: center;
}
#screen-crash img {
  display:inline-block;
  height:10em;
  width:10em;
  margin-bottom: 1em;
}

#loading-bg svg {
  position: absolute;
}
#loading-bg svg.one {
  fill:var(--color-gear1);
  height: 6em;
  top: 4em;
  left: calc(50% - 3em);
  animation: rotating 8s linear infinite;
}
#loading-bg svg.two {
  fill:var(--color-gear2);
  height: 4em;
  top: 9.25em;
  left: calc(50% - 0.4em);
  animation: rotating 2s linear infinite reverse;
}
#loading-bg svg.three {
  fill: var(--color-gear3);
  height: 2em;
  top: 11.5em;
  left: calc(50% - 1.75em);
  animation: rotating 1s linear infinite;
}

@keyframes rotating {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.paused {
  animation-play-state: paused !important;
}

dialog.modal {
  border:none;
  border-radius:var(--radius-medium);
  min-width: 5em;
  max-width:calc(var(--page-max-width) * 0.8);
  text-align: center;
  background-color: var(--color-dialog);
}
dialog.modal::backdrop {
  background-color:hsla(0, 0%, 0%, 0.5);
}

#busy-modal svg {
  height:2em;
  fill: var(--color-spinner);
}
#busy-modal[open] svg {
  animation: rotating 1s linear infinite;
}
#busy-modal p {
  margin:0;
  font-size: var(--font-size-petite);
}

p.no-records {
  padding:1em;
}

.h-padded {
  padding:0 1em;
}

@media (min-width: 656px) { 
  back-button {
    display: inline-block;
  }
  body > wrapper {
    border-left:1px solid var(--color-mainwrapper-border);
    border-right:1px solid var(--color-mainwrapper-border);
    box-shadow: var(--shadow-barely);
  }
}
@media (max-width: 440px) {
  html, body { font-size:22px; }
}
@media (max-width: 396px) {
  html, body { font-size:20px; }
}
@media (max-width: 367px) {
  html, body { font-size:18px; }
}
@media (max-width: 330px) {
  html, body { font-size:16px; }
}
@media (max-width: 289px) {
  html, body { font-size:14px; }
}
@media (max-width: 258px) {
  html, body { font-size:12px; }
}