.cPrequelP{
      
      color:red;
  }
div,p{
    
    text-wrap:balance;
}

h3{
    line-height:80%;
    
    
}

.cSignupH3{
    
}
body{
	  background-image: url("https://jotthat.com/assets/images/Reliable.jfif");
    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;
}




.cPreP{
    color:white;
    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:-100%;
	margin-left: 37.5%;
	padding-bottom: 2%;
	border-radius:7px;
	box-shadow: 1px 10px 10px #101010;
	 animation: animate-form 4s forwards;
	 margin-bottom:1vh;
}

@keyframes animate-form {
        0% {
            margin-top:-100%;
        }
        100% {
            margin-top:1%;
        }
    }

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

.cEmail{
    
     box-shadow: 1px 1px 5px black;
     
}

.cFreeCode{
    
     box-shadow: 1px 1px 5px black;
 
}



.cTogglePassword{
	
	width: 10%;
	height: 10%;
	border: 1px solid black;
	margin-left:45%;
	margin-top:1%;
	cursor:pointer;
	background-color:#efefef;
	padding-top:1%;
	border-radius:7px;
	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: 15px;
    background-color:#eeeeee;
    cursor:pointer;
    border-radius:0;
    border-width:0;
   
}

select {
  /*-webkit-appearance:none;*/
 text-align:center;
  
}



.opt1{
   
   background-color:#7280a8ee; 
   color:white;
  
}
.opt2{
  background-color:#4d5363;   
   color:white;

}

.opt3{
   
   background-color:#7280a8ee; 
      color:white;

  
}

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

.cSignupButton{
   display:none;
    
}

.cFalseSignup{
     cursor:pointer;
	box-shadow: 1px 1px 5px black;
	border: 4px solid #7280a8;
	border-radius:4px;
	font-size:1.125rem;
	background-color:#eeeeee;
	width:40%;
	margin-left:30%;
user-select:none;
	    -moz-user-select:none;
	    -webkit-user-select: none; /* Safari */
        -ms-user-select: none; /* IE 10 and IE 11 */
    
}

.cFalseSignup:hover{
    background:#cccccc;
    
}

.cCheckEmailDiv{
    
    position:absolute;
    display: none;
    align-items:center;
	grid-template-rows: auto auto auto auto;
	grid-template-columns: 80%;
	grid-auto-flow: row;
	gap:5vh;
    width:100%;
    height:auto;
    top:0;
    left:0;
   background-image: linear-gradient(#4d5363,#7280a8ee,#7280a8ee,#4d5363);
   padding-top:5vh;
   text-align:center;
   padding-left:10%;
   box-sizing:border-box;
    
    
    
}

.cCheckEmailLabel2,.cShowEmailDiv{
    background-color:#dddddd33;
    box-shadow: 1px 1px 5px black;
    
}

.cCheckEmailLabel1{
    background-color:#eeeeee;
    box-sizing:border-box;
    padding-top:1%;
    font-size:1.125rem;
}

.cCheckLabel2{
    
    font-weight:bold;
    font-size:1.5rem;
}



.cShowEmailDiv{
    display:grid;
    align-items:center;
     box-sizing:border-box;
     font-size:1.5rem;
     text-align:center;
     
}

.cCheckEmailInnerDiv{
    display:grid;
    align-items:center;
    grid-template-columns: 30% 1fr;
	grid-template-rows: auto;
	grid-auto-flow: columns;
	grid-gap:7%;
}

.cCheckEmailGood,.cCheckEmailCancel{
    display:grid;
    align-items:center;
    padding:2%;
    background-color:#eeeeee;
    box-shadow: 1px 1px 5px black;
    box-sizing:border-box;
    border-radius: calc((100vw + 100vh) / 2 / 70);
    cursor:pointer;
    	user-select:none;
	-moz-user-select:none;
	 -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
}
.cH2{
  font-size:2rem;  
    
}

.cTermsWords{
    font-size:1rem;
}
.cCheckEmailGood{
    padding:3%;
}

.cCheckEmailGood:hover{
     background-color:#cccccc;
    
}

.cCheckEmailCancel:hover{
    background-color:#cccccc;
}

.cTermsOfServiceDiv{
    height:auto;
    
}
.cTermsCheckbox{
    
    height:2vh;
    width:2vh;
}

.cTermsCheckbox + label{
         
            font-size:1.5rem;
            color:orange;
        }
#submitBtn {
    font-size:1.5rem;
    margin-top:2vh;
    margin-bottom:2vh;
    cursor:pointer;
   
}

.cBackToIndex{
    text-wrap:pretty;
    text-align:center;
    
}

