.playButton {
	background-image: linear-gradient(90deg, #5843e4, #5a0760);
	border-radius: 5vh;
	color: white;
	display: block;
	margin: auto;
	margin-top: 30vh;
	padding: 2vh 5vw;
	height: 10vh;
	width: 20vw;
	font-size: 300%;
  }

  .inside_checkbox{
	height : 70%;
	width:  70%;
  }
  
  .field {
	background-color: rgb(249, 249, 249);
	/* border-radius: 5vh; */
	/* color: rgb(100, 42, 42); */
	display: block;
	margin: auto;
	margin-top: 5vh;
	/* padding: 2vh 5vw; */
	height: 80%;
	width: 80%;
	/* font-size: 300%; */
}

.clicked{
	/* justify-content: center; */
	/* display: flex;
	justify-content: center; */
	background-color: rgb(0, 0, 0);
	width: 70vw;
	/* height: 70vh; */
	margin:auto;
	margin-right: 15vw;
	margin-left: 15vw;
	margin-top: 10vh;
	position: relative;
	padding-top: 35%;
	/* padding-top: 25; */
	/* padding-top: 177.77% */
}
@media screen and (max-width: 900px){
  .playButton{
	  font-size: 200%;
  }
}

@media screen and (max-width: 700px){
  .playButton{
	  font-size: 150%;
  }
}

@media screen and (max-width: 530px){
  .playButton{
	  font-size: 100%;
  }
}

@media screen and (max-width: 350px){
  .playButton{
	  font-size: 50%;
  }
}

.responsive{
	display: flex;
	flex-direction: column;
}

/* @media screen and (max-width: 350px){
	.responsive{
		display:list-item;
		flex-direction: column;
	}
  } */

#myCanvas {
	background-color: rgb(124, 47, 47);
	/* position: absolute; */
	/* top: 0; */
	/* left: 0; */
	/* cursor: none; */
	width: 100%;
	height: 100%;
	margin: 0;
}

/* @media screen and (max-width: 768px) { */
	/* #canvas_container { */
		/* width: 50%; */
	  /* transform: rotate(90deg);
	  transform-origin: top right;
	  position: relative;
	  /* margin-right: 100vw; */
	  /* height: 100vw; */
	  /* width: 100vh; */
	/* } */
	/* #myCanvas {
	  height: 100%;
	  width: 100%;
	} */
  /* } */