html, body {
  font-family: "Cutive Mono", monospace;
  font-weight: 400;
  font-style: normal;
  background:none;
  display:flex;
  z-index:+1;
  justify-content:center;
  align-items:center;
  margin:0;
  padding:0;
  overflow:hidden;
  height:100%;
  width:100%;
}

}
#wrapper {
	width:100%;
	background-color:#6B705C;
	margin:100px;

}
h1 {
	text-align:center;
	color:#E0E1DD;
}


#userNameInput {
      display: block; /* Display the input as a block element */
      margin-bottom: 10px; /* Add some bottom margin to create space between elements */
    }
#body {
      max-width: 600px; /* Set a maximum width for the body */
      margin: 0 auto; /* Center the content horizontally within the page */
      padding: 20px; /* Add some padding to create space between content and edges */
    }
#flip-card-back, p{
border: 1px solid #ccc;
  border-radius: 10px;
  padding: 20px; /* Add padding to create space between text and edges of the cards */
  margin: 10px;
  text-align:left;
}
button {
	 width:120px;
	 position: relative;
	 left:27%;
 }
#userNameInput {
	width:120px;
	 position: relative;
	 left:25.5%;
} 

#bg{
  position:fixed;
  top:0;
  left:0;
  width:windowWidth;
  height:auto%;
  z-index:-1;
}
canvas {
  display: block;
  z-index:-1;
   top:0;
  left:0;
  position:fixed;
  width:auto;
  height:auto;
  
}
p {
	color:#ffffff;
}