* { 
	font-family: helvetica;
	font-size: 26px;
	overflow: hidden;
}

button {
	visibility: hidden;
	height: 100%;
	width: 100%;
}

#title {
	padding: 20px;
	animation-name: fade-in;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	opacity: 0;
	animation-delay:1s;
}

#circles {
	margin-top: 14%;
	margin-left: 26%;
}

#jerseyfadein {
	margin-left: -50%;
	animation-name: left-to-origin;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	animation-delay: 2s;
}

#jersey {
	width: 150px;
	height: 150px;
	background-color: black;
	border-radius: 100%;
	position: absolute;
	transition: background-color 0.5s ease;
}

#jersey:hover {
	background-color: #ADD8E6;
}

#jersey:active {
	animation-name: shake;
	animation-duration: 2s;
	animation-fill-mode: forwards;
}

#newyorkerfadein {
	margin-left: 105%;
	animation-name: right-to-origin;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	animation-delay:2s;
}

#newyorker {
	width: 150px;
	height: 150px;
	background-color: black;
	border-radius: 100%;
	transition: background-color 0.5s ease;
}

#newyorker:hover {
	background-color: #FF0505;
}

#newyorker:active {
	animation-name: shake;
	animation-duration: 2s;
	animation-fill-mode: forwards;
}

/*VISIBLITY CODE*/

#promptJ1  {
	visibility: hidden;
}

/*DISPLAY*/ 

.dislay {
	visibility: visible;
}

/*ANIMATIONS*/
@keyframes fade-in {
	from {opacity: 0;}
	to {opacity: 1;}
}

@keyframes right-to-origin {
	from {margin-left: 105%}
	to {margin-left: 45%}
}

@keyframes left-to-origin {
	from {margin-left: -50%;}
	to {margin-left: 10%}
}

@keyframes black-to-red {
	from {background-color: black;}
	to {background-color: red;}
}

@-webkit-keyframes shake {
	0% { -webkit-transform: translate(6px, 5px) rotate(0deg); }
	10% { -webkit-transform: translate(-5px, -6px) rotate(-1deg); }
	20% { -webkit-transform: translate(-7px, -4px) rotate(1deg); }
	30% { -webkit-transform: translate(4px, 6px) rotate(0deg); }
	40% { -webkit-transform: translate(-3px, -5px) rotate(1deg); }
	50% { -webkit-transform: translate(-5px, -3px) rotate(-1deg); }
	60% { -webkit-transform: translate(-7px, -3px) rotate(0deg); }
	70% { -webkit-transform: translate(-2px, -3px) rotate(-1deg); }
	80% { -webkit-transform: translate(-5px, -5px) rotate(1deg); }
	90% { -webkit-transform: translate(7px, 7px) rotate(0deg); }
	100% { -webkit-transform: translate(-3px, -6px) rotate(-1deg); }
}