@charset "UTF-8";
/* CSS Document */

body{
	
	margin: 0px;
	padding: 0px;
	background-color: #19181D;
	
	
   display: grid;
  grid-template-areas: 
    "nav article ads"
    "footer footer footer";
  grid-template-rows: 80px 1fr 70px;  
  grid-template-columns: 20% 1fr 15%;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  height: 100vh;
  margin: 0;
	
}



footer, article, nav, div {
  padding: 1.2em;
  }

#field {
  grid-area: footer;
  }
#circle { 
  grid-area: article;      
  }
#msg { 
  grid-area: nav; 
  }
#notify{ 
  grid-area: ads; 
  } 





#circle{
	
	height: 400px;
	width: 400px;
	border-radius: 50%;
	background: linear-gradient(#313247 0%, #19181D 30%);
	position: absolute;
	top: 20%;
	left: 35%;

}


#circle:before,
#circle:after{
	content:'';
	height: 400px;
	width: 400px;
	background: linear-gradient(#FFD1DA 0%, #FF849D 5%, #2D2133 25%);
	border-radius: 50%;
	position: absolute;
	top: 42%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-filter:blur(7px);
	z-index: -1;	
	
}

#circle:after{
	width: 415px;
	top: 35%;
	-webkit-filter:blur(14px);
	opacity: .3;
}

#msg{
	font-family: sans-serif;
	font-size: 20px;
	color: white;
	letter-spacing: 45px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	
}

#notify{
	font-family: sans-serif;
	font-size: 12px;
	color: #FFD1DA;
	letter-spacing: 2px;
	position: absolute;
	bottom: 17%;
	left: 50%;
	transform: translate(-50%,-50%);
	
}


#field{
	position: absolute;
	bottom: 8%;
	left: 54%;
	transform: translateX(-50%);
	
}



#field input{
	height: 35px;
	width: 300px;
	background-color:#101113;
	outline: none;
	border: none;
	border-radius: 35px;
	font-family: sans-serif;
	font-size: 10px;
	color: white;
	letter-spacing: 1px;
	padding-left: 15px;
}


#field button{
	height: 35px;
	width: 100px;
	background-color: #2E2D35;
	font-family: sans-serif;
	font-size: 11px;
	color: white;
	letter-spacing: 1px;
	border: none;
	outline: none;
	border-radius: 35px;
	position: absolute;
	left: -100px;
	z-index: 999;
	
}



@media all and (min-width: 320px) and (max-width: 329px) {



	#circle{
		top: 7%;
        left:4%;
		height: 200px;
		width: 200px;
	}
	
	
	#circle:before,
#circle:after{
	height: 200px;
	width: 200px;
	}
	
	
	
	
	#msg{
		
		font-size: 15px;
				
		letter-spacing: 8px;
		
        top: 25%;
        
        left: 60%;
        
        right: -70%;
            
        
			
	}
	
	
	#notify{
		top: 55%;
        left: 58%;
        right: -60%;
        font-size:9px;
        letter-spacing: 2px;
	}
	
	
	
    #field{
        
       top: 50%;
        left: 40%;
    }
	
    #field input{
        width: 200px;
    }
	
	
	#field button{
		top: 25%;
        left: 35%;
       font-size: 8px;
		
	}  


}








@media all and (min-width: 330px) and (max-width: 349px) {



	#circle{
		top: 10%;
        left:2%;
		height: 400px;
		width: 400px;
	}
	
	
	#circle:before,
#circle:after{
	height: 400px;
	width: 400px;
	}
	
	
	
	
	#msg{
		
		font-size: 20px;
				
		letter-spacing: 12px;
		
        top: 45%;
        
        left: 68%;
        
        right: -70%;
            
        
			
	}
	
	
	#notify{
		top: 70%;
        left: 70%;
        right: -60%;
        font-size:12px;
        letter-spacing: 2px;
	}
	
	
	
    #field{
        
       top: 70%;
        left: 63%;
    }
	
    #field input{
        width: 250px;
    }
	
	
	#field button{
		top: 40%;
        left: 33%;
       font-size: 8px;
		
	}  


}



@media all and (min-width: 350px) and (max-width: 374px){



	#circle{
		top: 12%;
        left:-7%;
		height: 400px;
		width: 400px;
	}
	
	
	#circle:before,
