body {
	background-color: hotpink;
}

.title{
	margin-left: 330px;
	margin-top: 80px;
	padding: 0;
	animation: bounce 3s 1;
}

@keyframes bounce {
			0%		{opacity: 0;transform: translateY(-500px);}
			50%		{transform: translateY(0px);}
			70%		{transform: translateY(-75px);}
			90%		{transform: translateY(0px);}
			100%	{opacity: 1;transform: translateY(0px);}

		}

button{
		z-index:3;
	position: relative;
	top: 0;

	font-size: 30pt;
	border-style: 5pt dotted; pink;
	border-radius: 20% ;
	background-color: pink;}

/* HERE IS MY BREAKPOINT FOR TABLETS*/


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

.title{
	margin-left: 3px;
	margin-top: 80px;
	padding: 0;
	width: 1000px;
	animation: bounce 3s 1;
}


/* HERE IS MY BREAKPOINT FOR SMARTPHONES*/

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

.title{
	margin-left: 3px;
	margin-top: 80px;
	padding: 0;
	width: 550px;
	animation: bounce 3s 1;
}