body {
    margin: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    background-image: url("./assets/bg.jpeg");
    background-size: cover;
    backdrop-filter:  brightness(50%);
    position: relative;
    font-family: Helvetica;
}

canvas {
    display: block;
}

#canvas_container {
    width: 100%;
    height: 100vh;
}

input[type="submit"], button {
    margin-top: 0;
    border: 1px solid white;
    border-radius: 0;
    font-size: 0.8.5rem;
    text-transform: uppercase;
    padding: 0.5rem 0.9em;
    background: transparent;
    color: white;
    -webkit-font-smoothing: antialiased;
    font-weight: bold;
    cursor: pointer;
    transition: all .3s;
    width: 100%;
}

input[type="submit"]:hover, button:hover {
    background: #ffffff;
    color: #000000;
}

label {
    color:  white;
}

#form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
}
input[type="text"] {

    all: unset;
    display: block;
    border: 1px solid white;
    color: white;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    width: 100%;
    box-sizing: border-box;
}


input:-internal-autofill-selected {
    background-color: transparent!important;
    color: white!important;
}



/* TOGGLE STYLING */
.toggle {
  margin: 0 0 1.5rem;
  box-sizing: border-box;
  font-size: 0;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: stretch;
}
.toggle input {
  width: 0;
  height: 0;
  position: absolute;
  left: -9999px;
}
.toggle input + label {
  margin: .5rem 0 0 0;
  padding: 0.75rem 2rem;
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  border: solid 1px white;
  /*background-color: #FFF;*/
  opacity: 0.75;
  font-size: 0.75rem;
  line-height: 140%;
  font-weight: 500;
  text-align: center;

  transition: border-color 0.15s ease-out, color 0.25s ease-out, background-color 0.15s ease-out, box-shadow 0.15s ease-out;
  /* ADD THESE PROPERTIES TO SWITCH FROM AUTO WIDTH TO FULL WIDTH */
  /*flex: 0 0 50%; display: flex; justify-content: center; align-items: center;*/
  /* ----- */
}

#status {
    text-align: center;
    color: white;
}
.hidden {
    display: none;
}
.toggle input + label:first-of-type {

  border-right: none;
}
.toggle input + label:last-of-type {

  border-left: none;
}
.toggle input:hover + label {
  border-color: #213140;
}
.toggle input:checked + label {
  background-color: #081224;
  opacity: 1;
  color: #FFF;
  box-shadow: 0 0 10px rgba(102, 179, 251, 0.5);
  border-color: #081224;
  z-index: 1;
}
.toggle input:focus + label {
  outline: dotted 1px #CCC;
  outline-offset: 0.45rem;
}
@media (max-width: 800px) {
  .toggle input + label {
    padding: 0.25rem 0.25rem;
    flex: 0 0 33.33%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* STYLING FOR THE STATUS HELPER TEXT FOR THE DEMO */
.status {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
}
.status span {
  font-weight: 600;
  color: #B6985A;
}
.status span:first-of-type {
  display: inline;
}
.status span:last-of-type {
  display: none;
}
@media (max-width: 800px) {
  .status span:first-of-type {
    display: none;
  }
  .status span:last-of-type {
    display: inline;
  }
}


input::placeholder {
    color: rgba(255,255,255, 0.85);
    font-style: italic;
    font-weight: 200;
    font-size: 0.75rem;
}