@charset "utf-8";
/* CSS Document */
.expandableContainer{
	position:relative;
	font-family: "Smiley Sans Oblique";
		display: flex;
		flex-direction: row;
		width: auto;
		height: 50vh;
		aspect-ratio: 0.3;
		transition: 0.5s ease-in-out;
		border-radius: 10px;
		box-shadow: 20px 20px 20px 5px #999;
		transform: translate(0%,0%);
		background-color: #DDD;
		cursor:pointer;
		margin-left: 5vh;
		margin-right: 5vh;
		overflow: hidden;
		opacity: 1;
	}
	.expandableContainer:hover{
		width: auto;
		height: 60vh;
		aspect-ratio: 0.4;
	}
	
	.ECActive{
		position: relative;
		/*left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);*/
		width: auto;
		height: 70vh;
		aspect-ratio: 4/3;
	}
	.ECActive:hover{
		width: auto;
		height: 70vh;
		aspect-ratio: 4/3;
		cursor: default;
	}
	
	.mainExpandingContainer{
		font-family: "Smiley Sans Oblique";
		position: absolute;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-content: center;
		align-items: center;
		width: 500vw;
		height: 70vh;
		top: 50vh;
		left: 50vw;
		transform: translate(-50%,-50%);
		transition: 0.5s ease-in-out;
	}
	
	.ECCoverImg{
		position: relative;
		top: 0%;
		left: 0%;
		background-size: cover;
		background-position: center;
		width: auto;
		height: 100%;
		aspect-ratio: 0.3;
		cursor: pointer;
		z-index: 10000;
		border-radius: 10px;
		transition: 0.5s ease-in-out;
		background-color: rgba(150,150,150,0.9);
		background-blend-mode: luminosity;
	}
	.ECCoverImg:hover{
		aspect-ratio: 0.4;
		background-color: rgba(0,0,0,0);
	}
	
	.ECText{
		font-family: "Smiley Sans Oblique";
		position:relative;
		justify-content: center;
		align-content: center;
		left: 50%;
		top: 50%;
		transform: translate(-65%,-50%);
		height: 90%;
		aspect-ratio: 1.1;
		font-size: 2.7vh;
		width: auto;
		color: #222;
	}
	.ECTextX1 {
		font-family: "Smiley Sans Oblique";
		position: relative;
		left: 0%;
    	top: 2%;
		height: 90%;
		aspect-ratio: 1.1;
		font-size: 2vh;
		width: auto;
		color: #222;

		/* 调整文字从左上角开始显示 */
		display: flex;
		flex-direction: column;
		justify-content: flex-start; /* 从上方开始 */
		align-items: flex-start; /* 从左侧开始 */
		text-align: left; /* 确保文字左对齐 */
	}
	.ECText h1{
		font-size: 4vh;
	}
	.ECText a{
		font-size: 3.2vh;
		color: #555;
	}
	.ECCloseBtn{
		position: relative;
		top: 5%;
		right: 5%;
		font-size: 5vh;
		color: #555;
		border-radius: 5px;
		background-color: none;
		transition: 0.2s ease;
		cursor: pointer;
		text-align: center;
		align-content: center;
		height: 5.2vh;
		width: 5.2vh;
	}
	.ECCloseBtn:hover{
		background-color: #222;
		color: #CCC;
	}
	
	.linkDescriptionBar{
		left: 0%;
		font-size: 5.5vh;
		align-content: center;
		text-align: center;
		justify-content: center;
		border-top: 1px solid #222;
		position: fixed;
		height: 10vh;
		bottom: 0vh;
		width: 100vw;
		transition: 0.5s ease-out;
		background-color: rgba(255,255,255,0.1);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}
	.LDBHidden{
		bottom: -10.1vh;
	}