.errorP{
    	background-image: linear-gradient(to left, #FFFFFF00,#FFFFFF33,white,white, white, white,#FFFFFF33,#FFFFFF00);
    color:red;
    font-size:1rem;
    max-width:70%;
    margin-left:15%;
}

a{
    padding:6px;
    border-radius:4px;
   background-color:#170a01;
   color:#e5d9c9;
   border:1px solid #e5d9c9;
   
}

a:hover{
  box-shadow: 1px 1px 5px black;  
    
}
a:link{
   /* color:red;*/
    
}

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%;
			    }
			    
			    .cCheckEmailDiv{
			        
			        grid-template-columns: 90%;
			        padding-left: 5%;
			    }
			    
		
		} 
			@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)  and (min-width:400px){
			    .cPreP{
			        font-size:1.3rem;
			    
			        
			    }
			     .cFormDiv{
                    width:80%;
                    margin-left:10%;
                }
            
      
        
                h3{font-size:2rem;}
                    .cThemeLabel, .cTheme{font-size:2rem;}
                .cUsername,.cPassword, .cEmail,.cFreeCode,               .cFalseSignup{
                    font-size:1.5rem;
            
                }
                
                .cThemeInfo{font-size:1.2rem;}
                .cBackToIndex{
                    
                    font-size:1.125rem;
                }
                
                .errorP{font-size:1.3rem;}
			    
			  
			}
			
				
			@media  screen and (orientation: portrait) and (max-aspect-ratio: 9/16)  and (max-width:400px){
			     
			}
			
				/*phones landscape*/
			@media  screen and (min-aspect-ratio: 16/9) and (any-pointer:coarse) {
			    
			}
	
	
	
    /*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){
      
       
  }

     
    /*medium*/
      @media  screen and (min-width:600px) and (orientation:portrait)and (any-pointer: coarse) {
          
          .cPreP{
                font-size:1.7rem;
                padding-left:2%;
                padding-right:2%;
               
            }
            
        .cFormDiv{
            width:70%;
            margin-left:15%;
        }
        
        h3{font-size:2.5rem;}
        .cThemeLabel, .cTheme{font-size:2rem;}
        .cUsername,.cPassword, .cEmail,.cFreeCode,.cThemeInfo, .cFalseSignup{
            font-size:2rem;
            
        }
        
        .cFalseSignup{
            font-size:2.2rem;
        }
        
        .cBackToIndex{font-size:2rem;}
        
  
       .cCheckEmailLabel1{
           font-size:2rem;
       } 
       .cCheckLabel2{
           font-size:2.25rem;
       }
       
       .cShowEmailDiv{
           font-size:2.2rem;
           
       }
       .cCheckEmailGood, .cCheckEmailCancel{
           
           font-size:1.5rem;
       }
       
         .cTermsCheckbox + label{
            font-size:2rem;
        }
        
        .cSubmitButton{
            font-size:2.3rem;
        }
        
       .cTermsWords{
          font-size:1.5rem; 
       }
      .errorP{font-size:2rem;}
  }
  
  	/*large-ipad*/
	@media screen 
	and (min-width: 900px) 
	and (orientation:portrait)
	and (any-pointer: coarse){
	    .cPreP{
                font-size:2.2rem;
                padding-left:2%;
                padding-right:2%;
               
            }
            
            .cFormDiv{
            width:70%;
            margin-left:15%;
        }
            
      
        
        h3{font-size:3rem;}
        .cThemeLabel, .cTheme{font-size:2.8rem;}
        .cUsername,.cPassword, .cEmail,.cFreeCode,.cThemeInfo{
            font-size:2.5rem;
            
        }
        
        .cFalseSignup{font-size:3rem;}
        .cCheckEmailGood, .cCheckEmailCancel{
           
           font-size:2.2rem;
       }
        
        .cBackToIndex{font-size:2.5rem;} 
	   .cH2{
	       
	       font-size:3.2rem;
	   }
	    .cTermsCheckbox + label{
            font-size:2.3rem;
        }
        
        .cSubmitButton{
            font-size:3.4rem;
           
        }
        
       .cTermsWords{
          font-size:2.2rem; 
       }
		 .errorP{font-size:2.5rem;}	    
		
}

/*big assed tablet*/
	@media screen 
	and (min-width: 1200px) 
	and (orientation:portrait) 
	and (any-pointer: coarse){
	    
	    .cPreP{
                font-size:2.8rem;
                padding-left:2%;
                padding-right:2%;
                
            }
            
            .cFormDiv{
            width:70%;
            margin-left:15%;
        }
            
      
        
        h3{font-size:4.2rem;}
        .cThemeLabel, .cTheme{font-size:3.5rem;}
        .cUsername,.cPassword, .cEmail,.cFreeCode,.cThemeInfo{
            font-size:3rem;
            
        }
        
        .cFalseSignup{font-size:3.5rem;}
        .cBackToIndex{font-size:3rem;} 
        
         .cTermsCheckbox + label{
            font-size:3rem;
        }
        
	    .cCheckEmailLabel1{
           font-size:3rem;
       } 
       .cCheckLabel2{
           font-size:3.5rem;
       }
       
       .cShowEmailDiv{
           font-size:3.3rem;
           
       }
       
          .cTermsWords{
          font-size:2.2rem; 
       }
       
       
       .cCheckEmailGood, .cCheckEmailCancel{
           
           font-size:3rem;
       }
        .errorP{font-size:3rem;}
	   
}
/*/////////////////////////Landscape///////////////*/

