* {
  box-sizing: border-box;
  cursor:inherit;
}

html {
  height: 100%;
  width: 100%;
  overflow:hidden;
}

body:nth-of-type(1) { /* for more specificity to overwrite reset.css */
  position:absolute;
  --vh:1vh;
  width:100%;
  height:calc(100 * var(--vh));
  overflow:hidden;
  font-family:Arial, Helvetica, sans-serif;
  background-color:black;
  --sub-bgcolor:#82627e;
  --sub-bgcolor-transparent:#82627ede;

  user-select: none;
  margin: 0px;
  padding: 0px;
  width: 100%;
}

#mainContainer,#mainMenu {
  display:none;
}

#login > .hero {
  display:none;
}

img-p {
  display:inline-flex;
}
material-button {
  display:inline-flex;
}
.fullScreen {
  position: absolute;
  top: 0px;
  left: 0px;
  width:100%;
  height:100%;
  color: white;
  background-color: black;
  overflow: hidden;
  transition: all 1s;
}
#gameContent.fullScreen {
  background-color:white;
}
#terms {
  z-index:175;
  position:absolute;
  bottom:10px; left:10px;
  font-size:24px;
  text-decoration:underline;
  text-shadow:0px 0px 15px white;
  display:flex;
  justify-content: center;
  align-items: center;
}
/*
#login {
  z-index:100;
  transform:translateY(0%);
}
*/
.loginContainer {
  --input-width: 150px;
}
#sLogin {
  opacity:1;
  display:table;
}
#aLogin {
  opacity:0;
  display:none;
}
.loginContainer>tbody>tr>td>div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loginContainer>tbody>tr>td>div>div {
  display: flex;
  width: 100%;
  margin-bottom: 4px;
}

.loginContainer>tbody>tr>td>div>div>div:first-child {
  margin-left: 50%;
  transform: translateX(-50%);
}

.loginContainer>tbody>tr>td>div>div>div> :is(input[type=text], input[type=password]) {
  padding-top: 14px;
  padding-bottom: 0px;
  padding-left: 7px;
  position: relative;
}

.loginContainer>tbody>tr>td>div>div:nth-child(-n+3)>div:first-child::after {
  color: #666666;
  position: absolute;
  top: 2px;
  left: 5px;
}

#sLogin.loginContainer>tbody>tr>td>div>div:nth-child(1)>div:first-child::after {
  content: 'Name';
}

#sLogin.loginContainer>tbody>tr>td>div>div:nth-child(2)>div:first-child::after {
  content: 'Game ID';
}

#aLogin.loginContainer>tbody>tr>td>div>div:nth-child(1)>div:first-child::after {
  content: 'Username';
}

#aLogin.loginContainer>tbody>tr>td>div>div:nth-child(2)>div:first-child::after {
  content: 'Password';
}

.loginContainer>tbody>tr>td>div>div> :nth-child(n+2) {
  transform: translateX(calc(var(--input-width) / -2));
}

.loginNotifier {
  display:inline;
  font-weight:bolder;
  color:black;
  font-size:40px;
}





.waitElement {
  border-radius:50%;
  background-color:white;
  border:none;
  width:20px;
  height:20px;
  position:absolute;
  left:calc(50%);
  top:calc(50%);
  --waitRadius:50px;
  --baseTransform:translate(-50%,-50%) rotate(calc(var(--wNum) * 360deg / 8)) translateX(var(--waitRadius));
/*  transform-origin: calc(-1 * var(--waitRadius)) 0%; */
  transform:translateX(var(--waitRadius)) rotate(calc(var(--wNum) * 360deg / 8));
  animation-name:waitbounce;
  animation-duration:1s;
  animation-iteration-count: infinite;
  animation-delay:calc(var(--wNum) * 1s / 8)
}
@keyframes waitbounce {
  0% {
    transform:var(--baseTransform) scale(0%);
  }
  50% {
    transform:var(--baseTransform) scale(100%);
  }
  100% {
    transform:var(--baseTransform) scale(0%);
  }
}
.waitElement:nth-child(1) { --wNum:1 }
.waitElement:nth-child(2) { --wNum:2 }
.waitElement:nth-child(3) { --wNum:3 }
.waitElement:nth-child(4) { --wNum:4 }
.waitElement:nth-child(5) { --wNum:5 }
.waitElement:nth-child(6) { --wNum:6 }
.waitElement:nth-child(7) { --wNum:7 }
.waitElement:nth-child(8) { --wNum:8 }
.waitElement:nth-child(9) { --wNum:9 }