#circle:after{
	height: 400px;
	width: 400px;
	}
	
	
	
	
	#msg{
		
		font-size: 20px;
				
		letter-spacing: 15px;
		
        top: 50%;
        
        left: 58%;
        
        right: -60%;
            
        
			
	}
	
	
	#notify{
		top: 70%;
        left: 63%;
        right: -60%;
        font-size:12px;
        letter-spacing: 2px;
	}
	
	
	
    #field{
        
       top: 77%;
        left: 50%;
    }
	
    #field input{
        width: 250px;
    }
	
	
	#field button{
		top: 120%;
        left: 33%;
       font-size: 8px;
		
	}  


}






@media all and (min-width: 375px) and (max-width: 385px){


	#circle{
		top: 10%;
        left:2%;
		height: 400px;
		width: 400px;
	}
	
	
	#circle:before,
#circle:after{
	height: 400px;
	width: 400px;
	}
	
	
	
	
	#msg{
		
		font-size: 20px;
				
		letter-spacing: 15px;
		
        top: 50%;
        
        left: 62%;
        
        right: -60%;
            
        
			
	}
	
	
	#notify{
		top: 70%;
        left: 66%;
        right: -60%;
        font-size:12px;
        letter-spacing: 2px;
	}
	
	
	
    #field{
        
       top: 75%;
        left: 54%;
    }
	
    #field input{
        width: 250px;
    }
	
	
	#field button{
		top: 80%;
        left: 33%;
       font-size: 8px;
		
	}  
	


}








@media all and (min-width: 386px) and (max-width: 400px){



	#circle{
		top: 12%;
        left:-7%;
		height: 400px;
		width: 400px;
	}
	
	
	#circle:before,
#circle:after{
	height: 400px;
	width: 400px;
	}
	
	
	
	
	#msg{
		
		font-size: 20px;
				
		letter-spacing: 15px;
		
        top: 50%;
        
        left: 58%;
        
        right: -60%;
            
        
			
	}
	
	
	#notify{
		top: 70%;
        left: 63%;
        right: -60%;
        font-size:12px;
        letter-spacing: 2px;
	}
	
	
	
    #field{
        
       top: 77%;
        left: 50%;
    }
	
    #field input{
        width: 250px;
    }
	
	
	#field button{
		top: 120%;
        left: 33%;
       font-size: 8px;
		
	}  


}




@media all and (min-width: 401px) and (max-width: 419px){



	#circle{
		top: 10%;
        left:2%;
		height: 400px;
		width: 400px;
	}
	
	
	#circle:before,
#circle:after{
	height: 400px;
	width: 400px;
	}
	
	
	
	
	#msg{
		
		font-size: 20px;
				
		letter-spacing: 15px;
		
        top: 50%;
        
        left: 62%;
        
        right: -60%;
            
        
			
	}
	
	
	#notify{
		top: 70%;
        left: 66%;
        right: -60%;
        font-size:12px;
        letter-spacing: 2px;
	}
	
	
	
    #field{
        
       top: 75%;
        left: 54%;
    }
	
    #field input{
        width: 250px;
    }
	
	
	#field button{
		top: 80%;
        left: 33%;
       font-size: 8px;
		
	}  


}








@media all and (min-width: 420px) and (max-width: 450px){



	#circle{
		top: 10%;
        left:2%;
		height: 400px;
		width: 400px;
	}
	
	
	#circle:before,
#circle:after{
	height: 400px;
	width: 400px;
	}
	
	
	
	
	#msg{
		
		font-size: 20px;
				
		letter-spacing: 15px;
		
        top: 45%;
        
        left: 62%;
        
        right: -60%;
            
        
			
	}
	
	
	#notify{
		top: 70%;
        left: 66%;
        right: -60%;
        font-size:12px;
        letter-spacing: 2px;
	}
	
	
	
    #field{
        
       top: 70%;
        left: 54%;
    }
	
    #field input{
        width: 250px;
    }
	
	
	#field button{
		top: 75%;
        left: 33%;
       font-size: 8px;
		
	}  


}




@media all and (min-width: 451px) and (max-width: 480px) {



	#circle{
		top: 10%;
        left:10%;
		height: 400px;
		width: 400px;
	}
	
	
	#circle:before,
#circle:after{
	height: 400px;
	width: 400px;
	}
	
	
	
	
	#msg{
		
		font-size: 20px;
				
		letter-spacing: 22px;
		
        top: 45%;
        
        left: 61%;
        
        right: -60%;
            
        
			
	}
	
	
	#notify{
		top: 70%;
        left: 68%;
        right: -60%;
        font-size:12px;
        letter-spacing: 3px;
	}
	
	
	
    #field{
        
       top: 75%;
        left: 54%;
    }
	
    #field input{
        width: 250px;
    }
	
	
	#field button{
		top: 80%;
        left: 30%;
       font-size: 8px;
		
	}  


}




















