/*
main_styles.css
For use @ Futuza.com
Copyright 2023 - Futuza / Dallen
*/

		body 
		{
			font-family:consolas;
			background: url("../images/web-backgrnd-red.webp") no-repeat center center fixed;
			background-color:#1E1E1E;						
			text-align:center;
			font-family:consolas;
			color:#DCDCDC; 
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
			background-attachment: fixed;
			margin: auto 12%;
		}

		.maindiv
		{
			background-color: rgba(8, 15, 15, .8);
			text-align: justify;
			padding:35px;
			margin: 20px 5%;
			border-radius: 35px 35px 35px 35px;
			max-width: 100%;
		}

		.maindiv-center
		{
			background-color: rgba(8, 15, 15, .8);
			text-align: center;
			padding:35px;
			margin: 20px 5%;
			border-radius: 35px 35px 35px 35px;
			max-width: 100%;
		}

		.titlediv
		{
			background-color: rgba(8, 15, 15, .8);
			text-align: center;
			padding:15px;
			margin: 15px auto;
			border-radius: 35px 35px 35px 35px;
			width: 60%;
			
		}

		.centerdiv
		{
			/*note this doesn't quite work right with bootstrap borders, images will get drawn out of the border-radius even if img-fluid*/
			background-color: rgba(8, 15, 15, .8);
			text-align: center;
			padding:15px;
			margin: 15px auto;
			border-radius: 35px 35px 35px 35px;
			
			/*
			Original:
			padding:35px;
			margin: 20px 25%;
			border-radius: 35px 35px 35px 35px;
			*/
		}

		/*prevent images from overflowing boundaries*/
		.centerdiv img
		{
			max-width: 100%;
		}

		.centerdiv object
		{
			max-width: 100%;
		}
				
		/* Fonts I like: Amienne , Baveuse , Arial Black , Boopee , Cooper Black */
		h1  {display: inline; font-family:Amienne; font-size:500%; text-align:center;  background-color: rgba(80,25,25,0.1); box-shadow: 10% 10% 5% #888888; margin:1%; margin-left: auto; margin-right: auto; width: 60%;}
		
		h2   {color:#e73a2e; font-size:125%; text-align:center;}

        h4 {color:rgb(224, 28, 28);}

		ul
		{
			list-style-type: circle;
		}
		
		#col-centered
		{
			text-align: center;
		}
		
		#OverDiv
		{
			overflow: auto;
		}

		.copyright
		{
			position: relative;
			bottom: -200px;
			color: #d3d3d3;
			text-align: center;
			font-family: Consolas;
			letter-spacing: 4px;
			font-size: 12px;
			background-color: none;
			background:none;
		}

		.copyright p
		{
			background:none;
			background-color: none;
			text-align: center;
			padding: none;
			margin:  none;
			border-radius:  none;
		}



		.copyright a 
		{
			color: #d3d3d3;
		}

		.copyright a:visited
		{
			color: #d3d3d3;
		}
		
		.copyright a:hover
		{
			color: #569CD5;
			font-size: 12.5px;
		}
			  
		form
		{
				background-image: url("../images/web-backgrnd-futuza_txtbox.png");
				-webkit-background-size: cover;
				-moz-background-size: cover;
				-o-background-size: cover;
				background-size: cover;
				text-align:center;
				padding:35px;
				margin: 20px 35%;
				-moz-border-radius: 35px 35px 35px 35px;
				border-radius: 35px 35px 35px 35px;
				/*border:3px ridge;
				border-color: #5a6361;
				outline: 1px;
				outline-style: solid;
				outline-color: #5e938c;*/

		}
		
		form[type=paragraph]
		{
				/**/
				background-image: url("../images/web-backgrnd-futuza_txtbox.png");
				-webkit-background-size: cover;
				-moz-background-size: cover;
				-o-background-size: cover;
				background-size: cover;
				text-align:justify;
				padding:35px;
				margin: 15px 15%;
				-moz-border-radius: 35px 35px 35px 35px;
				border-radius: 35px 35px 35px 35px;
				/*border:3px ridge;
				border-color: #5a6361;
				outline: 1px;
				outline-style: solid;
				outline-color: #5e938c;
				*/
		}
		
		input[type=submit] 
		{

			background: #314C49;
			padding: 10.5px 32px;
			border: none;
				
			border-radius: 8px;
			-webkit-border-radius: 8px;
			-moz-border-radius: 8px;

			text-shadow: rgba(0,0,0,.4) 0 1px 0;
			color: #dcdcdc;
			font-size: 18px;
			font-family: consalas;
			text-decoration: none;
   
			/*no text highlighting*/
			-webkit-user-select: none; /* Chrome/Safari */        
			-moz-user-select: none; /* Firefox */
			-ms-user-select: none; /* IE10+ */

			/* Rules below not implemented in browsers yet */
			user-select: none;
			-o-user-select: none;
		}
		
		input[type=submit]:hover 
		{
			/*border-top-color: #187365;*/
			background: #187365;
			round: #187365;
			border: none;
		}
		
		input[type=submit]:active 
		{
			/*border-top-color: #1e1e1e;*/
			background: #1e1e1e;
			color: #569CD5;
			border: none;
		}
		
		input[type=text]
		{
			background: #1e1e1e;
			font-size: 125%;
			color: #DCDCDC;		/*colors to try: #569CD5 , #4EC9B0 , #D73535 , #DCDCDC */
			border: none;
			padding: 10px;
			text-align: center;
			width:auto;
			max-width:100%;
			border-radius: 35px 35px 35px 35px;
		}

		input[type=email]
		{
			background: #1e1e1e;
			font-size: 125%;
			color: #DCDCDC;		/*colors to try: #569CD5 , #4EC9B0 , #D73535 , #DCDCDC */
			border: none;
			padding: 10px;
			text-align: center;
			width:auto;
			max-width:100%;
			border-radius: 35px 35px 35px 35px;	
		}

		input[type=number]
		{
			background: #1e1e1e;
			font-size: 125%;
			color: #DCDCDC;		/*colors to try: #569CD5 , #4EC9B0 , #D73535 , #DCDCDC */
			border: none;
			padding: 10px;
			text-align: center;
			width:auto;
			max-width:100%;
			border-radius: 35px 35px 35px 35px;

			-moz-appearance: textfield;
			-webkit-appearance: textfield;
			appearance: textfield;
			margin: 0; 
		}

		/*honeypot input field for phone to trick bots*/
		#phone
		{
			display: none;
			visibility: hidden;
		}
		
		.scrolltextarea 
		{
			background: #1e1e1e;
			font-size: 155%;
			color: #DCDCDC;
			border: none;
			padding: 10px;
			text-align: left;
			width:100%;
			height:450px;
			-moz-border-radius: 35px 35px 35px 35px;
			border-radius: 35px 35px 35px 35px;
			overflow:auto;
				margin-right: auto;
				margin-left: auto;
				display: block;
			
		}
		
		/* Chrome, Safari  Scrollbars styles*/
		::-webkit-scrollbar 
		{
			width: 15px;
			height: 10px;
		}
		::-webkit-scrollbar-track-piece  
		{
			background-color: #314C49;
		}
		::-webkit-scrollbar-thumb:vertical 
		{
			height: 30px;
			background-color: #187365;
		}

		input
		{
			width:fit-content;
		}
		
		input[type=user]
		{
			background: #1e1e1e;
			font-size: 125%;
			color: #DCDCDC;
			border: none;
			padding: 10px;
			text-align: center;
			-moz-border-radius: 35px 35px 35px 35px;
			border-radius: 35px 35px 35px 35px;
		
		}
		
		input[type=password]
		{
			background: #1e1e1e;
			font-size: 125%;
			color: #DCDCDC;
			border: none;
			padding: 10px;
			text-align: center;
			-moz-border-radius: 35px 35px 35px 35px;
			border-radius: 35px 35px 35px 35px;
		}
			
			  
		/*hyper links*/
		a:link 
		{
			color: #569CD5;
			text-decoration: none;
		}

		/* visited link */
		a:visited 
		{
			color: #569CD5;
			text-decoration: none;
		}

		/* mouse over link */
		a:hover 
		{
			color:#4EC9B0;
			text-decoration: none;
			font-weight: bold;
			/*text-decoration: underline;*/
		}

		/* selected link */
		a:active 
		{
			/*color: #dcdcdc;*/
			text-decoration: none;
		}
			

			.button
			{
				/*border-top: 1px solid #7fc7bc;*/
				background: #4c3131;
				
				/*
				background: -webkit-gradient(linear, left top, left bottom, from(#446a65), to(#263b38));
				background: -webkit-linear-gradient(top, #446a65, #263b38);
				background: -moz-linear-gradient(top, #446a65, #263b38);
				background: -ms-linear-gradient(top, #446a65, #263b38);
				background: -o-linear-gradient(top, #446a65, #263b38);
				*/
				
				padding: 10.5px 32px;
				
				border-radius: 8px;
				-webkit-border-radius: 8px;
				-moz-border-radius: 8px;

				/*
				box-shadow: rgba(0,0,0,1) 0 1px 0;
				-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
				-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
				*/

				text-shadow: rgba(0,0,0,.4) 0 1px 0;
				color: #dcdcdc;
				font-size: 18px;
				font-family: consalas;
				text-decoration: none;
				vertical-align: top;
   
				/*no text highlighting*/
				-webkit-user-select: none; /* Chrome/Safari */        
				-moz-user-select: none; /* Firefox */
				-ms-user-select: none; /* IE10+ */

				/* Rules below not implemented in browsers yet */
			   user-select: none;
				-o-user-select: none;
			}
			
			
			.button:hover 
			{
				border-top-color: #731818;
				background: #731818;
				round: #731818;
				font-weight: bold;
			}
			
			.button:active 
			{
				border-top-color: #1e1e1e;
				background: #1e1e1e;
				color: #569CD5;
			}
   
   #myTitle
   {
	  top:35px;
	  position: relative;
   }

   #badGoogle
   {
		text-align: center;
		margin: 5% 10%;
		display:relative;
		top: 0px;
		left: 0px;
   }

				
	#myMenu 
	{
		background-color: #1e1e1e;
		text-align:center;
		padding:30px;
		top: -10px;
		position: fixed;
		z-index: 2;
		display: fixed;
		width: 101%;
		left: -10px;
		
	}
					
	#loaderDIV
	{
						
		width: 5px;
		height: 1px;
		background: #DCDCDC;
		top: 30px;
		left: -30px;	/*draw off screen on the left*/
		position: relative;
		display: block;
						
		animation-name: sidemove;
		animation-duration: 1s;
		animation-iteration-count: 1;
		animation-direction: alternate;
		animation-fill-mode: forwards;
		animation-play-state: paused;
						
		/* Chrome, Safari, Opera, depreciated */
		-webkit-animation-name: sidemove; 
		-webkit-animation-duration: 1s;
		-webkit-animation-iteration-count: 1;
		-webkit-animation-direction: alternate;
		-webkit-animation-fill-mode: forwards;
	}

	#CanvasBinary
	{
		width: 215px;
		height: 175px;
	}

	#addressbot
	{
		visibility: hidden;
	}
						
	@-webkit-keyframes sidemove 
	{
		50%{
				from {left: 0%;}
				to {left: 95%;}
			}
		100%{ width: 115%; }
	}
									
						
	@keyframes sidemove 
	{
		50%{
				from {left: 0%;}
				to {left: 95%;}
			}
		100%{ width: 115%; }
	}
						
	.centre 
	{
		margin-left: auto;
		margin-right: auto;
		display: block
	}