#waitScreen {
  display:none;
  z-index:150;
  background-color:rgba(0,0,0,0.5);
  transition:all 1s;
  opacity:0;
}

#indexLoadProgress {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:white;
  font-weight:bold;
  opacity:1;
  transition:all 0.25s;
}

#menubar {
  z-index:89;
  position:absolute;
  top:0px;
  right:0px;
  background-color:rgba(50,50,50,0.7);
  display:none;
  flex-direction:column;
  overflow:hidden;
  height: 100%;
  width: 150px;
  transition:0.7s all;
}
#menubar > * {
  flex-shrink:0;
}

#controlContent {
  flex-grow:1;
  display: flex;
  flex-direction: column;
}

.menubutton {
  background-color: #333;
  color: #fff;
  cursor: default;
  text-align:center;
  border-left:1px solid grey;
  border-right:1px solid grey;
  border-bottom:1px solid grey;
  box-sizing:border-box;
  position:absolute;
  right:0px;
  top:0px;
  z-index:87;
  transition:1s all;
  user-select:none;
  font-size:40px !important;
}
#menubar_occluder {
  background-color:black;
  opacity:0;
  z-index:88;
  display:none;
  transition:0.7s all;
}
#logout_button {
  margin-top:auto;
}

#splashscreen {
  position: absolute !important;
  max-width: 100vw;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 200;
  opacity: 1;
  background-color: black;
}

.splashscreen_cardotomy {
  display: flex;
  justify-content: center;
  align-items: center;
  animation-name: fadeout;
  animation-duration: 0.5s;
  animation-delay: 3s;
  animation-fill-mode: forwards;
}

.splashscreen_cardotomy>div:nth-child(1) {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 80%;
}

.splashscreen_cardotomy>div:nth-child(2) {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 5%;
  position:absolute;
  top:85%;
  left:25%;
  color:white;
  animation-name: fadeout;
  animation-duration: 1s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}

.splashscreen_cardotomy>div>div {
  position: relative;
  animation-name: fadeout;
  animation-duration: 1s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}

.splashscreen_cardotomy>div>div> :nth-child(1) {
  color: black;
  font-size: inherit;
  text-shadow: 0px 0px 15px #ffffff;
}

.splashscreen_cardotomy>div>div> :nth-child(2) {
  color: white;
  text-shadow: 0px 0px 15px #000;
}

.splashscreen_cardotomy>div>div> :nth-child(2)>span {
  font-size:30%;
}


.splashscreen_cardotomy>div>div> :nth-child(3) {
  background-color: wheat;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  animation-name: cardotomy_back;
  animation-delay:0.1s;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  transform:scaleX(0);
}

@keyframes fadeout {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes cardotomy_back {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }

  50% {
    transform-origin: left;
    transform: scaleX(1);
  }

  51% {
    transform-origin: right;
    transform: scaleX(1);
  }

  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}

input[type=text].thicc,
input[type=password].thicc {
  width: var(--input-width);
  height: 49px;
  font-size: 20px;
}

input[type=button].thicc {
  background-color: transparent;
  color: white;
  font-size: 20px;
  height: 40px;
  width: var(--input-width);
  box-sizing: border-box;
  border-top: 2px solid white;
  border-left: 2px solid white;
  border-bottom: 2px solid grey;
  border-right: 2px solid grey;
  border-radius:10px;
}

