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;
}

a {
  color:cyan;
}

a:hover {
  opacity:0.8;
}

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;
  }
}


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

.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;
}


.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;
}

@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;
  }
}

@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;
  }
}

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

.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;
}

@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;
  }
}

.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;
}
.navbar-link span {
  cursor:pointer;
}
.navbar-link:hover {
  opacity:0.8;
}
.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;
}

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

  color:rgb(214, 212, 211);
  display:block;
  padding:10px 20px;
  white-space:nowrap;
  text-decoration:none;
}
.navbar-inner-li:hover {
  background-color:rgb(30,30,30);
}