@font-face{font-family:"Anton";
src:url("../../assets/font/Anton-Regular.ttf") format("truetype")}
@font-face{font-family:"Anonymous Pro";
src:url("../../assets/font/AnonymousPro-Bold.ttf") format("truetype")}


html, body{
    font-size: 32px;
    font-family: 'Anton', sans-serif;
    background-color: #161229;     
}
div#game{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
canvas{
    display:block;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#centerContainer {
    display:block;
    margin: 0;
    position: absolute;
    width: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    visibility:visible;
    text-align: center;
    min-width: 320px;
    background-color: #161229;

}
.submitbtn {
    float: left;
}

.resetbtn {
    float: right;
}
.carousel-item {
    height: 100vh;
    background-size: cover;
    background-position: center center;
    background-image: url("../../assets/images/menu-background.jpg");

}
.carousel-item .carousel-content {
    margin: 0;
    color: white;
    font-size: 1.5em;
    font-family: 'Anton';
    line-height: 1.15em;
}
.subtitle {
    font-size: 0.5em;
    letter-spacing: 0.02em;
    line-height: 1.25em;
}


.title {
    padding-bottom: 30px;
}

#cookieText {
    padding-top: 30px;
}

#colorMagenta {
    color: #ff0090;
}
#colorBlue {
    color: #004efe;
}

#colorAqua {
    color: #00ffde;
}
#colorYellow {
    color: #f3f503;
}
#colorGrey {
    color: #423c5e;
}

#emailInput {
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    font-family: 'Anonymous Pro';
    font-size: 10px;
    text-align: center;
    width: 70%;
    height: 50px;
    letter-spacing: 0.3em;
    color: #736bad;
    margin: auto;
}

form {
    padding-top: 20px;
    margin:  auto;
}
.carousel-content {
    padding-top: 5%;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #736bad;
    opacity: 1; /* Firefox */
  }
#emailInput:focus{
    color: #736bad;
    outline: none;
}
#emailInput:focus::-webkit-input-placeholder { color:transparent; }
#emailInput:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
#emailInput:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
#emailInput:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */
#noThanks {
    font-size: 48px;
    color: red;
    text-decoration: none;
}
#element1 {display:inline-block;margin-right:5px;} 
#element2 {display:inline-block;} 
#dataText {
    font-family: 'Anonymous Pro';
    font-size: 12px;
    color: #474264;
    text-align: center;
    margin: auto;
}

a {
    text-decoration: underline;
    color: #f3f503;
}
a:link {
    color: #f3f503;
    text-decoration: underline;

}

.cookiesText {
    font-family: 'Anonymous Pro';
    font-size: 32px;
    text-align: center;
}

.gameText {
    font-family: 'Anonymous Pro';
    font-size: 32px;
    visibility: hidden;
}
/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 90px;
    height: 51px;
  }
  
  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #474264;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 39px;
    width: 39px;
    left: 6px;
    bottom: 6px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #00ff66;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 0px #474264;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(39px);
    -ms-transform: translateX(39px);
    transform: translateX(39px);
  }

  .buttons {
      padding-left: 10%;
      padding-right: 10%;
  }

  .submitbtn {
    opacity: 0.8;
  }
  .submitbtn:hover {
    opacity: 1;
  }
  .resetbtn {
    opacity: 0.8;
  }
  .resetbtn:hover {
    opacity: 1;
  }

  .form-inline {
    padding-top: 20px;  
    padding-bottom: 30px;
      font-family: 'Anonymous Pro';
      font-size: 12px;
      color: #474264;

  }
  .form-inline .form-control { 
    display: inline-block !important; 
    width: auto!important
}
.form-check-input {
    width: 20px;
    height: 20px;
}

p {
    line-height: 16px;
}

  .controls {
      display: inline-block;
      font-family: 'Anonymous Pro';
      font-size: 12px;
      color: #474264;
      padding-left: 10px; 
      padding-bottom: 30px;
      text-align: center;
  }
  /* Rounded sliders */
  .slider.round {
    border-radius: 51px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

  /* The switch - the box around the slider */
.switch-small {
    position: absolute;
    width: 40px;
    height: 24px;
  }
  
  /* Hide default HTML checkbox */
  .switch-small input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .slider-small {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #474264;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider-small:before {
    position: absolute;
    content: "";
    height: 13px;
    width: 13px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider-small {
    background-color: #ff0090;
  }
  
  input:focus + .slider-small {
    box-shadow: 0 0 0px #474264;
  }
  
  input:checked + .slider-small:before {
    -webkit-transform: translateX(13px);
    -ms-transform: translateX(13px);
    transform: translateX(13px);
  }
  
  /* Rounded sliders */
  .slider-small.round {
    border-radius: 17px;
  }
  
  .slider-small.round:before {
    border-radius: 50%;
  }