:root {
  --commandTextColor: whitesmoke;
  --navBackgroundColor: #66666666;
  --navBackgroundColor2: #666666CC;
  --commonFontFamily: "Big Shoulders Stencil", sans-serif;
  --titleFontFamily: "Drippy", sans-serif;
  --textFontFamily: "Atkinson Hyperlegible", sans-serif;
}

@font-face {
  font-family: 'Drippy';
  src: url('/fonts/adrip1.ttf');
}

.d-none { display: none; }

p {
  font-family: var(--textFontFamily);
  font-size: 14pt ;
}

.title-notdead {
  font-family: var(--commonFontFamily);
  letter-spacing: 0.25vw;
}

.text-drippy {
  font-family: var(--titleFontFamily);
  letter-spacing: 0.5vw;
}

.xbtn { 
  font-family: var( --textFontFamily);
  font-size: 1.0em;
  font-weight: 600;
}

.jumbotron {
  margin-block: 1vh;
}

.navbar {
  padding-inline: 1em;
  z-index: 5;
}
.navbar a {
  font-family: var(--titleFontFamily);
  font-size: 2em ;
}
.navbar a.navbar-brand {
  text-decoration: none;
}
.float-right {
  float: right;
}
.disabled {
  opacity: 0.65;
  user-select: none;
  pointer-events: none;
  cursor: not-allowed;
}
button {
  font-family: var(--commonFontFamily);
}
.menu-button, .menu-button:hover, menu-button:active {
  text-decoration: none;
  font-family: var(--commonFontFamily);
  user-select: none;
}
.notdead-logo {
  width: 300px;
}

.btn-outline-notdead {
  border-color: #D7228F;
  color: #D7228F !important;
  background-color: #101010;
}

.btn-outline-notdead:hover {
  border-color: #e7127F;
  color: white !important;
  background-color: #D7228F;
}

.text-notdead {
  color: #D7228F !important;
}
.navbar-brand .text-notdead {
  text-shadow: #D7228F -3px 1px 18px;
  border: solid 2px #060606;
  font-weight: bold;
  color: #d7228Faa;
}

.btn-notdead {
  background-color: #d7228F;
  border-color: #e7127F;

}

.border-notdead {
  border-color: #d7228F;
}
.suggest-form {
  background-color: transparent;
  font-size: 1.25em;
}

.suggest-form:focus {
  background-color: #06060623;
}
  .side-menu {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(350px, 95vw);
  display: none;
  z-index: 1;
  padding-block-start: 15vh;
  background: #10101088;
}
.side-menu.open {
  display: block;
}
.side-menu ul {
  list-style: none;
  padding: 0;
}
.side-menu ul li {
  padding: 0;
}
.side-menu ul li a {
  font-size: 1.1em;
  padding: 0.5em;
  width: 100%;
  border: 0;
  display: block;
  text-decoration: none;
  background-color: transparent;
}

.stage {
  background-color: transparent;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: -2;
}

.btn:focus {
  box-shadow: none;
}

.no-touch {
  user-select: none;
}

.app-pane {
  margin-block-start: max(7vh, 77px);
  height: 90%;
  width: 100%;
  padding: 2vh 2vw;
}

.ald {
  font-family: 'Atkinson Hyperlegible';

}

.contractItem {
  background-color: #D7228F17;
  font-family: 'Atkinson Hyperlegible';
  outline: solid 3px #D7228F88;
  width: 80vw;
  margin-inline: auto;
  padding: 12px;
  margin-block-end: 12px;
}

  .contractItem small {
      font-family: 'Atkinson Hyperlegible';
      font-size: 0.9em;
  }

#contracts-masterList {
  margin-block-start: 24px;
}

#contracts-masterList .contractItem:nth-child(1) {
  border-start-start-radius: 20px;
  border-start-end-radius: 20px;
}

#contracts-masterList .contractItem:last-child {
  border-end-start-radius: 20px;
  border-end-end-radius: 20px;
}

.submitCodePanel {
  display: none;
}
.submitCodePanel.show {
  display: block;
}
.sendConfButtonPanel {
  display: block;
}

.sendConfButtonPanel.hide {
  display: none;
}

.alert {
  box-shadow: #34343433 -4px -4px 10px 10px 10px;
}

.connectors {
  font-family: "Big Shoulders Stencil", sans-serif;
  letter-spacing: 4px;
  font-size: 20pt;
}

.game-stage {
  margin-block-start: 2vh;
  padding-block-start: 3vh;
  outline: solid 2px #888;
  height: 85vh;
  font-family: Roboto;
  background-color: #D7228Faa;
}

.game-stage .art {
  outline: 0;
  background-color: #101010;
  width: 94%;
  height: 56vh;
  margin-inline: auto;
  text-align: center;
  font-family: Roboto;
}

.game-stage .desc {
  width: 94%;
  margin-inline: auto;
  padding-block: 1vh;
  text-align: center;
  font-family: Roboto;
  display: block;
  height: 8vh;
}

.game-stage .buttons {
  width: 94%;
  margin-inline: auto;
  text-align: center;
  position: relative;
}

.game-stage .buttons button {
  text-align: center;
  margin-inline: auto;
  padding-block: .25vh;
  width: 50vw;
  font-size: 20pt;
  letter-spacing: 6px;
  margin-block-end: 0.25vh;
  font-family: "Big Shoulders Stencil", sans-serif;
}

.game-stage .status-message {
  background-color: transparent;
  width: 100%;
  text-align: left;
  /* outline: dotted 2px yellow; */
  
  z-index: 1000;
}

.game-stage .status-message .message-content {
  background-color: #101010;
  width: 94%;
  margin-inline: auto;
  padding-inline: 2vw;
  color: #D7228F;
  font-size: 24pt;
  font-family: "Big Shoulders Stencil", sans-serif;
  letter-spacing: 4px;
}

.game-stage .result-overlay {
  background-color: transparent;
  opacity: 0.7;
  position: fixed;
  top: 30vh;
  left: 26vw;
  width: 50vw;
  height: 30vh;
  font-size: 300;
  text-align: center;

}

.game-stage .result-overlay .fa {
  margin-block: auto;
  display: inline-block;
}

.tut-screens {
  background-color: transparent;
  height: 100%;
  padding-top: 26%;
}

.gameTokenImage {
  height: 100%;
}


/* pixels */

.pixels-container {
  
  opacity: 0.10;
}

.pixels-box {
  background-image: url('/images/pixels-acid.gif');
  width: 12vw;
  height: 12vw;
  display: inline-block;
  margin: 1vw 1vw;
}

.r90 {
  transform: rotate(90deg);
}

.r180 {
  transform: rotate(180deg);
}

.r270 {
  transform: rotate(270deg);
}

@media (max-width: 500px) {
  .navbar a {
    font-family: var(--titleFontFamily);
    font-size: 4em;
  }
}