div,p{
    
    text-wrap:balance;
}

h3{
    line-height:80%;
    
}

body{
	  background-image: url("https://jotthat.com/assets/images/Cover4.gif");
    background-repeat: no-repeat;
   width: auto;/* or your image's width*/
	height: auto; /*or your image's height*/
    margin: 0;
    padding: 0;
	background-color: #624A46;
	background-attachment: fixed;
	 background-position: center;
	 text-align:center;
}

.cHeader{
    width:80%; 
    text-align:center; 
    background-color: #222222ee; 
    margin-left:10%;  
    margin-top: 3%; 
    padding-bottom: 1%;
    box-shadow: inset 1px 2px 10px #FFFFFF;
    font-size:1rem;
}

.cPH{
    font-size:1.2rem; 
    color:white;
    padding-left:5%; 
    padding-right:5%;
    text-wrap:pretty;
    margin-bottom:-0.5vh;
   
    
}

.cP{
    font-size:0.9rem; 
    color:white;
    padding-left:5%; 
    padding-right:5%;
    text-wrap:pretty;
   
    
}

.cP2{
    font-size:0.9rem; 
    color:#dddddd;
    padding-left:5%; 
    padding-right:5%;
    text-wrap:pretty;
}




.cFormDiv{
    	background-image: linear-gradient(#4d5363,#7280a8ee,#7280a8ee,#000000);
	/*background-color: #7280a8ee;*/
	border: 2px solid #101010;/*101010*/
	width: 25%;
	text-align:center;
	margin-top:1%;
	margin-left: 37.5%;
	padding-bottom: 2%;
	border-radius: calc((100vw + 100vh) / 2 / 60);
	box-shadow: 1px 10px 10px #101010;
	height:auto;
	
	
		
} 
		
	
		
		 
		

		
    


.cPassword{
    
    box-shadow: 1px 1px 5px black;
}
.cUsername{
    
     box-shadow: 1px 1px 5px black;
     color:black;
}



.cFreeCode{
    margin-top:1.5vh;
     box-shadow: 1px 1px 5px black;
     color:black;
}



.cTogglePassword{
	
	width: 15%;
	height: 15%;
	border: 1px solid black;
	margin-left:42.5%;
	margin-top:1.5vh;
	cursor:pointer;
	background-color:#efefef;
	padding-top:1%;
	border-radius: calc((100vw + 100vh) / 2 / 60);
	box-shadow: 1px 1px 5px black;
}

.cEye{
	max-width: 100%;
	max-height: 100%;
	cursor: pointer;

}
.cThemeLabel{
    font-size:1.125rem;
   
    
}
.cTheme{
       margin-top:5%;
    font-size:1.125rem;
    
}

.cThemeInfo{
   	background-image: linear-gradient(#290e04,#290e04,#3d1902,#290e04,#290e04,#000000);
    
    background-color:#290e04; 
    color: white;
    width:80%;
    margin-left:9%;
  border-radius: calc((100vw + 100vh) / 2 / 60);
    border: 2px solid black;
    padding: 1%;
}

.cSignupButton{
    margin-top:1.5vh;
    	cursor:pointer;
	box-shadow: 1px 1px 5px black;
	border: 4px solid #7280a8;
	border-radius: calc((100vw + 100vh) / 2 / 50);
	font-size:1.125rem;
    
}

.cA{
    display:block;
    margin-top:2vh;
    
}

a:link{
    color:white;
    
}

a:visited{
    color:#e9c4f5;
    
}

	@media screen and (max-width:904px) {
		 .cFormDiv{
    	    width:40%;
			margin-left:30%;
        }
	}
        		@media screen and (max-width:585px) {
		  .cFormDiv{
		    width:60%;
		    margin-left:20%;
		  }
        		}
        		
        			@media screen and (max-width:400px) {
			    .cFormDiv{
		        width:80%;
		        margin-left:10%;
			   }
		
		} 
		
			@media screen and (min-width:866px) {
			
		}  
		
		/*phones*/

@media screen and (orientation: portrait) and (max-aspect-ratio: 9/16) {
       .cFormDiv{
		        width:80%;
		        margin-left:10%;
			   }
	.cPH{font-size:1.4rem;}
	.cP, .cP2{font-size:1.1rem;}
    .cH3{ font-size:1.7rem;}
    .cPassword, .cUsername, .cFreeCode{font-size:1.4rem;}
    .cSignupButton{font-size:1.8rem;}
    .cA{font-size:1.7rem;}

}

@media screen and (max-aspect-ratio: 9/16) and (max-width:400px){
    .cPH{font-size:1.2rem;}
	.cP, .cP2{font-size:0.9rem;}
        .cH3{
        font-size:1.5rem;
      
    }
        .cPassword, .cUsername, .cFreeCode{
            font-size:1rem;
    
        }
        .cSignupButton{
            font-size:1.2rem;
    }
    
    .cA{
    font-size:1.5rem;
}
}

/*phones landscape*/
@media screen and (min-aspect-ratio: 16/9) and (any-pointer:coarse) {
.cFormDiv{
		        width:40%;
		        margin-left:30%;
			   }
}

/*very short screen*/
@media screen and (min-aspect-ratio: 1280/500){

}
/*tablets*/
/*small*/
@media screen and (min-width:540px) and (orientation:portrait) and (any-pointer: coarse){
     .cFormDiv{
		        width:80%;
		        margin-left:10%;
			   }
	.cPH{font-size:1.3rem;}
	.cP, .cP2{font-size:1.0rem;}
    .cH3{ font-size:1.6rem;}
    .cPassword, .cUsername, .cFreeCode{font-size:1.3rem;}
    .cSignupButton{font-size:1.7rem;}
    .cA{font-size:1.6rem;}

}

/*medium*/
@media screen and (min-width:600px) and (orientation:portrait)and (any-pointer: coarse) {
    
    .cFormDiv{
		        width:60%;
		        margin-left:20%;
			   }
	.cPH{font-size:1.7rem;}
	.cP, .cP2{font-size:1.4rem;}
    .cH3{ font-size:2rem;}
    .cPassword, .cUsername, .cFreeCode{font-size:1.7rem;}
    .cSignupButton{font-size:2.1rem;}
    .cA{font-size:2rem;}

} 

/*large-ipad*/
@media screen
and (min-width: 900px)
and (orientation:portrait)
and (any-pointer: coarse){
.cFormDiv{
		        width:60%;
		        margin-left:20%;
			   }
	.cPH{font-size:2rem;}
	.cP, .cP2{font-size:1.7rem;}
    .cH3{ font-size:2.3rem;}
    .cPassword, .cUsername, .cFreeCode{font-size:2rem;}
    .cSignupButton{font-size:2.6rem;}
    .cA{font-size:2.3rem;}
}

/*big assed tablet*/
@media screen
and (min-width: 1200px)
and (orientation:portrait)
and (any-pointer: coarse){
.cFormDiv{
		        width:60%;
		        margin-left:20%;
			   }
	.cPH{font-size:3rem;}
	.cP, .cP2{font-size:2.5rem;}
    .cH3{ font-size:3.4rem;}
    .cPassword, .cUsername, .cFreeCode{font-size:3rem;}
    .cSignupButton{font-size:3.6rem;}
    .cA{font-size:3.3rem;}
}
/*/////////////////////////Landscape///////////////*/

@media screen
and (min-width: 700px)
and (min-aspect-ratio: 6/5) and (any-pointer: coarse){
   .cFormDiv{
		        width:40%;
		        margin-left:30%;
			   }
	.cPH{font-size:1.3rem;}
	.cP, .cP2{font-size:1.0rem;}
    .cH3{ font-size:1.6rem;}
    .cPassword, .cUsername, .cFreeCode{font-size:1.3rem;}
    .cSignupButton{font-size:1.7rem;}
    .cA{font-size:1.6rem;}
}
/*iPad landscape*/
@media screen
and (min-width: 900px)
and (min-aspect-ratio: 6/5) and (max-aspect-ratio: 1.7) and (any-pointer:coarse) {
.cFormDiv{
		        width:40%;
		        margin-left:30%;
			   }
	.cPH{font-size:1.5rem;}
	.cP, .cP2{font-size:1.2rem;}
    .cH3{ font-size:1.6rem;}
    .cPassword, .cUsername, .cFreeCode{font-size:1.3rem;}
    .cSignupButton{font-size:1.7rem;}
    .cA{font-size:1.6rem;}
}

/*Large tablets landscape*/
@media screen and (min-width:1100px) and (min-aspect-ratio: 6/5) and (any-pointer:coarse){
    
    .cFormDiv{
		        width:40%;
		        margin-left:30%;
			   }
	.cPH{font-size:1.5rem;}
	.cP, .cP2{font-size:1.2rem;}
    .cH3{ font-size:1.8rem;}
    .cPassword, .cUsername, .cFreeCode{font-size:1.5rem;}
    .cSignupButton{font-size:1.9rem;}
    .cA{font-size:1.8rem;}

}

/*Big tablets landscape*/
@media screen and (min-width:1280px)and (min-aspect-ratio: 6/5) and (any-pointer:coarse){
.cFormDiv{
		        width:40%;
		        margin-left:30%;
			   }
	.cPH{font-size:1.6rem;}
	.cP, .cP2{font-size:1.3rem;}
    .cH3{ font-size:1.9rem;}
    .cPassword, .cUsername, .cFreeCode{font-size:1.6rem;}
    .cSignupButton{font-size:2rem;}
    .cA{font-size:1.9rem;}

}

/*Big Assed tablets landscape*/
@media screen and (min-width:1500px)and (min-aspect-ratio: 6/5) and (any-pointer:coarse){
    .cFormDiv{
		        width:40%;
		        margin-left:30%;
			   }
	.cPH{font-size:2.3rem;}
	.cP, .cP2{font-size:2rem;}
    .cH3{ font-size:2.6rem;}
    .cPassword, .cUsername, .cFreeCode{font-size:2.3rem;}
    .cSignupButton{font-size:2.7rem;}
    .cA{font-size:2.6rem;}
}