@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500&display=swap');

.IOSbutton{
	
	cursor: pointer;
	
}

.ctrlbtn{
	
	font-size: 18pt; 
	text-align: center;
	margin: auto;
	height: 40px;
			width: 40px;
	
	
}

#recBtnn {

	padding-bottom: 0px;
    border:ridge;
    border-radius: 50%;
    background: #86fe19;
	border-color: #0000FF;

}

#svgRec{
	
	
	position:relative;
	  float: right;
	z-index: 10;
	margin: 0px 0px 0px 0px;
	
}

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}

 select {
        height: 10%;
			width: 80%;
        padding: 5px;
	 font-size: 24pt;
	 text-align: center; 

    }


body {
	margin: 20px;
	background: rgb(15, 15, 15);
	color: rgb(134, 254, 25);
	font-family: 'Manrope', sans-serif;
	text-align: center;
 	cursor:pointer; 
}


#targetChat{
	
    width:70%;
    height:40%;
    margin: 20px;
	font-size: 40px;
	overflow: visible;
}

#newPost{
	
    width:70%;
    height:10%;
    margin: 20px;
	font-size: 40px;
	overflow: visible;
}


	#targetGraphic button {
				    text-align: center;
					background-color: Transparent;
					outline: none;
					border: none;
		
				}
.slider{
-webkit-appearance: none;	
	border-radius: 20%;	
	overflow: visible;
	align: auto,0px;
	width:100px;
}
.slider::-webkit-slider-runnable-track {

	height: 10px;
	
}
.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	padding-bottom: 0px;
    border:ridge;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background: #86fe19;
	border-color: #0000FF;
    margin-top: -20px; 
}



#drawer{
	
	width:100px;
	height:100px;
	 background: #86fe19;
		position: relative;
	float: auto;
	
	
}

#see {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
	
	
		bottom: 0px;
		box-sizing: border-box;
	margin:0px 30px 30px 0px;
	position:absolute;

	left: -30px;
width: auto;
	height: auto;
	
}

#slide {
   
	
	
		bottom: -30px;
		box-sizing: border-box;
	margin:0px 0px 0px 80px;
	position:relative;
	  float: left;
width: auto;
	height: auto;
	
}

#seeM {
	padding: 20px;
}

#seeP {
	background: #222;
	background-color: white;
	padding: 20px;
}


.slideD{
	
		position: absolute;
	bottom: 0px;
	right: 50px;
	
	
}

.control{
	
		position: absolute;
	float: left;
	bottom: 0px;
	z-index: 200;
	width: 100%;
   padding: 0px;
	font-size: 18pt; 
}


#bearingT{
	bottom: 0px;
		box-sizing: border-box;
	margin:0px;
	position:relative;
	  float: right;
width: auto;
	height: auto;

}

.slideRR{
/*	transform: rotate(22.5deg); */
	bottom: 0px;
		box-sizing: border-box;
	margin:0px 0px 10px 0px ;
	position:absolute;
	float: right;
width: auto;
	height: auto;

	
	right: 0px;
	
	
}


.slideLL{
/*	transform: rotate(22.5deg); */
	bottom: 0px;
		box-sizing: border-box;
	margin:0px 0px 30px 0px ;
	position:relative;
	  float: left;
width: auto;
	height: auto;

	
	
}

.disc {
margin:0px 35px 0px 0px ;
	position:relative;
	  float: right;
	background: url('arrow.png');
	width: 36px;
	height: 70px;
	background-size: 100%;
	z-index: 100;
}

.process {
	position: absolute;
	bottom: 0px;
	right: 0px;
	z-index: 200;
	margin: 0px 0px 0px 10px;
	
}

.correctC {
	position: absolute;
	bottom: 15px;
	right: 0px;
	z-index: 200;
	
}

.accu {
	position: absolute;
	bottom: 0px;
	left:0px;
	z-index: 200;
	
}



#slideD {
	position: relative;
	width: 100%;
	display:inline-block;
	background-color: transparent;
	padding: 0px;
	border-radius: 0px;
	border: 0px solid #444;
	overflow: hidden;
	z-index:0;
}


#threeD {
	position: relative;
	height: 1280px;
	width: 720px;
	display:inline-block;
	background: #222;
	padding: 0px;
	border-radius: 0px;
	border: none;
	overflow: hidden;
	z-index:0;
}

#testVideoThreeD {
	position: relative;
	height: 640px;
	width: 360px;
	display:inline-block;
	background: #222;
	padding: 0px;
	border-radius: 0px;
	border: none;
	overflow: hidden;
	z-index:0;
}





#viewer {
	position: relative;
	width: 100%;
	height: 100%;
	display:block;
	background: #2F2;
	padding: 0px;
	border-radius: 0px;
	border: none;
	overflow: visible;
	z-index: 1;

}




#view {
	position: relative;
	width: 100%;
	height: 100%;
	
	background: #222;
	padding: 0px;
	border-radius: 0px;
	border: none;
	overflow: hidden;
	z-index:0;
}