input[type=button].thicc:active {
  border-top: 2px solid grey;
  border-left: 2px solid grey;
  border-bottom: 2px solid white;
  border-right: 2px solid white;
  padding-top: 2px;
  padding-left: 2px;
}

input[type=button].thicc:focus {
  outline: none;
  filter: brightness(110%);
}

input[type=button].thicc:hover {
  filter: brightness(110%);
}

#account_button {
  margin-bottom:10px;
}

.numberSelector {
/*
  --numberSelectorWidth:35px;
  --numberSelectorHeight:60px;
*/
  --rOffset:0deg;
  position:relative;
  width:var(--numberSelectorWidth);
  height:var(--numberSelectorHeight);
  transform-style: preserve-3d;
  color:white;
  animation-duration: 0.5s;
}
.numberSelector> div {
  position:absolute;
  --direction:-1;
  --sin60:0.86602540378;
  --translateOffset:calc(var(--sin60) * var(--numberSelectorHeight) / 2);
  --rY:0.1deg; /* chrome rendering bugfix */
  width:var(--numberSelectorWidth);
  height:calc(var(--numberSelectorHeight) / 2);
  left:calc(50% - var(--numberSelectorWidth) / 2);
  top:calc(50% - var(--numberSelectorHeight) / 4);
  border-left:1px solid black;
  border-right:1px solid black;
  display:flex;
  justify-content: center;
  align-items: center;
  overflow:hidden;
  box-sizing: border-box;
  background-image: linear-gradient(to bottom , red, darkred 30%, darkred 70%, red );
  animation-name: rotateNumberSelector;
  animation-fill-mode: forwards;
  animation-duration:inherit;
/*  animation-play-state: paused; */
}

.numberSelector> :nth-child(1) {
  --childNum:1;
}
.numberSelector> :nth-child(2) {
  --childNum:2;
}
.numberSelector> :nth-child(3) {
  --childNum:3;
  text-shadow:0px 0px 11px gold;
}
.numberSelector> :nth-child(4) {
  --childNum:4;
}
.numberSelector> :nth-child(5) {
  --childNum:5;
}
.numberSelector> :nth-child(6) {
  --childNum:6;
}

@keyframes rotateNumberSelector {
  0% {
    transform:rotateY(var(--rY)) translateZ(calc(-1 * var(--translateOffset))) rotateX(calc(var(--rOffset) - (var(--childNum) - 3) * 60deg)) translateZ(var(--translateOffset));
  }

  100% {
    transform:rotateY(var(--rY)) translateZ(calc(-1 * var(--translateOffset))) rotateX(calc(var(--rOffset) - (var(--childNum) - 3 - var(--direction)) * 60deg)) translateZ(var(--translateOffset));
  }
}

