/* Add styles here */
/* ===== 全体のスタイル ===== */
* {
    margin: 0;
    padding: 0;
  }

  /* h2見出し */
h2 {
  /* 文字の色 */
  color: white;
  /* 文字の大きさ */
  font-size: 50%;
  /* 下がわの余白 */
  margin-bottom: 30%;
	}

h3 {
  /* 文字の色 */
  color: white;
  /* 文字の大きさ */
  font-size: 30%;
  /* 下がわの余白 */
  margin-bottom: 20%;
} 
img { width: 100%; }


/* レイアウト用の箱 */
div {
  /* レイアウトのルール */
  display: flex;
}


  /* リンク */
  a {
    /* 文字の色 */
    color: yellow;
    /* 文字の装飾 */
    text-decoration: none;
    /* 並べ方 */
    display: block;
    /* 文字の整列 */
    text-align: center;
    /* 文字の大きさ */
    font-size: 200%;
    /* 左がわの余白 */
    margin-left: 25%;
    /* 右がわの余白 */
    margin-right: 25%;
    }

  /* リンクにさわった時 */
  a:hover {
    /* 文字の色 */
    color: yellow;
    /* 文字の大きさ */
    font-size: 200%;
  }

  b:hover {
    /* 文字の色 */
    color: yellow;
  }

  b {
    -webkit-text-stroke-width: 1%;
    -webkit-text-stroke-color: black;
    /* 文字の色 */
    color: yellow;
    /* 文字の装飾 */
    text-decoration: none;
    /* 並べ方 */
    display: block;
    /* 文字の整列 */
    text-align: center;
    /* 文字の大きさ */
    font-size: 200%;
    /* 下がわの余白 */
    margin-bottom: 20%;
    }
  
body {
    background: -moz-linear-gradient(45deg, #02e1ba 0%, #26c9f2 29%, #d911f2 66%, #ffa079 100%);
    background: -webkit-linear-gradient(45deg, #02e1ba 0%,#26c9f2 29%,#d911f2 66%,#ffa079 100%);
    background: linear-gradient(45deg, #02e1ba 0%,#26c9f2 29%,#d911f2 66%,#ffa079 100%);
    background-size: 400% 400%;
    -webkit-animation: Gradient 15s ease infinite;
	-moz-animation: Gradient 15s ease infinite;
	animation: Gradient 15s ease infinite;
	/*min-height: calc(100vh - 2rem);*/
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: space-evenly;
	overflow: hidden;
	position: relative; 
}

body::before, 
body::after {
	content: "";
	width: 70vmax;
	height: 70vmax;
	position: absolute;
	background: rgba(255, 255, 255, 0.07);
	left: -20vmin;
	top: -20vmin;
	animation: morph 15s linear infinite alternate, spin 20s linear infinite;
	z-index: 1;
	will-change: border-radius, transform;
	transform-origin: 55% 55%;
	pointer-events: none; 
}
	
body::after {
    width: 70vmin;
    height: 70vmin;
    left: auto;
    right: -10vmin;
    top: auto;
    bottom: 0;
    animation: morph 10s linear infinite alternate, spin 26s linear infinite reverse;
    transform-origin: 20% 20%; 
}

@-webkit-keyframes Gradient {
	0% {
		background-position: 0 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0 50%
	}
}

@keyframes morph {
  0% {
    border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%; }
  100% {
    border-radius: 40% 60%; } 
}

@keyframes spin {
  to {
    transform: rotate(1turn); 
  } 
}
	.st0{display:none;}
	.st1{display:inline;}
	.st2{opacity:0.29;}
	.st3{fill:#FFFFFF;}
	.st4{clip-path:url;fill:#FFFFFF;}
	.st5{clip-path:url;}
	.st6{clip-path:url;}
	.st7{clip-path:url;}
	.st8{clip-path:url;}
	.st9{fill:none;}
	.st10{clip-path:url;}
	.st11{opacity:0.7;}
	.st12{clip-path:url;}
	.st13{opacity:0.2;}
	.st14{clip-path:url;}
	.st15{opacity:0.3;fill:#FFFFFF;enable-background:new    ;}