body {
	min-height: 100vh;
	display: grid;
	gap: 2rem;
	place-content: center;
}

.button {
	padding: 1em 2em;
	background: linear-gradient(90deg, red, blue);
	border: 0;
	border-radius: 0.25rem;
	cursor: pointer;
	font-size: 2rem;
	transition: transform 1000ms;
}
.button:hover,
.button:focus-visible {
	transform: translateY(-1.75rem);
	transition: transform 250ms;
}
/*
.party-time {
	animation: 
		party 1000ms,
		party 2000ms 1500ms,
		party 5000ms 4000ms infinite alternate;
}
*/
.party-time {
	animation: party 2000ms infinite;
}
/*ili					5000ms infinite; */

@keyframes party {
	0% {
		background-color: red;
	}
	20% {
		background-color: orange;
	}
	40% {
		background-color: red;
	}
	60% {
		background-color: blue;
	}
	80% {
		background-color: purple;
	}
	100% {
		background-color: yellow;

	}
}
/* bez veze ali je dobar efekat zvezdica koje se pojavljuju*/
/*
@keyframes party {
	50% {
		background-color: hsl(300,  72%, 35%);
		rotate: 180deg;							
	}
}
*/

.lina {
    height: 100vh;
    width: auto;
    display: grid;
    justify-content: center;
    align-items: center;
}

.dots {
	display: flex;
	gap: .5rem;
	justify-content: center;
    align-items: center;
}
.dot {
	width: 10px;
	aspect-ratio: 1;
	background-color: blue;
	border-radius: 50%;
	justify-content: center;
    align-items: center;
}


.dot .dance {
	animation: rise 2000ms infinite alternate;
}

@keyframes rise {
	100% { transform: translateY(-100px)}
	
}

@for $i from 1 through 15 {
	.dot:nth-child(#{$i}) {
		animation-delay: 100ms * $i;
	}
}