.twinkle {
  animation-name: twinkle;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes twinkle {
  0% {
    filter: drop-shadow(-5px -5px 3px rgba(255, 255, 255, 0)) drop-shadow(5px -5px 3px rgba(255, 255, 255, 0.3)) drop-shadow(5px 5px 3px rgba(255, 255, 255, 0.3)) drop-shadow(-5px 5px 3px rgba(255, 255, 255, 0.3));
  }

  25% {
    filter: drop-shadow(-5px -5px 3px rgba(255, 255, 255, 0.3)) drop-shadow(5px -5px 3px rgba(255, 255, 255, 0)) drop-shadow(5px 5px 3px rgba(255, 255, 255, 0.3)) drop-shadow(-5px 5px 3px rgba(255, 255, 255, 0.3));
  }

  50% {
    filter: drop-shadow(-5px -5px 3px rgba(255, 255, 255, 0.3)) drop-shadow(5px -5px 3px rgba(255, 255, 255, 0.3)) drop-shadow(5px 5px 3px rgba(255, 255, 255, 0)) drop-shadow(-5px 5px 3px rgba(255, 255, 255, 0.3));
  }

  75% {
    filter: drop-shadow(-5px -5px 3px rgba(255, 255, 255, 0.3)) drop-shadow(5px -5px 3px rgba(255, 255, 255, 0.3)) drop-shadow(5px 5px 3px rgba(255, 255, 255, 0.3)) drop-shadow(-5px 5px 3px rgba(255, 255, 255, 0));
  }

  100% {
    filter: drop-shadow(-5px -5px 3px rgba(255, 255, 255, 0)) drop-shadow(5px -5px 3px rgba(255, 255, 255, 0.3)) drop-shadow(5px 5px 3px rgba(255, 255, 255, 0.3)) drop-shadow(-5px 5px 3px rgba(255, 255, 255, 0.3));
  }

}

.modal {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  backdrop-filter: blur(3px);
  display:flex;
  justify-content: center;
  align-items: center;
  transition:0.25s opacity;
  opacity:0;
  font-size:min(3vw,calc(4 * var(--vh)));
}
.modal > div {
  filter: drop-shadow(0px 0px 9px black);
  background-color: #cccccc;
  color: black;
  display:flex;
  justify-content: center;
  align-items: center;
  flex-wrap:wrap;
  width:67%;
  border-radius: 15px;
  transition:0.25s transform;
}
.modal > div.darkDialog {
  color:white;
  background-color:#393939;
  background-image:none;
}
.modal > div > * {
  font-size:inherit;
  margin:var(--vh);
}
.modalHeader {
  width:100%;
  white-space:nowrap;
  text-align: center;
}
.modal input[type=text], .modal input[type=password] {
  width:100%;
  border-radius:15px;
}
.modal > div > :is(input[type=button],button) {
  width:30%;
}


.modal > div > .sbutton {
  font-size:14px;
}
.sbutton {
  border-radius:10px;
  font-size:14px;
  border-top: 2px solid white;
  border-left: 2px solid white;
  border-bottom: 2px solid grey;
  border-right: 2px solid grey;
  background-color:#cccccc;
  color:black;
  line-height:1em;
  height:40px;
}
/* for images */
.modal > div > button.sbutton {
  font-size:inherit;
  height:1.2em;
}
.sbutton > img {
  height:0.8em;
}

.sbutton:active {
  border-top: 2px solid grey;
  border-left: 2px solid grey;
  border-bottom: 2px solid white;
  border-right: 2px solid white;
  padding-top: 0.1em;
  padding-left: 0.1em;
  line-height:0.9em;
}

.sbutton:focus {
  outline: none;
  filter: brightness(110%);
}

.sbutton:hover {
  filter: brightness(110%);
}
.modalDialog > div {
  width:100%;
  position: relative;
}

.modalDialog > div > *:is(input[type=text], input[type=password]) {
  padding-top: 0.5em;
  padding-bottom: 0px;
  padding-left: 0.5em;
  font-size:inherit;
}

.modalDialog > div > *:is(input[type=text], input[type=password]):not(:placeholder-shown) {
  font-weight:bolder;
  color:#ff0d0d;
}

.modalDialog > div::after {
  color: #666666;
  position: absolute;
  top: calc(0.2 * var(--vh));
  left: 1.5em;
  font-size:50%;
}

.modalDialog > div:nth-of-type(2)::after {
  content: 'First Name';
}
.modalDialog > div:nth-of-type(3)::after {
  content: 'Last Name';
}
.modalDialog > div:nth-of-type(4)::after {
  content: 'Email';
}
.modalDialog > div:nth-of-type(5)::after {
  content: 'Username';
}
.modalDialog > div:nth-of-type(6)::after {
  content: 'Password';
}
.modalDialog > div:nth-of-type(7)::after {
  content: 'Confirm Password';
}

.modal > div.revalidateLogin {
  width:unset;
  flex-direction: column;
  align-items: center;
  flex-wrap:nowrap;
  align-content: center;
}
.modal > div.revalidateLogin > div:nth-of-type(n+2) {
  width:calc(100% - calc(2 * var(--vh)));
}
.revalidateLogin.modalDialog > div:nth-of-type(2)::after {
  content: 'Username';
}
.revalidateLogin.modalDialog > div:nth-of-type(3)::after {
  content: 'Password';
}


.modalDialog > div {
  --required:'';
}

.modalDialog > div::before {
  color: red;
  position: absolute;
  top: calc(0.2 * var(--vh));
  right: calc(0.4 * var(--vh));
  content:var(--required);
}
.subscriptionInfo {
  display:flex;
  justify-content: space-around;
  align-items: center;
}
.subscriptionInfo > div {
  display: flex;
  flex-direction: column;
}
.subscriptionInfo .sbutton, .subscriptionInfo ~ input[type=button].sbutton {
  font-size:min(14px, 1em);
  padding-left: 0.5em;
  padding-right: 0.5em;
}
.subscriptionInfo ~ input[type=button].sbutton {
  width:max(30%, 10em);
}

.subscriptionInfo input[type=button].sbutton:active {
  padding-left:0.6em;
  padding-right:0.4em;
}
.subscriptionInfo .sbutton:nth-child(n+2) {
  margin-top:var(--vh);
}

#accountSettings,.planSelectDialog {
  backdrop-filter: unset;
  background-color:white;
}
:is(#accountSettings,.planSelectDialog) > div {
  filter: unset;
  background-color: unset; 
}