@media all and (min-width: 481px) and (max-width: 599px) {

#circle{
		top: 10%;
        left:15%;


}
    
    
    	#msg{
		
		font-size: 20px;
				
		letter-spacing: 20px;
		
        top: 40%;
        
        left: 66%;
            
        right: -60%;
              
			
	}

    
    #notify{
		top: 75%;
        left: 60%;
        right: -30%;
        font-size:12px;
        letter-spacing: 4px;
        
	}

    
     #field{
        width: 70px;
       top: 80%;
        left: 32%;
    }
    
    
     #field input{
        width: 200px;
       
    }
    
    
    #field button{
		top: 25%;
        left: 220%;
        
		
	}  
    
    
    

}











@media all and (min-width: 600px) and (max-width: 681px) {

#circle{
		top: 10%;
        left:20%;


}
    
    
    	#msg{
		
		font-size: 20px;
				
		letter-spacing: 25px;
		
        top: 40%;
        
        left: 66%;
            
        right: -60%;
              
			
	}

    
    #notify{
		top: 75%;
        left: 55%;
        right: -30%;
        font-size:12px;
        letter-spacing: 8px;
        
	}

    
     #field{
        width: 170px;
       top: 80%;
        left: 30%;
    }
    
    
    #field button{
		top: 25%;
        left: 167%;
    
    
		
	}  
    
    

}



@media all and (min-width: 682px) and (max-width: 767px) {

#circle{
		top: 10%;
        left:20%;


}
    
    
    	#msg{
		
		font-size: 25px;
				
		letter-spacing: 25px;
		
        top: 40%;
        
        left: 58%;
        
        right: -40%;         
			
	}

    
    #notify{
		top: 75%;
        left: 55%;
        right: -30%;
        font-size:12px;
        letter-spacing: 8px;
        
	}

    
     #field{
        width: 170px;
       top: 80%;
        left: 30%;
    }
    
    
    #field button{
		top: 25%;
        left: 167%;
    
    
		
	}  
    

}



@media all and (min-width: 768px) and (max-width: 768px) {

#circle{
		top: 10%;
        left:20%;


}
    
    
    	#msg{
		
		font-size: 25px;
				
		letter-spacing: 25px;
		
        top: 40%;
        
        left: 58%;
        
        right: -40%;         
			
	}

    
    #notify{
		top: 75%;
        left: 55%;
        right: -30%;
        font-size:12px;
        letter-spacing: 8px;
        
	}

    
     #field{
        width: 170px;
       top: 80%;
        left: 30%;
    }
    
    
    #field button{
		top: 15%;
        left: 167%;
    
    
		
	}  
    

}






 @media all and (min-width: 769px) and (max-width: 850px) { 


     
     #circle{
         height: 500px;
       width: 500px;
		top: 5%;
        left:30%;
        


}
    
     
    	#circle:before,
#circle:after{
	height: 500px;
	width: 500px;
	}
       
     
     
     
    
    	#msg{
		
		font-size: 25px;
				
		letter-spacing: 35px;
		
        top: 35%;
        
        left: 74%;
        
        right: -70%;         
			
	}

    
    #notify{
		top: 70%;
        left: 65%;
        right: -30%;
        font-size:15px;
        letter-spacing: 8px;
	}

    
     #field{
        
       top: 80%;
        left: 53%;
    }
     
     
     
     #field button{
        
        left:  100%;
    }
     
     


}   




@media all and (min-width: 851px) and (max-width: 1024px) { 


     
     #circle{
          height: 500px;
       width: 500px;
		top: 5%;
        left:30%;


}
    
    
         
    	#circle:before,
#circle:after{
	height: 500px;
	width: 500px;
	}
       
    
    	#msg{
		
		font-size: 30px;
				
		letter-spacing: 35px;
		
        top: 35%;
        
        left: 74%;
        
        right: -70%;         
			
	}

    
    #notify{
		top: 70%;
        left: 65%;
        right: -30%;
        font-size:15px;
        letter-spacing: 8px;
	}

    
     #field{
        
       top: 80%;
        left: 50%;
    }
     
     
     
     #field button{
        
        left:  100%;
    }
     
     


}   










    

@media all and (min-width: 1025px) and (max-width: 1280px) {


  #circle{
      
      height: 600px;
       width: 600px;
		top: 10%;
        left:25%;


}
    
    

    	#circle:before,
