body {
  background: #080d0a;
  color: #ffffff;
  font-family: Cantarell, Arial, sans-serif;
  font-size: 14pt;
  margin: 0;
}

#container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
	gap: 16pt;
}

a, li::marker, .label {
	color: #4dcc8e;        
}

#info {
	max-width: 420px;
}

#flop {
	animation: flopper 0.2s linear;
}

#buttons {
	position: fixed;
	right: 24px;
	bottom: 24px;
}

@keyframes flopper {
	from {transform: translateY(-75vh)}
	to {transform: translateY(0px)}
}

h1 {
	color: #ff3eb7;
}

.cup {
	cursor: pointer;
}

@media (scripting: enabled) {
	.preload {
   		animation-play-state: paused;
	}
}

@media (prefers-reduced-motion) {
	#flop {
    	animation: none;
	}
}

@media (max-width: 800px) {
	#container {
		flex-direction: column;
	}

	h1 {
		text-align: center;
	}
}