.planSelectDialog :is(.signupPlanMonthly,.signupPlanAnnual) {
  text-align:center;
  font-size:75%;
  padding:1em;
  margin:1em;
  border-radius: 10px;
  background-color: #dddddd;
}
.planSelectDialog :is(.signupPlanMonthly,.signupPlanAnnual):hover {
  cursor:pointer;
  background-color: #f1f1f1;
}
.planSelectDialog .costTitle {
  font-weight:bold;
}
.planSelectDialog .newLine {
  height:0px;
  width:100%;
}
.planSelectDialog .costSpacer {
  display:none;
}

#login {
  position:absolute;
  top:0px;
  left:0px;
  height:100%;
  width:100%;
  overflow:hidden;
  z-index:100;
  background-color:black;
  transform:translateY(0%);
  transition:all 1s;
}

.menuTitle {
  color:white;
  font-size:23px;
  text-align:center;
  border: solid;
  border-image: linear-gradient(to right, rgb(255 255 255 / 0%) 10%, white 50%, rgb(255 255 255 / 0%) 90%) 0 0 1 0 / 4px 0px;
  padding-bottom: 0.5em;
  margin-bottom: 0.5em;
}
.menuTitle:nth-of-type(1) {
  margin-top:1.5em;
}
input[type=button].thicc.thinn {
  width:80%;
  margin-top:0.5em;
  margin-left:auto;
  margin-right:auto;
}

.wlink {
  text-decoration: underline;
  font-weight:bold;
  cursor:pointer;
}
.wlink:hover {
  color:#777777;
}

.glowbutton,
input[type=button].glowbutton {
  animation-name: glowbutton;
  animation-duration: 0.5s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  /* animation-timing-function: linear; */
}

@keyframes glowbutton {
  0% {
    box-shadow: 0 0 0px 0px rgba(0, 0, 0, 0);
  }

  100% {
    background-color: red;
    color: rgba(255, 255, 0, 1);
    box-shadow: 0 0 30px 10px rgba(255, 255, 0, 1);
  }
}

.svgText,
.svgText>foreignObject,
.svgText>foreignObject>div {
  display: inherit;
  align-items: inherit;
  justify-content: inherit;
  align-content: inherit;
  text-align: inherit;
}

.svgText,
.svgText>foreignObject>div {
  width: 100%;
  height: 100%;
}