html {
	font-size: 62.5%;
	/* min-width: 1200px; */
  }

body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	width:100%;
	height:100%;
}


  @media screen and (max-width: 600px){
	canvas{
	  height: calc(100vw - 20px)!important;
	}
  }

#preloader{
	width: 100%;
	height: 100%;
	background-color:white;
	text-align: center;
	position: absolute;
	top:0;
	left:0;
	z-index: 9999999999;
	overflow: hidden;
}

#preloader div img {
	width: 6rem; 
	height: 9rem;
}


 #preloader div {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
 }
 #preloader div h2{
	 margin: 0;
	 font-family: 'Open Sans Condensed', sans-serif;
	 font-size: 16px;
 }

#engravingCanvas, #backCanvas {
	display: none;
}


#penHolder{
	display:block;
	position: absolute;
	top:3rem;
	left:3rem;
	z-index: 999;
	cursor:pointer;
}

#penHolder.hidden{
	display:none;
}


#pen {
	width:7rem;
	height:7rem;
}

#pen img {
	width: 100%;
	height: auto;
}

#hoverText {
	display:none;
	border-radius: 0.8px;
	background-color: #f0c7c2;
	font-family: OpenSans;
	font-size: 1.8rem;
	font-weight: 600;
	font-style: normal;
	font-stretch: normal;
	line-height: normal;
	letter-spacing: normal;
	text-align: center;
	color: #3c3d41;
	padding: 1rem 1.6rem;

	position: absolute;
    top: -2.4rem;
    left: 5.7rem;
    width: 13.3rem;
}

#penHolder:hover #hoverText {
	display: block;
} 

#popup {
	display: none;
	border-radius: 8px;
	box-shadow: 0 0 40px -5px rgba(0, 0, 0, 0.33);
	background-color: #ffffff;
	position: absolute;
	width: 45rem;
	height: 35rem;
	top: 1rem;
	left: 1rem;
}

#popup.visible {
	display: block;
}

#label {
	font-family: OpenSans;
	font-size: 3.5rem;
	font-weight: bold;
	font-style: normal;
	font-stretch: normal;
	line-height: normal;
	letter-spacing: normal;
	text-align: center;
	color: #000000;
	margin: 4rem 10% 0;
	border-bottom: solid 1px rgba(151, 151, 151, 0.43);
	padding-bottom: 2rem;
}

#inputHolder {
	text-align: center;
	margin-top: 6rem;
}

#inputHolder input {
	text-align: center;
	font-size: 4rem;
	border: none;
	border-bottom: solid 1px rgba(151, 151, 151, 0.43);
	width: 50%;
}

#engravingButton {
	background-color: #f0c7c2;
	font-family: OpenSans;
	font-size: 2.5rem;
	font-weight: 600;
	font-style: normal;
	font-stretch: normal;
	line-height: normal;
	letter-spacing: normal;
	text-align: center;
	color: #000000;
	width: 6rem;
	margin: 0 auto;
	margin-top: 6.5rem;
	padding: 1.5rem 18rem;
	cursor: pointer;
}

#rotate-scroll {
	position: absolute;
    bottom: 2%;
    left: 50%;
	transform: translate(-50%, 0);
	font-family: OpenSans;
	font-size: 2rem;
	text-align: center;
	color: #BEBEBE;
}

#rotate-scroll img {
	width: 10rem;
}


  @media screen and (max-width: 600px){

    #popup {
		display: none;
		top: 50%;
    	left: 50%;
		transform: translate(-50%, -50%);
		width:100%;
		box-shadow: none;
	}   

	#popup.visible {
		display: block;
	}

	#pen {
		width:5rem;
		height:5rem;
	}

    #label {
	font-family: OpenSans;
	font-size: 4rem;
	font-weight: bold;
	font-style: normal;
	font-stretch: normal;
	line-height: normal;
	letter-spacing: normal;
	text-align: center;
	color: #000000;
	margin: 5rem 0 0;
	border-bottom: solid 1px rgba(151, 151, 151, 0.43);
	padding-bottom: 1rem;
}

	#inputHolder {
		text-align: center;
		margin-top: 5rem;
	}

	#inputHolder input {
		text-align: center;
	    font-size: 5rem;
	    border: none;
		border-bottom: solid 1px rgba(151, 151, 151, 0.43);
		width:50%;
	}

	#engravingButton {
		background-color: #f0c7c2;
		font-family: OpenSans;
		font-size: 2.5rem;
		font-weight: 600;
		font-style: normal;
		font-stretch: normal;
		line-height: normal;
		letter-spacing: normal;
		text-align: center;
		color: #000000;
		margin: 0 auto; 
	    margin-top: 3rem;
		padding: 1.5rem 8rem;
		cursor: pointer;
	}

	#rotate-scroll {
		font-size: 1.2rem;
	}
	
	#rotate-scroll img {
		width: 5rem;
	}
}




/* FONT SIZE */
@media screen and (max-width: 1600px){
	html{
	  font-size: 59.0277%;
	}
  }
  @media screen and (max-width: 1400px){
	html{
	  font-size: 55.5555%;
	}
  }
  @media screen and (max-width: 1200px){
	html{
	  font-size: 52.0833%;
	}
  }