.main-and-footer { 	display: flex; 	flex-direction: column; 	 	margin-top: 50px; 	 	 	 	align-items: center; 	 }     .main-cover { 	position: relative;  	display: flex; 	flex-direction: column; 	 	max-width: 1000px; 	 	width: 100%; 	 	 	background-color: white; 	border-radius: 3px; 	margin-top: 10px; }     .main-cover-backgroud { 	border-radius: 3px; } .main-cover-backgroud img { 	height: 300px; 	 	 	width: 100%; 	object-fit: cover;  	display: block;  	border: 1px solid var(--light); 	border-radius: 3px; } .main-cover-people {	 	z-index: 100; 	position: absolute;  	top: 100px; 	left: 20px; 	 	 	 	display: grid; 	grid-template-columns: 160px auto; 	align-items: center;  	gap: 20px;	 } .main-cover-people img { 	height: 160px; 	width: 160px; 	border-radius: 80px; 	object-fit: cover;  	display: block;  	border: 3px solid white;	 } .main-cover-info {	 	 	 	display: grid; 	grid-template-rows: auto auto; 	justify-content: left; 	gap: 10px; 	 	 } .main-cover-info1 {	 	font-size: 20px; 	font-weight: bold; 	color: white; } .main-cover-info2 {	 	font-size: 12px; 	 	color: #f6f6f6; } .main-cover-title {	 	z-index: 30; 	position: relative; 	top: -20px; 	 	width: 100%; 	border-radius: 20px 20px 3px 3px; 	background-color: white; 	display: grid; 	grid-template-columns: auto auto auto auto 1fr; 	 	padding: 20px; 	padding-bottom: 0px;  } .main-cover-achievement {	 	display: flex; 	flex-direction: column;  	place-items: center; 	 		 	height: 30px; 	 	font-size: 13px; 	color: var(--dark); 	font-weight: bold; 	margin-right: 30px; } .main-cover-achievement span {	 	font-weight: normal; 	color: #828CA0; } .main-cover-introduction { 	padding: 0px 20px; 	font-size: 13px; } .main-cover-meta {	 	display: flex; 	flex-direction: row;  	padding: 20px; 	padding-bottom: 0px; } .main-cover-meta div {	 	display: flex; 	flex-direction: row;  	align-items: center;  	border-radius: 3px; 	padding: 4px; 	background-color: var(--light); 	color: gray; 	font-size: 11px;	 	margin-right: 10px;	 } .main-cover-meta-nv {	 	color: #EA3680; } .main-cover-meta-nan {	 	color: #3282F6; } .main-cover-meta i { 	font-size: 11px; 	margin-right: 4px; } .main-cover-edit {	 	display: flex; 	flex-direction: row;  	 	width: 100%; 	padding: 20px; 	gap: 20px; } .main-cover-edit a {	 	border-radius: 15px; 	display: grid; 	place-items: center; 	height: 30px; 	width: 200px; 	font-size: 14px; 	color: white;	 	background-color: #ff6666; }     .main-content { 	display: flex; 	flex-direction: row;  	 	max-width: 1000px; 	width: 100%; 	 	 	 	 	 	border-radius: 3px; 	margin-top: 10px; 	margin-bottom: 10px; } .main-content-left { 	display: flex; 	width: 700px; 	flex-direction: column; 	 	 	 	padding: 20px; 	background-color: white; 	border-radius: 3px; 	gap: 20px; } .main-content-right { 	display: flex; 	width: 290px; 	flex-direction: column; 	margin-left: 10px; 	padding: 20px; 	background-color: white; 	border-radius: 3px; 	align-items: center;	 }     .creations-grid { 	display: flex;  	 	flex-direction: column; 	gap: 20px; 	 	 }     .people-tab-menu { 	display: flex; 	flex-direction: row; 	padding: 8px 0px; 	 	border-bottom: 1px solid var(--light); } .people-tab-menu-normal {  	display: flex; 	flex-direction: row; 	align-items: center; 	 	color: black; 	font-size: 16px;	 	margin-right: 24px;	 	height: 36px; 	border-bottom: 2px solid white; } .people-tab-menu-active {  	font-weight: bold; 	border-bottom: 2px solid #ff6666; } .people-tab-menu i { 	font-size: 16px; 	margin-right: 4px; }     .creation-card { 	display: grid; 	border-bottom: 1px solid var(--light); 	 	width: 100%; 	 	padding-bottom: 20px; } .creation-card:hover { 	 	 } .creation-card a { 	text-decoration: none; 	color: var(--dark); } .creation-card-title { 	font-size: 18px; 	margin-bottom: 10px; 	color: var(--dark); } .creation-card-author { 	font-size: 10px; 	 	 	 	color: #828CA0; 	display: grid; 	grid-template-columns: 16px auto; 	align-items: center;  	gap: 4px; } .creation-card-author img { 	height: 16px; 	width: 16px; 	border-radius: 8px; 	object-fit: cover;  	display: block;  	 } .creation-card-body { 	display: grid; 	 	gap: 5px; 	 	 } .creation-card-body-txt { 	display: grid; 	justify-self: start;  	align-items: center;  	color: var(--dark); } .creation-card-body-img { 	display: grid; 	 } .creation-card-body img { 	 	 	height: 100px; 	width: 200px; 	object-fit: cover;  	display: block;  	border: 1px solid var(--light); 	border-radius: 3px; } .creation-card-body p { 	font-size: 15px; 	line-height: 25px; 	 	 	 	 	 	 	 	 } .creation-card-actions { 	display: grid; 	grid-template-columns: auto auto auto auto 1fr; 	gap: 15px; 	font-size: 14px; 	margin-top: 5px; 	 	color: #828CA0; }     .person-grid { 	display: flex; 	flex-direction: column; 	gap: 20px; } .person-item { 	display: grid; 	background-color: white; 	 	border-radius: 3px; 	color: #828CA0; 	font-size: 13px; } .person-item-title { 	display: grid; 	grid-template-columns: auto 1fr auto; 	font-size: 14px; 	color: #333333; 	margin-bottom: 20px; 	align-items: center; } .person-item-title1 { 	font-size: 14px; 	 } .person-item-title2 { 	font-size: 14px; 	margin-left: 4px; } .person-item-title3 { 	font-size: 12px; 	color: #828CA0; } .person-item-post { 	font-size: 15px; 	 	padding: 20px 0px; 	border-radius: 3px; 	display: grid; 	justify-items: center; 	 } .person-item-user i { 	font-size: 80px; 	color: rgb(214,214,214); } .person-item-user img { 	height: 100px; 	width: 100px; 	border-radius: 50px; 	object-fit: cover; 	display: block; } .person-item-post1 { 	 	 	display: flex; 	flex-direction: row; 	gap: 20px;	 } .person-item-post1 span { 	padding: 0px 0px; } .person-item-post2 i { 	font-size: 30px; } .person-item-post3 {  } .person-item-post-btn { 	 	border-radius: 3px; 	display: grid; 	place-items: center; 	height: 40px; 	 	font-size: 14px; 	background-color: #ff6666;	 } .person-item-post-btn a { 	color: white; } .person-item-post-btn i { 	font-weight: bold; 	font-size: 16px; } .person-item-star, .person-item-hot, .person-item-note, .person-item-about { 	background-color: #f9f9fa; 	padding: 10px; 	border-radius: 3px; 	line-height: 2; } .person-item-about a { 	color: #4F0B54; }     .pagination { 	display: flex; 	justify-content: center; 	list-style: none; 	margin-top: 30px; }  .pagination li { 	margin: 0 5px; }  .pagination a { 	display: block; 	width: 40px; 	height: 40px; 	line-height: 40px; 	text-align: center; 	border-radius: 8px; 	background: white; 	color: var(--dark); 	text-decoration: none; 	box-shadow: var(--shadow); 	transition: all 0.3s; }  .pagination a:hover, .pagination a.active { 	background-color: var(--primary); 	color: white; }         @media (max-width: 992px) { 	.main-content-left { 		 		width: 75%; 	} 	.main-content-right { 		 		width: 24%; 		margin-left: 8px; 		flex-shrink: 1; 		min-width: 240px; 	}	 } @media (max-width: 768px) { 	.main-content-left { 		 		width: 80%; 	} 	.main-content-right { 		 		width: 19%; 		margin-left: 6px; 		flex-shrink: 1; 		min-width: 240px; 	} } @media (max-width: 576px) { 	.main-content-left { 		 		width: 100%; 	} 	.main-content-right { 		 		margin-left: 0px; 		display: none; 	} }