html{
		background-color: #FA8BFF;
		background-image: linear-gradient(225deg, #FF0CAC 0%, #784BA0 30%, #1775B4 60%, green 75%, #000 100%); /* #FF0CAC=pink, #784BA0=purple ,#1775B4=blue */
		/* background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab ); */
		background-size: 400% 400%;
		overflow: hidden;
		-webkit-animation: gradientBG 60s ease infinite;
	    animation: gradientBG 60s ease infinite;
	}	

	body{

		color:gray;
		/* background: #2f3437; */
		font-family: sans-serif;		
		overflow-y: auto;
		scroll-snap-type: y mandatory;
		height: 100vh;
		
	}

	@font-face {
  		font-family: 'SWOS';
  		src: url('swos.ttf');
	}

	p, tr{
		font-family: 'SWOS';
	}
	tr{
		height: 20px;
	}

	h1, h2, h3, h4{
		font-family: 'Press Start 2P';
		margin-top:0;
		padding-top:10px;
		position: relative;
		text-shadow: 		
		-2px -2px 0 #fff,
		2px -2px 0 #fff,
		-2px 2px 0 #fff,
		2px 2px 0 #fff;	
	}
	
	h4::after{

		content: attr(data-text);
		position: absolute;
		top: 100%;
		left: 0;
		transform: scale(1, -1);
		/*opacity: .25;*/
		    -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, 
    from(rgba(0,0,0,.25)), to(rgba(0,0,0,0)));
	}
	
	.game{
		height:74vh;
		scroll-snap-align: start;
		scroll-padding-top: 150px;
		padding-top: 30px;
					  -webkit-overflow-scrolling: touch;
	}
	
	 @media screen and (orientation:landscape) and (max-height: 375px) {

	 	.game{
	 		height:100vh;
	 	}
	 }

	/*@media (max-width: 1023px){
		.game{
			height:75vh;
		}	
	}*/
	#g1{
		color:#999999;
		text-shadow: 
	
		-2px -2px 0 #00f,
		2px -2px 0 #00f,
		-2px 2px 0 #f00,
		2px 2px 0 #f00;	
	}

	#g2{
		color:#ffb21f;
		text-shadow: 
	
		-2px -2px 0 red,
		2px -2px 0 red,
		-2px 2px 0 yellow,
		2px 2px 0 yellow;	
	}

        #turbotomato{
		color:#ff0000;
		text-shadow:

		-2px -2px 0 #800,
		2px -2px 0 #800,
		-2px 2px 0 #800,
		2px 2px 0 #800;
        }
	#g4, #g5{
		color: #f8d097;	
		text-shadow: 
	
		-2px -2px 0 #7b3a0e,
		2px -2px 0 #7b3a0e,
		-2px 2px 0 #bd904d,
		2px 2px 0 #bd904d;	
	}

	#g6{
		color: #4198c5;	
		text-shadow: 
	
		-2px -2px 0 #b02e36,
		2px -2px 0 #b02e36,
		-2px 2px 0 #d9839e,
		2px 2px 0 #d9839e;	
	}

	#g7{
		color: #bdadec;	
		text-shadow: 
	
		-2px -2px 0 #443674,
		2px -2px 0 #443674,
		-2px 2px 0 #9aca00,
		2px 2px 0 #9aca00;	
	}
	
	#g8{
		color: #f9e7b7;	
		text-shadow: 
	
		-2px -2px 0 #443674,
		2px -2px 0 #443674,
		-2px 2px 0 #9aca00,
		2px 2px 0 #9aca00;	
	}
	.name{
		color:lightgray;
	}

	.emoji{
		font-size:13px;
	}

	

	h4{
		
		font-size:1.70rem;
	}
	a{
	color:gray;
    text-align: center;
    position: relative;
    display: block;
    -webkit-animation: home-link 15s ease infinite;
	    animation: home-link 15s ease infinite;
	}

@-webkit-keyframes home-link {
	0% {
		color: gray;
	}
	50% {
		color: gray;
	}
	85% {
		color: gray;
	}
	92%{
		color: lightgray;
	}
	100%{
		color: gray;
	}
}
@keyframes home-link {
	0% {
		color: gray;
	}
	50% {
		color: gray;
	}
	85% {
		color: gray;
	}
	92%{
		color: lightgray;
	}
	100%{
		color: gray;
	}
}


	@-webkit-keyframes gradientBG {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
@keyframes gradientBG {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}