@charset "UTF-8";

.gradation {
width: 100%;
height: 100vh;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
animation: Grad 25s infinite linear;
opacity: 0.9; /* 少し濃く出す */
}

@keyframes Grad {
0%   { background-color: hsl(200, 80%, 70%); }  /* 濃いブルー */
10%  { background-color: hsl(210, 85%, 65%); }  /* 鮮やかな青 */
20%  { background-color: hsl(190, 75%, 68%); }  /* 濃い水色 */
30%  { background-color: hsl(220, 70%, 72%); }  /* ブルーグレー */
40%  { background-color: hsl(230, 65%, 68%); }  /* 濃いラベンダー */
50%  { background-color: hsl(250, 70%, 70%); }  /* 鮮やかな紫 */
60%  { background-color: hsl(200, 75%, 74%); }  /* 青みの水色 */
70%  { background-color: hsl(180, 65%, 68%); }  /* 濃いミントブルー */
80%  { background-color: hsl(210, 75%, 75%); }  /* 明るめブルー */
90%  { background-color: hsl(220, 80%, 70%); }  /* 濃い空色 */
100% { background-color: hsl(200, 80%, 70%); }  /* 最初に戻る */
}