#circle:after{
	height: 600px;
	width: 600px;
	}
        
    
    	#msg{
		
		font-size: 30px;
				
		letter-spacing: 40px;
		
        top: 50%;
        
        left: 65%;
        
        right: -50%;         
			
	}

    
    #notify{
		top: 75%;
        left: 63%;
        right: -30%;
        font-size:15px;
        letter-spacing: 8px;
    
	}

    
     #field{
        
       top: 85%;
        left: 44%;
    }
    
    
    
    
      #field button{
        
        left:  100%;
    }
    


}




@media all and (min-width: 1281px) and (max-width: 1490px) {
    
    
    
    #circle{
        height: 700px;
        width: 700px;
		top: 10%;
        left:25%;


}
    
      	#circle:before,
#circle:after{
	height: 700px;
	width: 700px;
	}
    
    
    	#msg{
		 
		font-size: 30px;
				
		letter-spacing: 50px;
		
        top: 50%;
        
        left: 66%;
        
        right: -50%;         
			
	}

    
    #notify{
		top: 75%;
        left: 65%;
        right: -30%;
        font-size:15px;
        letter-spacing: 10px;
	}

    
     #field{
        
       top: 85%;
        left: 47%;
    } 
    
    
    
    
     #field button{
        
        left:  100%;
    }
    
    
    
    
}








@media all and (min-width: 1491px) and (max-width: 1779px) {
 
	
	
	#circle{
		top: 10%;
        left: 25%;
		height: 700px;
		width: 700px;
	}
	
	
	#circle:before,
#circle:after{
	height: 700px;
	width: 700px;
	}
	
	
	#msg{
		
		font-size: 35px;
		
		letter-spacing: 45px;
        
        top: 50%;
        
        left: 59%;
        
        right: -30%;
		
		
	}
	
	
	
	
	#notify{
	
	font-size: 15px;
        
    top: 80%;
        
    letter-spacing: 10px;
	
	left: 45%;
}
	
	  
    #field{
        
       top: 90%;
        left: 41%;
    }
	       
    
    
     #field button{
        
        left:  100%;
    }
    
    
    
}








@media all and (min-width: 1780px) and (max-width: 1970px) {
 
	
	
	#circle{
		top: 10%;
        left: 30%;
		height: 700px;
		width: 700px;
	}
	
	
	#circle:before,
#circle:after{
	height: 700px;
	width: 700px;
	}
	
	
	#msg{
		
		font-size: 35px;
		
		letter-spacing: 40px;
        
        top: 40%;
        
        left: 51%;
		
		
	}
	
	
	
	
	#notify{
	
	font-size: 15px;
        
    top: 70%;
        
    letter-spacing: 10px;
	
	left: 50%;
}
	
	  
    #field{
        
       top: 80%;
        left: 47%;
    }
	  
    
    #field button{
        
        left:  100%;
    }
    
    
}







@media all and (min-width: 1971px) and (max-width: 2200px) {
 
	
	
	#circle{
		top: 10%;
        left: 35%;
		height: 700px;
		width: 700px;
	}
	
	
	#circle:before,
#circle:after{
	height: 700px;
	width: 700px;
	}
	
	
	#msg{
		
		font-size: 35px;
		
		letter-spacing: 45px;
        
        top: 40%;
        
        left: 53%;
		
		
	}
	
	
	
	
	#notify{
	
	font-size: 15px;
        
    top: 80%;
        
    letter-spacing: 10px;
	
	left: 53%;
}
	
	  
    #field{
        
       top: 90%;
        left: 49%;
    }
	  
    
    #field button{
        
        left:  100%;
    }
    
    
}






@media all and (min-width: 2201px) {
 
	
	
	#circle{
		top: 20%;
        left: 35%;
		height: 800px;
		width: 800px;
	}
	
	
	#circle:before,
#circle:after{
	height: 800px;
	width: 800px;
	}
	
	
	#msg{
		
		font-size: 30px;
		
		letter-spacing: 60px;
        
        top: 50%;
        
        left: 53%;
        
        
      
  
		
		
	}
	
	
	
	
	#notify{
	
	font-size: 15px;
        
    top: 75%;
        
    letter-spacing: 10px;
	
	left: 50%;
}
	
	  
    #field{
        
       top: 80%;
        left: 47%;
    }
    
     
    
    #field button{
        
        left:  100%;
    }
    
    
}