#videoElement {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 0;
	width: 100%;
	height: 100%;
}
	
	#videoElementThreeD {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: -1;
	width: 100%;
		height: 100%;}

#videoElementThreeDD {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: -1;
	width: 100%;
		height: 100%;}
		
		#testVideo {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: -1;
	width: 100%;
		height: 100%;
	
}

#ball-0 {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 3;
	
	
	
}

#confetti {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 20;
	
	
	
}




.ball {
	position: absolute;
	top: 0px;
	left:0px;
	z-index: 3;
	
	
	
}

.input{

	border:0px;
	padding:0px;
 	text-align:center;
 	margin-left: auto;
  	margin-right: auto;
font-size: 18pt; height: 42px; width : 80%;
}




#targetInfo {
	margin: 0px;
	 font-weight: 1000;
	text-shadow: 0px 0px 10px #000000, 0px 0px 10px #000000,0px 0px 10px #000000,0px 0px 10px #000000,0px 0px 10px #000000,0px 0px 10px #000000,0px 0px 10px #000000,0px 0px 10px #000000,0px 0px 10px #000000,0px 0px 10px #000000,4px 0px 10px #000000,-4px 0px 10px #000000,4px 0px 10px #000000,-4px 0px 10px #000000,4px 0px 10px #000000,-4px 0px 10px #000000,4px 0px 10px #000000,-4px 0px 10px #000000,4px 0px 10px #000000,-4px 0px 10px #000000,-4px 0px 10px #86fe19,4px 0px 10px #86fe19,-4px 0px 10px #86fe19,4px 0px 10px #86fe19,-4px 0px 10px #86fe19,4px 0px 10px #86fe19,-4px 0px 10px #86fe19,4px 0px 10px #86fe19,-4px 0px 10px #86fe19,4px 0px 10px #86fe19; 
font-family: 'Manrope', sans-serif;
	text-align: center;
	
	
}

#tableT th{
	border: 1px solid white;
}

#tableT td{
	border: 1px solid white;
}


* {
                box-sizing: border-box;
	
            }

				@viewport {
  				width: device-width ;
  				zoom: 1.0 ;
				} 
             
            /* CSS property for header section */
            .header {
              
                
                text-align: center;
				background-color: #FFFFFF;
				
            }
             
            /* CSS property for navigation menu */
            .nav_menu {
                overflow: hidden;
                background-color: #333;
				
            }
            .nav_menu a, .signedOn  {
                float: left;
                display: block;
                color: white;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
            }
            .nav_menu a:hover {
                background-color: white;
                color: green;
            }
             
            /* CSS property for content section */

				.sideContainer {
                padding: 0px;
				background-color: #C1C1C1;
				border: 3px solid #7f3f97;
				border-radius: 15px;
                text-align:center;
					  width: 100%;
					
					float: center;
						margin: 50px auto;
					 resize: both;
					
            }




#newTN {
					font-size: 18pt; height: 42px; width : 250px;
				}

#newTNV {
					font-size: 18pt; height: 42px; width : 50px;
				}

#addTargetLink{
					font-size: 18pt; height: 42px; width : 250px;
				}
				
				button{
					font-size: 24pt;  text-align: center;
					background-color: Transparent;
				}



				.sideContainer table {
				float: center;
				margin: 50px auto;
				background-color: #C1C1C1;
				
				}

	

#targetTable{
	margin:auto;
	border: 0;
	padding:0;
	
	
	
}

				

			.CUFile {
				
				overflow-wrap: anywhere;
				text-align:center;
				width: 90%;
				padding:5px;
				
				}

			

			.CUTitle {
				
				text-align:center;	
			}

		


		
            h2 {
			font-family: 'Manrope', sans-serif;
                color:#7f3f97;
                text-align:center;
            }

			img {
	
				 max-width: 100%;
  				height: auto;
	
				}

						#postIt {
				float: center;
				margin: auto;
				position: static;
				box-sizing:content-box;
				resize:vertical;
				  background-color: black;
				color: #10AE1E; 	
				width: 95%;
		
}

			.scroller {
    
    overflow-y: scroll;
				box-sizing:border-box;
    scroll-snap-type: y mandatory;
				height:100%;
				width:100%;
				
}

.scroller section {
    scroll-snap-align: end;
}
			

           
            /* Media query to set website layout
            according to screen size */
            @media screen and (max-width:900px) {
              
				
				 .sideContainer {
                    width: 100%;
					
					float: center;
						margin: 50px auto;
					 resize: both;
                }
		
				
				button{
					font-size: 24pt;  text-align: center;
					background-color: Transparent;
				}
				
				  
    
					
				#postIt {
							
					height: 300px;			
					font-size: 30px;	
				}
				
			
			
			
				
				
			
				
         }
            @media screen and (min-width:901px) {
           
			/*	
				.sideContainer {
                    width: 30%;
					
					float: left;
					margin: .5% ;
					resize: both;
					
                }
				*/
				
							#postIt {
	
				height: 200px;		
				font-size: 20px;	
				}
        }