style.css

@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap');
*{
  font-family: 'Fredericka the Great', cursive;
  color: #cecece;
  cursor:default; /*no quiero el selector de texto en el marcador*/
}
body{
  display: flex;
  background-image: url(img/163c82a62637c4079e5f4581582cc0d0.jpg);
  background-position: center;
  background-size: 1450px 800px ;
  background-repeat: no-repeat;
}

main {
  display: block;
  margin-left: 10%;
  margin-top: 2%;
}
aside{
  font-size: 50px;
  margin-left: 8%;
}
.marcador{
  margin-top: 7%;
  margin-left: 6%;
  font-size: 70px;
}
.fila{
  display: flex;
  gap: 5px;
}
.casilla {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  margin-top: 5px;

  font-size: 150px;
  font-family: 'Fredericka the Great', cursive;

  border: solid 3px #cecece; 

  text-decoration: none;
}

.casilla:hover {
  cursor: pointer;
  
}

.reset{
  animation:flip-scale-up-ver .5s linear both;
}
#reset2{
  animation:flip-scale-up-ver .5s linear both;
}

/* @keyframes flip-scale-up-hor {
  0% {
    -webkit-transform: scale(1) rotateX(0);
            transform: scale(1) rotateX(0);
  }
  50% {
    -webkit-transform: scale(2.5) rotateX(-90deg);
            transform: scale(2.5) rotateX(-90deg);
  }
  100% {
    -webkit-transform: scale(1) rotateX(-180deg);
            transform: scale(1) rotateX(-180deg);
  } */

  @keyframes flip-scale-up-ver {
    0% {
      -webkit-transform: scale(1) rotateY(0);
              transform: scale(1) rotateY(0);
    }
    50% {
      -webkit-transform: scale(2.5) rotateY(90deg);
              transform: scale(2.5) rotateY(90deg);
    }
    100% {
      -webkit-transform: scale(1) rotateY(180deg);
              transform: scale(1) rotateY(180deg);
    }
  }
  @keyframes flip-scale-down-ver{0%{transform:scale(1) rotateY(0)}50%{transform:scale(.4) rotateY(-90deg)}100%{transform:scale(1) rotateY(-180deg)}}

  .temp{
display: flex;

    width: 2%;
    margin-top: 2%;

    font-size: 100px;
  }
  .icono{
    font-size: 40px;
    width: 20%;
    margin-top: 80%;
  }
  .temporizador{

  
  }