/*
@media all and (min-width: 1981px) {
 
	
	
	#circle{
		top: 20%;
        left: 35%;
		height: 800px;
		width: 800px;
	}
	
	
	#circle:before,
#circle:after{
	height: 800px;
	width: 800px;
	}
	
	
	#msg{
		
		font-size: 30px;
		
		letter-spacing: 60px;
        
        top: 50%;
        
        left: 53%;
        
        
      
  
		
		
	}
	
	
	
	
	#notify{
	
	font-size: 15px;
        
    top: 75%;
        
    letter-spacing: 10px;
	
	left: 50%;
}
	
	  
    #field{
        
       top: 80%;
        left: 47%;
    }
    
     
    
    #field button{
        
        left:  100%;
    }
    
    
}















    

/*

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

	
	
	#circle{
		top: 10%;
        left: 15%;
		height: 250px;
		width: 250px;
	}
	
	
	#circle:before,
#circle:after{
	height: 250px;
	width: 250px;
	}
	
	
	
	
	
	
	
	#msg{
		
		font-size: 15px;
				
		letter-spacing: 3px;
		
        top: 35%;
        
        left: 50%
			
	}
	
	
	#notify{
		top: 60%;
        left: 55%;
        right: -20%;
        font-size: 10px;
	}
	
	
	
    #field{
        
       top: 60%;
    }
	
    #field input{
        width: 250px;
    }
	
	
	#field button{
		top: 60%;
        left: 30%;
       font-size: 8px;
		
	}  
	
	
	
	
	

}









@media all and (min-width: 1981px) {
 
	
	
	#circle{
		top: 20%;
        left: 35%;
		height: 800px;
		width: 800px;
	}
	
	
	#circle:before,
#circle:after{
	height: 800px;
	width: 800px;
	}
	
	
	#msg{
		
		font-size: 30px;
		
		letter-spacing: 60px;
        
        top: 50%;
        
        left: 53%;
        
        
      
  
		
		
	}
	
	
	
	
	#notify{
	
	font-size: 15px;
        
    top: 75%;
        
    letter-spacing: 10px;
	
	left: 50%;
}
	
	  
    #field{
        
       top: 80%;
        left: 47%;
    }
    
     
    
    #field button{
        
        left:  100%;
    }
    
    
}















    

/*

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

	
	
	#circle{
		top: 10%;
        left: 15%;
		height: 250px;
		width: 250px;
	}
	
	
	#circle:before,
#circle:after{
	height: 250px;
	width: 250px;
	}
	
	
	
	
	
	
	
	#msg{
		
		font-size: 15px;
				
		letter-spacing: 3px;
		
        top: 35%;
        
        left: 50%
			
	}
	
	
	#notify{
		top: 60%;
        left: 55%;
        right: -20%;
        font-size: 10px;
	}
	
	
	
    #field{
        
       top: 60%;
    }
	
    #field input{
        width: 250px;
    }
	
	
	#field button{
		top: 60%;
        left: 30%;
       font-size: 8px;
		
	}  
	
	
	
	
	

}







@media only screen and (min-width: 600px) {
	
  
	#circle{
		top: 10%;
        left: 20%;
		height: 300px;
		width: 300px;
	}
	
	
	#circle:before,
#circle:after{
	height: 300px;
	width: 300px;
	}
	
	
	#msg{
		
		font-size: 20px;
        
        top:40%;
        
        left: 50%;
		
		letter-spacing: 8px;
			
	}
	
	
	#notify{
		
		top: 65%;
        left: 50%;
		font-size: 12px;
		letter-spacing: 2px;
	}
	
	
    #field{
        
        top: 70%;
        left: 50%;
        
        
        
    }
	
    #field input{
        width: 250px;
    }
	
	
	#field button{
		left: 30%;
        top: 60%;
       font-size: 8px;
		
	}           
   
}

/*


@media only screen  and (min-device-width: 375px) 
  and (max-device-width: 812px) and (orientation: landscape) 
{ 

	  	#circle{
		
		height: 300px;
		width: 300px;
	}
	
	
	#circle:before,
#circle:after{
	height: 300px;
	width: 300px;
	}
	
	
	#msg{
		
		font-size: 12px;
        
     
		
		letter-spacing: 45px;
			
	}
	
	
	#notify{
		
		
		font-size: 12px;
		letter-spacing: 5px;
	}
	
	
    #field{
        
        padding-bottom: 50px;
        padding-right: 100px;
    }
	
    #field input{
        width: 250px;
    }
	
	
	#field button{
		margin-top: 60px;
		margin-left: 180px;     
       font-size: 8px;
		
	}   
	  
	  
}








 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  { 
     
     	#circle{
		margin-left: -90px;
        margin-top: -70px;
		height: 400px;
		width: 400px;
	}
	
	
	#circle:before,
#circle:after{
	height: 400px;
	width: 400px;
	}
   
    
     
     #msg{
		
		font-size: 20px;
        
        margin-top: -100px;
		
		letter-spacing: 20px;
			
	}
     
     
     
    }



@media only screen  and (min-device-width: 768px)  and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
	
	
	
		#circle{
		margin-left: -90px;
        margin-top: -70px;
		height: 400px;
		width: 400px;
	}
	
	
	#circle:before,
#circle:after{
	height: 400px;
	width: 400px;
	}
   
    
     
     #msg{
		
		font-size: 20px;
        
        margin-top: -100px;
		
		letter-spacing: 20px;
			
	}
	
	
	
	
}







@media only screen and (min-device-width: 834px)  and (max-device-width: 1112px) {
	
	
		#circle{
		margin-left: -50px;
        margin-top: -70px;
		height: 400px;
		width: 400px;
	}
	
	
	#circle:before,
#circle:after{
	height: 400px;
	width: 400px;
	}
	
	
	#msg{
		
		font-size: 20px;
        
        margin-top: -90px;
		
		letter-spacing: 30px;
			
	}
	
	
}





@media only screen and (max-width: 700px ) {
	
	
		#circle{
		height: 300px;
		width: 300px;
            
            left: 30%;
            top: 5%;
	}
	
	
	#circle:before,
	#circle:after{
	height: 300px;
	width: 300px;
	}
	
	
	#msg{
		
		font-size: 15px;
        
        left: 55%;
		top: 30%;
        
        letter-spacing: 15px;
        
			
	}
    
    
    
    notify{

        font-size: 10px;
    }
	


]







@media only screen and (min-width: 980px ) {
	
	
		#circle{
		
		height: 400px;
		width: 400px;
	}
	
	
	#circle:before,
	#circle:after{
	height: 400px;
	width: 400px;
	}
	
	
	#msg{
		
		font-size: 20px;
        
         left: 50%;
		
		
		letter-spacing: 15px;
			
	}
	
	
	

}








@media only screen and (min-width: 1260px ) {
	
	
		#circle{
		margin-left: -50px;
        margin-top: -70px;
		height: 400px;
		width: 400px;
	}
	
	
	#circle:before,
#circle:after{
	height: 400px;
	width: 400px;
	}
	
	
	#msg{
		
		font-size: 20px;
        
        margin-top: -90px;
		
		
		letter-spacing: 30px;
			
	}
	
	
	
}




@media screen and (min-width:2560px) { 
	
	
	#circle{
		margin-left: -90px;
        margin-top: -70px;
		height: 800px;
		width: 800px;
	}
	
	
	#circle:before,
#circle:after{
	height: 800px;
	width: 800px;
	}
	
	
	#msg{
		
		font-size: 35px;
        
        margin-top: -60px;
		
		letter-spacing: 50px;
		
		padding-left: 100px;
	}
	
	
	
	
	#notify{
	
	font-size: 15px;
	
	
}
	
	
	
	#notify{
		padding-top: 500px;
		font-size: 15px;
		letter-spacing: 10px;
	}
	
	      
   
	
    #field{
        
        padding-bottom: 250px;
        padding-right: 60px;
    }
	
    #field input{
        width: 250px;
    }
	
	
	#field button{
		margin-top: 2px;
		margin-left: -15px;     
       font-size: 8px;
		
	}     
	
	       
    
    
}



@media only screen and (min-device-width : 375px) and (max-device-width : 667px) {
    
    
    #circle{
		margin-left: -90px;
        margin-top: -70px;
		height: 300px;
		width: 300px;
	}
	
	
	#circle:before,
#circle:after{
	height: 300px;
	width: 300px;
	}
	
    
    #msg{
		
		font-size: 12px;
        
        margin-top: -90px;
		
		letter-spacing: 8px;
			
	}
    
    
    
    #notify{
	
	font-size: 8px;
        
     padding-top: 450px;
	
	
}
    
    
    
    #field{
        
        padding-bottom: 220px;
        padding-right: 30px;
    }
	
    #field input{
        width: 250px;
    }
	
	
	#field button{
		margin-top: 50px;
		margin-left: 180px;     
       font-size: 8px;
		
	}  
	
	
	
	
    
}