* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
width: 100% !important;
height:100vh!important;
overflow: hidden;
}
canvas {
display: block;margin: 0 auto;
}
.p5Canvas{

  width: 100% !important;
  height:auto!important;

position: relative;
}
html {
  font-size: 62.5%;
}
body {
  font-family: "Lato", "Helvetica", Helvetica, sans-serif;
  color: #000;
  font-size: 1.8rem;
  padding: 0;
  letter-spacing: 1px;min-height: 100vh;background-color: #fff;
  background-color: #5d7f92;
}
.login-form {
  width: 100%;
  margin: 130px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  font-size: 16px;
  max-width: 420px;
  background: #0e1c39;
  border-radius: 3px;
  box-shadow: 0px 0px 12px 6px #060e22;
}
.errormes{color: red; text-align: center;display: block;}
.login-form form {
  width: 80%;
}
.form-control {
  margin-bottom: 1rem;
  width: 100%;
}
.form-control label {
  display: block;
  margin-bottom: 1rem; color:#78c14f;
}
.form-control input {
  padding: 0.375rem 0.75rem;
  width: 100%;
  font-size: 1.3rem;
  line-height: 2;
}
.form-control.gdpr{border: 1px solid #78c14f;}
.form-control.gdpr label {
  width: 91%;
  display: inline-block;
  padding: 10px 0 10px 10px;
  margin: 0px;cursor: pointer;
  font-size: 11px;
}
#gdpr, #gdpr2 {
  width: 5%;
display: inline-block;
vertical-align: super;accent-color: #78c14f;
}
.btn {
  background-image: url(/images/arrow.png);
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
  border: 2px solid #78c14f;
  border-radius: 13px;
  background-color: transparent;
  cursor: pointer;
  margin-top: 10px;
  background-repeat: no-repeat;
  background-size: 42px;
  background-position: 50%;
  height: 62px;
  width: 123px;transition: 0.3s all;
}
.btn:hover{background-color: rgba(206, 206, 206, 0.1);}
.link {
  display: inline-block;
  margin-bottom: 1rem;
}
.header {
  display: none;
}
.bodywrapper {
  position: relative;
  margin: 0 auto;
}
.homepagewrong{ background-image: url(/images/homepage/homepage-bg.png);
position: absolute;
z-index: 10;
width: 100% !important;
height: 100vh !important;
top: 0;
background-size: 100% auto;
background-repeat: no-repeat;}
.homepageqr{background-image: url(/images/homepage/qr.png);
position: absolute;
z-index: 10;
background-size: 100%;
top: 13%;
left: 10.2%;
width: 13.8%;
height: 27%;
background-repeat: no-repeat;}
.resets{
  background-image: url(/images/homepage/reset.png);
  position: absolute;
  z-index: 3;
  width: 124px;
  height: 51px;
  top: 10px;
  left: 760px;
  cursor: pointer;
}
.how2info{
  background-image: url(/images/homepage/homepage-how2play.png);
  position: absolute;
  z-index: 99;
  width: 80%;
  height: 80%;
  top: 50px;
  left: 120px;
  cursor: pointer;
  display: none;background-size: 100%;
background-repeat: no-repeat;
}
.msgs{display: none;font-size: 16px;
color: red;}
.homepageh2p{background-image: url(/images/homepage/help-button.png);
position: absolute;
z-index: 10;
cursor: pointer;
transform: scale(0.9);
transition: 0.3s all;
top: 42%;
left: 11%;
width: 12%;
height: 18%;
background-repeat: no-repeat;
background-size: 100%;}
.homepageh2p:hover{transform: scale(1);}
.startbut{background-image: url(/images/homepage/start-button.png);
position: absolute;
z-index: 10;
cursor: pointer;
transform: scale(0.9);
transition: 0.3s all;
top: 60%;
left: 8.3%;
width: 17%;
height: 35%;
background-size: 100%;
background-repeat: no-repeat;}
.startbut:hover{transform: scale(1);}
.scoreb{background-image: url(/images/homepage/score-board.png);
position: absolute;
z-index: 10;
top: 17%;
right: 2%;
width: 20%;
height: 100%;
background-size: 100%;
background-repeat: no-repeat;}
.logo{background-image: url(/images/homepage/logo.png);
position: absolute;
z-index: 10;
top: 2%;
left: 2%;
background-size: 100%;
background-repeat: no-repeat;
width: 10%;
height: 8%;}
.scoreflex{position: absolute;
top: 11%;
left: 11%;
width: 78%;}
.scoreflexw {
  display: flex;
  font-size: 1.3vw;
  line-height: 210%;
}
.scoreflex0 {
  width: 21px;
}
.scoreflex1 {
  width: 44%;
}
.scoreflex2 {
  width: 35%;
}
.scoreflex3 {
  width: 18%;
  text-align: right;
}
.finsihed{display: none; width: 100% !important;
height:100vh!important;
position: absolute;
z-index: 20;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(16px);}
.weldone {
  margin: 60px auto;
  width: 300px;
  background: #12284d;
  border-radius: 20px;
  padding: 30px;
  text-align: center;
  color: #fff;
}
#name {
  text-align: center;
  line-height: 20px;
  font-size: 15px;
}