.my-ul-group {
  padding-left:0px;
}

.my-ul-group > li {
  list-style-type: none;
  padding: 16px;
  background-color: #6d6865;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

@media (max-width: 768px) {
  .my-ul-group > li {
    padding:8px;
  }
}

.two-cols-container {
  width:100%;
  display:flex;
  padding:0px 2%;
  text-align:center;
}
.two-cols-container > div {
  width:50%;
  padding:0px 1.5% 1.5% 1.5%;
  text-align:left;
}

@media (max-width: 1100px) {
  .two-cols-container {
    display:inherit;
  }
  .two-cols-container > div {
    width:100%;
    max-width:850px;
    margin:auto;
  }
  .two-cols-container > div:not(:last-child) {
    padding-bottom:50px;
  }
}


.two-cols-container-inner {
  width:100%;
  display:flex;
  padding:0px 1.5%;
  text-align:center;
}
.two-cols-container-inner > div {
  width:50%;
  padding:0px 1% 1% 1%;
  text-align:left;
}

@media (max-width: 600px) {
  .two-cols-container-inner {
    display:inherit;
  }
  .two-cols-container-inner > div {
    width:100%;
    max-width:500px;
    margin:auto;
  }
  .two-cols-container-inner > div.carousel-img-container {
    max-width:300px;
  }
  .two-cols-container-inner > div:not(:last-child) {
    padding-bottom:2%;
  }
}


@media (max-width: 650px) {
  .hideIfWidthLessThan650 {
    display:none;
  }
}

.semiTransparentOnHover:hover {
  opacity:0.85;
}


.rc-ytp-large-play-button {
  border: none;
  background-color: transparent;
  padding: 0;
  color: inherit;
  text-align: inherit;
  font-size: 100%;
  font-family: inherit;
  cursor: default;
  line-height: inherit;

  position: absolute;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 48px;
  margin-left: -34px;
  margin-top: -24px;
  -moz-transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
  -webkit-transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
  transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
}
@media (max-height: 600px) {
  .rc-ytp-large-play-button  {
    transform:scale(0.75)
  }
}
@media (max-height: 500px) {
  .rc-ytp-large-play-button  {
    transform:scale(0.6)
  }
}
@media (max-height: 400px) {
  .rc-ytp-large-play-button  {
    transform:scale(0.4)
  }
}


.rc-ytp-large-play-button svg {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%
}
.trailer-container:hover svg > path:first-child {
  -moz-transition: fill .1s cubic-bezier(0.0,0.0,0.2,1),fill-opacity .1s cubic-bezier(0.0,0.0,0.2,1);
  -webkit-transition: fill .1s cubic-bezier(0.0,0.0,0.2,1),fill-opacity .1s cubic-bezier(0.0,0.0,0.2,1);
  transition: fill .1s cubic-bezier(0.0,0.0,0.2,1),fill-opacity .1s cubic-bezier(0.0,0.0,0.2,1);
  fill: #f00;
  fill-opacity: 1
}

/* certain styles are duplicated in game.hbs */

html {
  /* prevent smaller text on mobile */
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin:0px;
  padding:0px;
  line-height: 1.5;
  font-size:14px;
  background-color:#333;
  background-image: url(/webpackAssets/blackmamba@baff0d7ce097cdfa1baf.jpg);
  color:white;
  font-family: -apple-system, system-ui, Arial, sans-serif;
}

body.lightTheme {
  background-color:white;
  background-image: url(/webpackAssets/white_wall_hash@3855a4fbf6ba712b4633.jpg);
  color:black;
}

@font-face {
	font-family: 'MiniSet2';
	src:url(/webpackAssets/MiniSet2@48e63747441d9a3bf0d8.woff2) format('woff2');
	font-weight: normal;
	font-style: normal;
  font-display: swap;
  unicode-range: U+000-5FF;
}

body.MiniSet2 {
  font-family:MiniSet2, sans-serif;
}

a {
  color:cyan;
}

a:hover {
  opacity:0.8;
}

body.lightTheme a {
  color:#0275d8;
}

html, div, span, input, button, a, textarea, canvas, table, ul, li, td, tr {
  box-sizing: border-box;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

button, button *, a, input[type=button], input[type=checkbox] {
  cursor: pointer;
}
button, input, textarea, select, option {
  font: inherit;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.1;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.75rem;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}





.root-container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding-right: 5px;
  padding-left: 5px;
  padding-bottom:15px;
}

@media (min-width: 576px) {
  .root-container {
    padding-right: 15px;
    padding-left: 15px;
    max-width: 100%;
  }
}

@media (min-width: 576px) {
  .root-container {
    width: 540px;
  }
}

@media (min-width: 768px) {
  .root-container {
    width: 720px;
  }
}

@media (min-width: 992px) {
  .root-container {
    width: 960px;
  }
}

@media (min-width: 1200px) {
  .root-container {
    width: 1140px;
  }
}

/** large white li */
.ul-group {
  padding-left:0px;
}

.ul-group > li {
  list-style-type: none;
  padding: 0.75rem 1.25rem;
  background-color: #49423E;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

.lightTheme .ul-group > li {
  background-color: #fff;
}

.clickable, .clickable * {
	cursor:pointer;
  pointer-events:all;
}

.aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25% !important;
}
.aspect-ratio iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0; top: 0;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.pixelated {
	image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
	image-rendering: pixelated;
}

.flex {
  display:flex;
  /* https://yoksel.github.io/flex-cheatsheet/

  flex-direction: column;

  vertical:     align-items:      flex-start, flex-end, center, stretch, baseline
  horizontal:   justify-content:  flex-start, flex-end, center, space-between, space-around, space-evenly
  align-content
  */
}

.bold {
	font-weight:bold;
}

.div-h {
	white-space: nowrap;
  overflow-x: hidden;
}
.div-h > div {
	display:inline-block;
	white-space: normal;
	vertical-align: top;
}
:root {
  --box_grey_normal_url:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAIAAABvrngfAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC42/Ixj3wAAAB5JREFUGFdjwA7ykuLgCCHk6WQHRISE4AgqhAIYGADbdxFNU61jTgAAAABJRU5ErkJggg==);
  --box_grey_dark_url:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAIAAABvrngfAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNvyMY98AAAAeSURBVBhXY8AOIvy84QghZGVqBESEhOAIKoQCGBgAFKsN0ax49SIAAAAASUVORK5CYII=);
  --box_grey_light_url:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAIAAABvrngfAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC42/Ixj3wAAAB5JREFUGFdjwA66G+vgCCGUm5EKRISE4AgqhAIYGAA12RdhV7oWtgAAAABJRU5ErkJggg==);
  --box_success_normal_url:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAIAAABvrngfAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC42/Ixj3wAAAB5JREFUGFdjwA4cM+3gCCGk6aoJRISE4AgqhAIYGADzEA09oxb3agAAAABJRU5ErkJggg==);
  --box_success_dark_url:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAIAAABvrngfAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC42/Ixj3wAAAB5JREFUGFdjwA6MQ43gCCGkaKEIRISE4AgqhAIYGABePAqhlBBt8gAAAABJRU5ErkJggg==);
}

