html {
  box-sizing: border-box;
}
*,
*:after,
*:before {
  box-sizing: inherit;
}
body {
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background-size: cover;
  background-color: #343a52;
  animation: imageswap 3s infinite alternate;
  -webkit-animation: imageswap 3s infinite alternate; /* Chrome and Safari */
}

html,
body {
  height: 100%; /* Necessary for height based sizes */
}

.hidden {
  display: none !important;
}

#browser-support {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image: url(./browser-support.png);
  background-color: rgba(255,255,255,0.25);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.game-container {
  height: 100%; /**need to set a height for the container as we are resizing based on height*/
  text-align: center;
}

.responsive-embed {
  height: 100%; /* Set height here */
  display: inline-block; /* Must be inline-block */
  position: relative; /* Keep the child element contained */
}

/*Inner shadow stuff
.responsive-embed:before {
  content: " ";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 5px;
  z-index: 9999;
}
.responsive-embed:after {
  box-shadow: -5px 0 15px -15px inset;
  content: " ";
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  z-index: 9999;
}
*/

.ratio {
  height: 100%; /* Our ratio canvas is expanded to as tall as the height set above. */
  width: auto; /* Allows the width to adjust based in the height, keeping the aspect ratio */
  visibility: hidden; /* Prevents non-transparent image or alt text from showing up */
  text-align: left;
  /* transparent image with correct aspect ratio 9 by 16*/
}

.responsive-embed .embed {
  /* Force the child block to be same size as parent */
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: transparent;
}

.noselect {
  outline: none !important;
  -webkit-tap-highlight-color:transparent;
  -moz-tap-highlight-color:transparent;
  -o-tap-highlight-color:transparent;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

:focus{
  outline: none !important;
}

@keyframes imageswap {
  from {
    background-image: url(./Party_BG_Screen1.PNG);
  }
  to {
    background-image: url(./Party_BG_Screen2.PNG);
  }
}

@-webkit-keyframes imageswap /* Safari and Chrome - necessary duplicate */ {
  from {
    background-image: url(./Party_BG_Screen1.PNG);
  }
  to {
    background-image: url(./Party_BG_Screen2.PNG);
  }
}