@charset "utf-8";
/* CSS Document */

.optionBackground{
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	align-content: center;
	width: 25vh;
	height: auto;
	aspect-ratio: 4;
	background-size:cover;
	background-position: center;
	transition: 0.2s ease;
	color: #C34;
	font-size: 8.7vh;
}
.optionBkgHidden{
	color: #CCC;
	font-size: 0;
}
		.optionBlockDefault{
			font-family: "Smiley Sans Oblique";
			white-space: nowrap;
			display: flex;
			flex-direction: column;
			align-items: center;
			align-content: center;
			text-align: center;
			font-size: 5vh;
			color: #222;
			transition: 0.2s ease;
			margin: 1vh;
			cursor: pointer;
		}
		.optionBlockDefault:hover{
			background-color: #222;
			color: #fff;
		}
		
		.optionBlockDefault h3{
			display: none;
			font-size: 1.2vw;
			opacity: 0;
		}
		
		
		.optionBlockActive{
			position: absolute;
			top: 110%;
			transform: translate(-20%,-85%);
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 4vh;
			font-size: 5vh;
			color: #fff;
			background-color: #B70002;
			transition: 0.2s ease;
		}
		.optionBlockActive h3{
			display:flex;
			font-size: 2.5vh;
			opacity: 1;
		}
		
		.optionBlockHidden{
			opacity: 0;
		}
		
		.optionArray{
			display: flex;
			position: absolute;
			top: 50vh;
			left: 50vw;
			height: 70vh;
			width: auto;
			transform: translate(-50%,-50%);
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			align-content: space-between;
			transition: 0.5s ease-in-out;
		}
		.optionColumnLeft{
			display: flex;
			width: 26vh;
			height: 50vh;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			transition: 0.5s ease-in-out;
			z-index: 1502;
		}
		.optionColumnRight{
			display: flex;
			width: 26vh;
			height: 50vh;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			transition: 0.5s ease-in-out;
			z-index: 1501;
		}
		
		#placeholder{
			width: 80vh;
			height: 80vh;
			margin: 1vh;
		}
		
		.descriptionBlock{
			font-family: "Smiley Sans Oblique";
			position: absolute;
			width: 50vh;
			height: 80vh;
			font-size: 2.7vh;
			transition: 0.5s ease;
			opacity: 0;
			justify-content: center;
			align-content: center;
		}
		.descriptionBlockActive{
			transition: 0.5s ease;
			opacity: 1;
		}
		
		
		#particle-container {
            width: auto;
            height: 70vh;
			aspect-ratio: 1;
			margin: 1px;
            position: relative;
			z-index: 1500;
        }
		#particle-canvas{
			width: 100%;
			height: 100%;
		}
        .pattern-button {
            position: absolute;
            top: 10px;
            z-index: 1;
        }
		.pattern-button button {
			color: black;
			padding: 10px 20px;
			background-color: transparent;
			border-color: gray;
			border-style: solid;
			border-width: medium;
			border-radius: 50px 20px;
			cursor: pointer;
			font-size: 16px;
			transition: background-color 0.3s ease;
			position: fixed; /* 固定位置，随屏幕滚动 */
			bottom: -70px;
			right: 60px;
		}

		.pattern-button button:hover {
			background-color:gray;
			border-color: white;
			color: white;
		}

#sec3ParticleCanvas{
	position: absolute;
	bottom: 5vh;
	left: 50vw;
	transform: translate(-50%,0);
	width: 100vw;
	height: 75vw;
	opacity: 0.5;
}