anim {
  width: 100%;
  height: 100%;
}

anim * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

anim p {
  grid-area: 1 / 1;
  margin: auto;
  z-index: 10;
  pointer-events: none;
}

/* roda o texto */
#spin {
  display: grid;
  font-size: 3em;
  text-align: center;
}

#spin > p {
  transition: transform 1s;
  pointer-events: all;
	font-size: min(8vw, 1em);
}

#spin > p:hover {
  transform: rotateX(180deg) rotateZ(180deg);
}

/* muda a cor de fundo */
#background-redToBlue {
  display: grid;
  width: 100%;
  min-height: 100px;
  background: #f007;
  color: white;
  align-content: center;
  text-align: center;
  transition: background 5s;
}

#background-redToBlue:hover {
  background: #00f7;
}

#multi > div > p {
	padding: 0;
}

/* revela imagem */
#reveal-image {
  display: inline-grid;
  width: 100%;
  background: black;
  align-content: center;
  text-align: center;
  color: white;
}

#reveal-image img {
  grid-area: 1 / 1;
  width: 100%;
  object-fit: contain;
  opacity: 0%;
  transition: opacity 5s;
}

#reveal-image img:hover {
  opacity: 100%;
}

/* duplica a div */
#clone {
  display: grid;
  position: relative;
  top: calc(50% - 50px);
  width: 100%;
  height: 100px;
  background-color: chocolate;
  color: white;
}

#clone > div {
  display: grid;
  background-color: chocolate;
  width: 100%;
  height: 100px;
  opacity: 0%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 20;
  transition: top 2s, opacity 2s;
}

#clone > div:hover {
  top: -110px;
  opacity: 100%;
}

#multi {
  display: flex;
  position: relative;
  top: calc(50% - 5vmin);
  height: 10vmin;
  width: 100%;
  font-size: 2vmin;
}

/* empurra o vizinho */
#push {
  display: grid;
  color: antiquewhite;
  background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%,
    #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%,
      #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
  width: 10vmin;
  height: 10vmin;
  transition: width 1s linear;
  text-align: center;
}

#push:hover {
  width: 100%;
}

/* muda de imagem */
#change-photo {
  display: grid;
  background: red;
  width: 15vmin;
  height: 10vmin;
  color: black;
}

#change-photo > img {
  grid-area: 1 / 1;
  opacity: 100%;
  width: 15vmin;
  height: 10vmin;
  transition: opacity 2s;
}

#change-photo > img[src*="moinho"]:hover {
  opacity: 0%;
}

/* roda o quadrado */
#rotate {
  display: grid;
  box-sizing: border-box;
  height: 10vmin;
  width: 10vmin;
  color: white;
  text-align: center;
  background-color: tomato;
  border: 5px double red;
}

#rotate > div {
  grid-area: 1 / 1;
  margin: auto;
  transform: rotate(45deg);
  background-color: darkcyan;
  width: 7vmin;
  height: 7vmin;
  transition: transform 0.5s;
}

#rotate > div:hover {
  transform: rotate(225deg);
}

/* muda de forma */
#change-shape {
  display: grid;
  box-sizing: border-box;
  height: 10vmin;
  width: 10vmin;
  color: white;
  text-align: center;
  background-color: darkolivegreen;
  border: 5px solid yellow;
  border-radius: 0%;
  transition: border-radius 2s linear;
}

#change-shape:hover {
  border-radius: 50%;
}

/* faz música */
#vumeter {
  display: grid;
  color: bisque;
  background-color: #222;
  width: 100%;
  height: 100%;
}

#vubars {
  grid-area: 1 / 1;
  width: calc(100% - 20px);
  height: 200px;
  margin: 10px;
  position: relative;
  top: calc(50% - 100px);
  background-image: linear-gradient(to right, #0a0, yellow, red);
}

#vubars > div {
  position: absolute;
  height: 20px;
  width: 100%;
  background-color: #111;
  clip: rect(0px, 100vw, 20px, 10px);
  transition: clip 1s cubic-bezier(0,0,0.4,1);
}

#vubars > div:hover {
  clip: rect(0px, 100vw, 20px, 100vw);
}

/* dá cambalhota */
#joy {
  display: grid;
  position: relative;
  top: calc(50% - 100px);
  height: 200px;
  background: #E8BABA;
  color: deeppink;
}

#joy img {
  grid-area: 1 / 1;
  position: absolute;
  left: 0;
  top: 0;
  width: 88px;
  height: 179px;
  animation: vault 3s linear 0s infinite alternate;
}

@keyframes vault {
  0%, 40% {
    transform: rotate(0deg);
    left: 0px;
  }
  
  60%, 100% {
    transform: rotate(360deg);
    left: min(300px, calc(100% - 100px));
  }
}

/* relógio */
clock {
  padding: 0;
  width: 100%;
  height: 100%;
  display: grid;
}

clock svg {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: auto;
}

#relogio #Horas {
  animation: rotacaoH 72s linear 0s infinite;
	transform-origin: 50% 50%;
}

#relogio #Minutos {
  animation: rotacaoM 6s linear 0s infinite;
	transform-origin: 50% 50%;
}

@keyframes rotacaoH {
  from { transform: rotate(7deg); }
  to   { transform: rotate(367deg); }
}

@keyframes rotacaoM {
  from { transform: rotate(46deg); }
  to   { transform: rotate(406deg); }
}


#playground {
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background-image: repeating-linear-gradient(
    -45deg,
    rgb(33, 193, 230),
    rgb(33, 193, 230) 180px,
    rgb(13, 173, 210) 180px,
    rgb(13, 173, 210) 360px
  );
}

#ball {
  position: absolute;
  width: 5vmin;
  height: 5vmin;
  border-radius: 50%;
  background-image: radial-gradient(#ddd, grey, black);
  animation: bounce 2.5s linear 0s infinite;
  z-index: 0;
}

@keyframes bounce {
  0% {
    top: calc(50% - 2.5vmin);
    left: 0;
    transform: rotate(0deg);
    background-position: 0px 1vmin;
  }
  25% {
    top: 0;
    left: calc(50% - 2.5vmin);
    background-position: 0px 2.5vmin;
  }
  50% {
    top: calc(50% - 2.5vmin);
    left: calc(100% - 5vmin);
    background-position: 0px 1vmin;
  }
  75% {
    top: calc(100% - 5vmin);
    left: calc(50% - 2.5vmin);
    background-position: 0px 2.5vmin;
  }
  100% {
    top: calc(50% - 2.5vmin);
    left: 0;
    transform: rotate(360deg);
    background-position: 0px 1vmin;
  }
}


.card {
  position: absolute;
  border: 1px solid;
  border-radius: 10%;
  width: 5.9vmin;
  height: 8.3vmin;
  animation: swing 5s ease 0s infinite;
}

@keyframes swing {
  0%, 100% {
    top: calc(50% - 4.2vmin);
    left: calc(50% - 16vmin);
    width: 5.9vmin;
    height: 8.3vmin;
    z-index: 10;
  }
  25% {
    top: calc(50% - 5.2vmin);
    left: calc(50% - 3.7vmin);
    width: 7.4vmin;
    height: 10.4vmin;
    z-index: 20;
  }
  50% {
    top: calc(50% - 4.2vmin);
    left: calc(50% + 10.1vmin);
    width: 5.9vmin;
    height: 8.3vmin;
    z-index: 10;
  }
  75% {
    top: calc(50% - 3.1vmin);
    left: calc(50% - 2.2vmin);
    width: 4.4vmin;
    height: 6.2vmin;
    z-index: 0;
  }
}