body{
    text-align: center;
    font-family:"Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    color:#FFFFEE;
    background: linear-gradient(#0077FF, skyblue) fixed;
    margin: 0 auto;
    overflow:hidden;     /*スクロールバーを隠す*/
  }

/* リロードさせる スタートボタン 230812追加  */
input {
/*   display: flex; */
/*   align-items: center; */
/*   justify-content: center; */
  width: 80px;
/*   aspect-ratio: 1; */
  font-family: sans-serif;
  color: #FFFFEE;
  background-color: #0077FF;
  border: 1px solid #FFFFEE;
  border-radius: 50%;
}

.marquee-anime{
   display: inline-block;
   padding-left: 100%;
   white-space: nowrap;     
   animation: marquee 9.87s infinite;
 
   /*アニメーション遅延の値をマイナスにすると、既にその秒数進んだ場所
     から始まる。
     この値をランダムにして、絵文字の開始位置をランダムに試行錯誤中*/
   animation-delay: -5s ;
 
   animation-direction: alternate;  /*順方向と逆方向を繰り返す*/
   animation-timing-function: linear ; /*動きを一定に*/
   }
   
 /* @keyframes marquee {     /*左から右への動き(これを往復させる)
       0%{
           transform: translate(-65%,20%) ;
            }
       50%{
           transform: translate(-50%,160%) ;
            }
      100%{
            transform: translate(-35%, 20%); 
            }
      }  V字型のような動き  */

    /*@keyframes marquee {     /*左から右への動き(これを往復させる)
         0%{transform: translate(-70%,20%) ;}
        10%{transform: translate(-66%,50%) ;}
        20%{transform: translate(-62%,80%) ;}
        25%{transform: translate(-60%,95%) ;}
        30%{transform: translate(-58%,110%) ;}
        40%{transform: translate(-54%,140%) ;}
        50%{transform: translate(-50%,150%) ;}
        60%{transform: translate(-46%,140%) ;}
        70%{transform: translate(-42%,110%) ;}
        75%{transform: translate(-40%,95%) ;}
        80%{transform: translate(-38%,80%) ;}
        90%{transform: translate(-34%,50%) ;}
       100%{transform: translate(-30%, 20%) ;}
      }       /*U字型の動き*/

     @keyframes marquee {  /*左から右への動き(これを往復させる)*/
         0%{transform: translate(-70%,20%) ;}
         5%{transform: translate(-66%,50%) ;}
        10%{transform: translate(-62%,80%) ;}
        15%{transform: translate(-60%,95%) ;}
        20%{transform: translate(-58%,110%) ;}
        25%{transform: translate(-54%,140%) ;}
        30%{transform: translate(-50%,150%) ;}
        35%{transform: translate(-45%,140%) ;}
        40%{transform: translate(-40%,110%) ;}
        45%{transform: translate(-45%,140%) ;}
        50%{transform: translate(-50%,150%) ;}
        55%{transform: translate(-55%,140%) ;}
        60%{transform: translate(-60%,110%) ;}
        65%{transform: translate(-55%,140%) ;}
        70%{transform: translate(-50%,150%) ;}
        75%{transform: translate(-46%,140%) ;}
        80%{transform: translate(-42%,110%) ;}
        85%{transform: translate(-40%,95%) ;}
        90%{transform: translate(-38%,80%) ;}
        95%{transform: translate(-34%,50%) ;}
       100%{transform: translate(-30%, 20%) ;}
      }       /*複雑なU字型の動き*/

#display-area{  /*普通より上の位置に*/
      position: relative; 
      top: -30px;
}

#onclick-area{  /*普通より上の位置に*/
      position: relative; 
      top: -30px;
}

.snow , .roll{  /*回転しながら降りていく*/
      animation: yukimi 20s linear;
      display: inline-block;
      height: 1em;
      line-height: 1em;
      position: fixed;
      top: -1em;
      z-index: 1000;
  }
  
  @keyframes yukimi {
      0% {
          transform:translateY(0) rotateY(0);
      }
      100% {
          transform:translateY(calc(100vh + 1em)) rotateY(3600deg);
      }
  }