body {
 background-image: url(back.png);
 background-attachment: inherit;
 background-position: center;
 background-size: 100%;
 background-repeat: no-repeat;
 background-color: black;
 overflow: hidden;
}
.container {
 width: 100vw;
 height: 100vh;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
}
button {
 opacity: 1;
 position: relative;
 margin: 20px;
 border: none;
 background-color: transparent;
}
#click span {
 color: #a300c8;
 font-weight: bold;
 transition: 0.2s;
 font-size: 15px;
 font-family: arial;
 text-align: center;
 text-decoration: none;
 background-color: transparent;
 display: block;
 position: relative;
 padding: 0px 0px;
}
#click span:hover {
 opacity: 0.4;
 font-size: 17px;
 color: #000;
 transition: 0.2s;
 background-color: #a300c8;
 padding: 10px 10px;
 border-radius: 5px;
}
#agrupamento {
 position: relative;
 overflow: hidden;
 animation: entrada 2s ease-in-out forwards;
}
.background {
 width: 100vw;
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
 animation: maneiro 4s infinite;
}
.colors {
 width: 90vw;
 height: 90vh;
 display: flex;
 justify-content: center;
 align-items: center;
 border-radius: 20px;
 animation: among 4s infinite;
}
img {
 width: 50vw;
 height: 50vh;
}
/* Tela de carregamento */
#loading-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 1);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
  }
  /* Spinner (animação de carregamento) */
  .spinner {
	border: 8px solid #500078;
	border-top: 8px solid #a300c8;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	animation: spin 1s linear infinite;
  }
  @keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
  }
  /* Esconder o conteúdo da página até o carregamento completo */
  #content {
	display: none;
  }
/* Steetch */
#dancing {
 position: absolute;
 animation: danceAnimation 8s linear infinite;
 left: 100%;
 scale: 0.3;
 opacity: 1;
}
/* Cyrax */
#dancing:nth-child(2) {
 animation-delay: 3s;
 top: 20%;
 scale: 0.2;
 opacity: 1;
}
/* Groot */
#dancing:nth-child(3) {
 animation-delay: 5s;
 top: 60%;
 scale: 0.6;
 opacity: 1;
}
/* Dean */
#dancing:nth-child(4) {
 animation-delay: 7s;
 top: 10%;
 scale: 0.8;
 opacity: 1;
}
/* Ovelha */
#dancing:nth-child(5) {
 animation-delay: 4.5s;
 top: -17%;
 scale: 0.3;
 opacity: 1;
}
/* sapo */
#dancing:nth-child(6) {
 animation-delay: 0.1s;
 top: 40%;
 scale: 0.2;
 opacity: 1;
}
/* zombie */
#dancing:nth-child(7) {
 animation-delay: 4s;
 top: 50%;
 scale: 0.4;
 opacity: 1;
}
/* Himan */
#dancing:nth-child(8) {
 animation-delay: 9s;
 top: 20%;
 scale: 0.4;
 opacity: 1;
}