*{-webkit-tap-highlight-color: transparent;}

body{
  margin: 0px;
  padding: 0px;
  text-align:center;
  display: flex;
}
section{
  margin: 0px;
  padding: 40px;
  background:
  repeating-linear-gradient(
    120deg,
    #ffff80,           /* きいろ */
    #ffff80 5px,
    #ff88b9 5px,
    #ff88b980 55px,
    #ffff8080 55px,
    #ffff8080 60px,
    transparent 60px,  /* 赤の後に透明 */
    transparent 300px  /* 次のラインに進む */
  ),
  repeating-linear-gradient(
    30deg,
    #6a0dad,          /* 濃いむらさき（ベース） */
    #6a0dad 90px,
    #7f00ff 90px,      /* 青紫 */
    #7f00ff 180px
  );
  /* height: device-Height;
     width: device-Width; 
     set with JS */
}
span{
  border: 1px solid #ffff00;
  border-radius: 8px;
  background-color: #ffffff80;
}
input{
  margin: 20px auto;
  /* font-size set with JS */
  padding: 10px 40px;   /* ボタン自体を大きく */
  background-color: #fff0f5; /* 緑色の背景 */
  color: #333;         /* 白い文字 */
  border: none;         /* 枠線なし */
  border-radius: 8px;   /* 角を丸く */
  cursor: pointer;      /* マウスポインタを変える */
  box-shadow: 0 4px 10px #000033;
  transition: background-color 0.3s;
}
input:hover{
  background-color: #f8dce8;
}
p#title{
  margin: 20px auto;
  padding: 10px 0px;
  font-size: 16px;
  width: 400px;
  background-color: #ffffbf;
  border-radius: 8px;   /* 角を丸く */
  cursor: pointer;      /* マウスポインタを変える */
  box-shadow: 0 4px 10px #000033;
}
p#output{}
/* others set with JS */