.circulo {
  border-radius: 8px;
}

/* .text-winner {
  color: blue;
  font: normal 20px Varela Round, sans-serif;
  text-align: center;
} */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  /* --color-primary: #d6eaf8;
  --color-secondary: #aed6f1;
  --color-tertiary: #85c1e9;
  --color-quaternary: #7fb3d5;
  --color-quinary: #2980b9; */

  --color-primary: #5192ed;
  --color-secondary: #69a1f0;
  --color-tertiary: #7eaef2;
  --color-quaternary: #90baf5;
  --color-quinary: #a2c4f5;
}

.text-winner {
  text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary),
    9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
  font-family: bungee, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: calc(0.5rem + 2vw);
  text-align: center;
  margin: 0;
  color: var(--color-primary);
  animation: shadows 1.2s ease-in infinite, move 1.2s ease-in infinite;
  letter-spacing: 0.4rem;
}

@keyframes shadows {
  0% {
    text-shadow: none;
  }
  10% {
    text-shadow: 3px 3px 0 var(--color-secondary);
  }
  20% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary);
  }
  30% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);
  }
  40% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary),
      12px 12px 0 var(--color-quinary);
  }
  50% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary),
      12px 12px 0 var(--color-quinary);
  }
  60% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary),
      12px 12px 0 var(--color-quinary);
  }
  70% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);
  }
  80% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary);
  }
  90% {
    text-shadow: 3px 3px 0 var(--color-secondary);
  }
  100% {
    text-shadow: none;
  }
}

@keyframes move {
  0% {
    transform: translate(0px, 0px);
  }
  40% {
    transform: translate(-12px, -12px);
  }
  50% {
    transform: translate(-12px, -12px);
  }
  60% {
    transform: translate(-12px, -12px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

.spinner{
	position: absolute;
	left: 46%;
	top: 40%;
	transform: translate(-50%, -50%);
	width: 100px;
	height: 100px;
	border-radius: 50%;
	border: 8px solid lightgray;
	border-top:  8px solid #ee8a04;
	border-bottom:  8px solid #ee8a04;
	animation: anime 1.4s ease infinite;
}

@keyframes anime{
	from{ transform: rotate(0deg); }
	to{ transform: rotate(360deg); }
}