@charset  "utf-8";

html{
    background: url("../img/sakura.jpg");
}

h2{
    margin: 5% 30%;
    text-align: center;
    display: block;
    font-size: 90px;
    background-color: rgb(165, 42, 91);
    color: rgb(48, 48, 48);
    border-radius: 20px;
    width: 500px;
    font-family: "Sawarabi Mincho"; 
    position:relative;
    /* -webkit-animation: flip-scale-2-ver-right 4s 0.4s infinite ;
    animation: flip-scale-2-ver-right 4s 0.4s infinite ; */
}
.date{
    margin: 9% 30%;
    text-align: center;
    display: block;
    font-size: 60px;
    background-color: rgb(179, 118, 123);
    color: rgb(48, 48, 48);
    border-radius: 20px;
    width: 500px;
    font-family: "Sawarabi Mincho"; 
    position:relative;
    /* -webkit-animation: flip-scale-2-ver-right 4s 0.4s infinite ;
    animation: flip-scale-2-ver-right 4s 0.4s infinite ; */
}
.time{
    margin: 9% 30%;
    text-align: center;
    display: block;
    font-size: 60px;
    background-color: rgb(179, 118, 123);
    color: rgb(48, 48, 48);
    border-radius: 20px;
    width: 500px;
    font-family: "Sawarabi Mincho"; 
    position:relative;
    /* -webkit-animation: flip-scale-2-ver-right 4s 0.4s infinite ;
    animation: flip-scale-2-ver-right 4s 0.4s infinite ; */
}

/* @media screen and (max-width: 200px) {
   h2,.date,.time{
    display: block;
    margin: 40px 60px;

   } */
/* }
/* ----------------------------------------------
 * Generated by Animista on 2023-2-14 16:15:21
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation flip-scale-2-ver-right
 * ----------------------------------------
 */
 /* @-webkit-keyframes flip-scale-2-ver-right {
    0% {
      -webkit-transform: translateX(0) rotateY(0) scale(1);
              transform: translateX(0) rotateY(0) scale(1);
      -webkit-transform-origin: 100% 50%;
              transform-origin: 100% 50%;
    }
    50% {
      -webkit-transform: translateX(50%) rotateY(-90deg) scale(2);
              transform: translateX(50%) rotateY(-90deg) scale(2);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
    }
    100% {
      -webkit-transform: translateX(100%) rotateY(-180deg) scale(1);
              transform: translateX(100%) rotateY(-180deg) scale(1);
      -webkit-transform-origin: 0% 50%;
              transform-origin: 0% 50%;
    }
  }
  @keyframes flip-scale-2-ver-right {
    0% {
      -webkit-transform: translateX(0) rotateY(0) scale(1);
              transform: translateX(0) rotateY(0) scale(1);
      -webkit-transform-origin: 100% 50%;
              transform-origin: 100% 50%;
    }
    50% {
      -webkit-transform: translateX(50%) rotateY(-90deg) scale(2);
              transform: translateX(50%) rotateY(-90deg) scale(2);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
    }
    100% {
      -webkit-transform: translateX(100%) rotateY(-180deg) scale(1);
              transform: translateX(100%) rotateY(-180deg) scale(1);
      -webkit-transform-origin: 0% 50%;
              transform-origin: 0% 50%;
    }
  }
    */