/* -=-=-=-=-=-=-=-=-=-=- 星座 -=-=-=-=-=-=-=-=-=-=- */
/* 黒い雲を動かすアニメーションを定義 */
/* ∵ 星を見え隠れさせ瞬かせるため */
@keyframes cloudsMove {
	from { background-position: 0 0; }
	to { background-position: 200px 0; }
}

@keyframes rotation {
	0%  {transform: rotate(0);}
	100%  {transform: rotate(360deg);}
}

/*  for constellation layout */
body#body_constellation {

	/* -=-=-=-=-=- constellation layout -=-=-=-=-=- */
	.starrySky,
	.nightCloud {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		display: block;
	}
	.starrySky {
		background: #000 url(../img/starrySky.png) repeat top center;
		z-index: -127;
	}
	.nightCloud{
		background: transparent url(../img/nightCloud.png) repeat top center;
		z-index: -126;
		/* 黒い雲を動かすアニメーションを実行 */
		animation: cloudsMove 5s linear infinite;
	}

	/* -=-=-=-=-=- tile layout -=-=-=-=-=- */
	.wrap_overHidden {
		height: 100vh;
		width: 100vw;
		overflow: hidden;
	
		.wrap_tileLayout {
			display: grid;
			height: 100vh;
			width: 100vw;
			grid-template-columns: repeat(auto-fill, minmax(100px, auto));
			grid-auto-rows: minmax(100px, auto);
			gap: 10px;
			animation: rotation 1000s linear infinite;
	
			.tile {
				background: transparent;
			
				&:nth-of-type(3n+1) {
					grid-column: span 2 / span 2;
					grid-row: span 2 / span 2;
				}
				&:nth-of-type(6n+2) {
					grid-column: span 3 / span 3;
					grid-row: span 3 / span 3;
				}
			}
		}
	}
}