.ui-box-light {
	color:white;
	padding:0px 2px 0px 2px;
}
.ui-list {
	color:white;
	padding: 6px;
}

.button {
	cursor:pointer;
	display:inline-block;
	text-align:center;
	outline:none;
  pointer-events: all;
}

.button.flex {
  display: flex;
}
.grey-theme .ui-box-light.button:hover {
	border: 2px solid rgb(25,25,25);
	background-color:var(--grey_light_color);
	border-image:var(--box_grey_normal_url) 2 fill;
	image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
}

.grey-theme .ui-box.button:hover {
	border: 2px solid rgb(25,25,25);
	background-color:var(--grey_normal_color);
	border-image:var(--box_grey_dark_url) 2 fill;
	image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
}
.grey-theme .ui-box-light {
	border: 2px solid rgb(25,25,25);
	background-color:var(--grey_light_color);
	border-image:var(--box_grey_light_url) 2 fill;
	image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
}
.grey-theme.ui-box, .grey-theme .ui-box {
	border: 2px solid rgb(25,25,25);
	background-color:var(--grey_normal_color);
	border-image:var(--box_grey_normal_url) 2 fill;
	image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
}
.grey-theme.ui-list, .grey-theme .ui-list {
	border: 2px solid rgb(25,25,25);
	background-color:var(--grey_light_color);
	border-image:var(--box_grey_light_url) 2 fill;
	image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
}
.grey-theme a {
  color:#00DDEE;
}
.grey-theme textarea, .grey-theme input:not([type=radio]):not([type=checkbox]){
	border: 2px solid rgb(25,25,25);
	background-color:var(--grey_normal_color);
	border-image:var(--box_grey_normal_url) 2 fill;
	image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
}

.ui-box-success {
	border: 2px solid rgb(25,25,25);
	background-color:var(--success_normal_color);
	border-image:var(--box_success_normal_url) 2 fill;
	image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
	color:white;
	padding:0px 2px 0px 2px;
}
.ui-box-success.button, .ui-box-success.button span {
	text-shadow:-0.1em -0.1em 0 #000,0.1em -0.1em 0 #000,-0.1em 0.1em 0 #000,0.1em 0.1em 0 #000 !important;
}
.ui-box-success.button:hover, .ui-box-success.selected {
	border: 2px solid rgb(25,25,25);
	background-color:var(--success_dark_color);
	border-image:var(--box_success_dark_url) 2 fill;
	image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
}


.navbar {
  position: relative;
  z-index:10;
  display: flex;
  align-items:center;
  border:2px solid rgb(16, 16, 16);
  box-sizing:border-box;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  margin-bottom:20px;
  padding:10px 20px;
  border-bottom:2px solid #171717;
  background-color:#292b2c;
}