@media screen 
	and (min-width: 700px) 
	and (min-aspect-ratio: 6/5) and (any-pointer: coarse){
	   
	   .cPreP{
                font-size:1.2rem;
                padding-left:2%;
                padding-right:2%;
                
            }
            
            .cFormDiv{
            width:50%;
            margin-left:25%;
        }
            
      
        
        h3{font-size:1.8rem;}
        .cThemeLabel, .cTheme{font-size:1.3rem;}
        .cUsername,.cPassword, .cEmail,.cFreeCode,.cThemeInfo, .cFalseSignup{
            font-size:1.3rem;
            
        }
        
        .cBackToIndex{font-size:1.5rem;} 
	   
	    .cCheckEmailLabel1{
           font-size:2rem;
       } 
       .cCheckLabel2{
           font-size:2.25rem;
       }
       
       .cShowEmailDiv{
           font-size:2.2rem;
           
       }
       .cCheckEmailGood, .cCheckEmailCancel{
           
           font-size:1.5rem;
       }
       
       .cTermsWords{
           font-size:1.2rem;
       }
       
       .cSubmitButton{
           font-size:2rem;
       }
       
        .errorP{font-size:1.3rem;}
	    
}
/*iPad landscape*/
	@media screen 
	and (min-width: 900px) 
	and (min-aspect-ratio: 6/5) and (max-aspect-ratio: 1.7) and (any-pointer:coarse) {
	      h3{font-size:2.2rem;}
	      .cFalseSignup{font-size:1.7rem;}
	      .cThemeLabel, .cTheme{font-size:1.6rem;}
	    .cTermsCheckbox + label{
            font-size:2.2rem;
        }
        
        .cTermsWords{
          font-size:1.8rem; 
       }
       
       .cSubmitButton{
            font-size:2.5rem;
           
        }
         .errorP{font-size:1.6rem;}
            
 
}


/*Large tablets landscape*/
@media screen and (min-width:1100px) and (min-aspect-ratio: 6/5) and (any-pointer:coarse){
   .cPreP{
                font-size:1.7rem;
                padding-left:2%;
                padding-right:2%;
                
            }
            
            .cFormDiv{
            width:50%;
            margin-left:25%;
        }
            
      
        
        h3{font-size:2.8rem;}
        .cThemeLabel, .cTheme{font-size:2rem;}
        .cUsername,.cPassword, .cEmail,.cFreeCode,.cThemeInfo{
            font-size:2rem;
            
        }
	      .cFalseSignup{font-size:2.3rem;}
        
        .cH2{
            font-size:2.6rem;
            
        }
        .cShowEmailDiv{
            
            font-size:2.9rem;
       
        }
        
        .cCheckEmailGood, .cCheckEmailCancel{
           
           font-size:2.2rem;
       }
        
         .cTermsWords{
          font-size:1.8rem; 
         
       }
       
         .cTermsCheckbox + label{
            font-size:2.3rem;
        }
        
         .cBackToIndex{font-size:2rem;} 
             .errorP{font-size:2rem;}
	    
}



/*Big tablets landscape*/
@media screen and (min-width:1280px)and (min-aspect-ratio: 6/5) and (any-pointer:coarse){
     h3{font-size:3rem;}
     .cFalseSignup{font-size:2.5rem;}
            .cCheckEmailLabel1{
           font-size:3rem;
       } 
       .cCheckLabel2{
           font-size:3.5rem;
       }
       
       .cShowEmailDiv{
           font-size:3.3rem;
           
       }
       .cCheckEmailGood, .cCheckEmailCancel{
           
           font-size:2.5rem;
       }
	    
}

/*Big Assed tablets landscape*/
@media screen and (min-width:1500px)and (min-aspect-ratio: 6/5) and (any-pointer:coarse){
    
       .cPreP{
                font-size:2rem;
                padding-left:2%;
                padding-right:2%;
                
            }
            
            .cFormDiv{
            width:50%;
            margin-left:25%;
        }
            
      
        
        h3{font-size:3rem;}
        .cThemeLabel, .cTheme{font-size:2.5rem;}
        .cUsername,.cPassword, .cEmail,.cFreeCode,.cThemeInfo{
            font-size:2.5rem;
            
        }
        
         h3{font-size:3.5rem;}
     .cFalseSignup{font-size:3rem;}
        .cBackToIndex{font-size:2.5rem;} 
        
        .cTermsCheckbox + label{
            font-size:3rem;
        }
        
            .errorP{font-size:2.5rem;}
     
}