body.lightTheme .navbar {
  border:2px solid rgb(240, 240, 240);
  border-bottom:2px solid #e7e7e7;
  background-color:rgba(255,255,255,0.5);
}

@media screen and (max-height: 500px) {
  .navbar {
    padding:1px 10px;
    margin-bottom:4px;
  }
}
@media screen and (max-width: 768px) {
  .navbar {
    flex-direction:column;
    align-items:normal;
  }
}
@media screen and (max-height: 200px) { /*aka when on focus input*/
  .navbar * {
    display:none;
  }
}

.navbar-toggleMobileBtn {
  color: white;
  align-self: flex-start;
  background: transparent;
  border-radius: 0.25rem;

  align-items:flex-start;
  border:1px solid rgba(255, 255, 255, 0.1);
  box-sizing:border-box;
  cursor:pointer;
  margin:0px;
  position:absolute;
  right:20px;
  top:2px;
  text-align:center;
  width:48px;
  height:48px;
}

@media screen and (max-height: 500px) {
  .navbar-toggleMobileBtn {
    top:0px;
    width:32px;
    height:32px;
  }
}
body.lightTheme .navbar-toggleMobileBtn {
  color: black;
  border:1px solid rgba(0, 0, 0, 0.1);
}

@media screen and (min-width: 768px) {
  .navbar-toggleMobileBtn {
    display:none;
  }
}

.navbar-togglerMobileIcon {
  display: inline-block;
  width: 2em;
  height: 2em;
  vertical-align: middle;
  content: "";
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

@media screen and (max-height: 500px) {
  .navbar-togglerMobileIcon {
    width: 1.5em;
    height: 1.5em;
  }
}

body.lightTheme .navbar-togglerMobileIcon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.navbar-brand {
  box-sizing:border-box;
  color:white;
  cursor:pointer;
  display:block;
  margin-right:20px;
  padding-bottom:0px;
  padding-top:0px;
  white-space:nowrap;
}
body.lightTheme .navbar-brand {
  color:black
}

.navbar-brand img {
  cursor:pointer;
  display:inline;
  vertical-align:middle;
}
.navbar-brand img:hover {
  opacity:0.8;
}


/* Element list */
.navbar-dropdown {
  box-sizing:border-box;
  color:white;
  display:flex;
}
body.lightTheme .navbar-dropdown {
  color:black;
}

@media screen and (max-width: 768px) {
  .navbar-dropdown {
    display:none;
  }
  .navbar-dropdown.mobileExpanded {
    display:flex;
  }
}

.navbar-ul {
  box-sizing:border-box;
  display:flex;
  flex-direction:row;
  padding:0px;
  margin:0px;
}
@media screen and (max-width: 768px) {
  .navbar-ul {
    flex-direction:column;
  }
}

.navbar-li {
  list-style-type: none;
  box-sizing:border-box;
  color:white;
  display:list-item;
  padding:0px 10px;
  text-align:left;
}
@media screen and (max-width: 768px) {
  .navbar-li {
    padding:10px;
  }
}
body.lightTheme .navbar-li {
  color:black;
}

.navbar-link {
  text-decoration:none;
  white-space:nowrap;
  color:rgb(175, 175, 175);
  box-sizing:border-box;
  cursor:pointer;
  display:block;
  padding:7px 10px 7px 10px;
  text-align:left;
}
body.lightTheme .navbar-link {
  color:rgb(0, 0, 0);
}

.navbar-link span {
  cursor:pointer;
}
.navbar-link:hover {
  opacity:0.8;
}
body.lightTheme .navbar-link:hover {
  opacity:0.8;
}
.navbar-link-clicked {
  opacity:0.8;
}
body.lightTheme .navbar-link-clicked {
  opacity:0.8;
}


/** when clicked */

.navbar-inner-dropdown {
  border-color:rgba(255, 255, 255, 0.15);
  border-radius:5px;
  border-width:1px;
  background-color:#393b3c;

  box-sizing:border-box;
  color:rgb(214, 212, 211);
  margin: 2.5px 0px 0px 0px;

  min-width:200px;
  padding:10px 0px 10px 0px;
  position:absolute;
  text-align:left;
  z-index:1000;
}

body.lightTheme .navbar-inner-dropdown {
  background-color:white;
  border-color:rgba(0, 0, 0, 0.15);
}


.navbar-inner-li {
  list-style-type: none;

  color:rgb(214, 212, 211);
  display:block;
  padding:10px 20px;
  white-space:nowrap;
  text-decoration:none;
}
body.lightTheme .navbar-inner-li {
  color:rgb(41, 43, 44);
}

.navbar-inner-li:hover {
  background-color:rgb(30,30,30);
}
body.lightTheme .navbar-inner-li:hover {
  background-color:rgb(225,225,225);
}