.main-and-footer { 	display: flex; 	flex-direction: column; 	 	margin-top: 50px; 	 	 	 	align-items: center; 	 }     .main-cover { 	 	display: flex; 	flex-direction: column; 	 	max-width: 1000px; 	 	width: 100%; 	 	 	background-color: white; 	border-radius: 3px; 	 }     .alert { 	padding: 15px 20px; 	 	margin: 10px; 	border-radius: 8px; 	display: flex; 	align-items: center; } .alert-success { 	background-color: #d4edda; 	color: #155724; 	border: 1px solid #c3e6cb; } .alert i { 	margin-right: 10px; 	font-size: 16px; } .close-alert { 	margin-left: auto; 	cursor: pointer; 	font-size: 16px; 	opacity: 0.7; 	transition: opacity 0.3s; } .close-alert:hover { 	opacity: 1; }     .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; 	 	 }     .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; }     summary {      list-style: none;      cursor: pointer;      font-weight: bold;   color: #2c3e50;   padding: 8px 0;   border-bottom: 1px solid #eee; }  summary::before {   content: "▼";    display: inline-block;   margin-right: 8px;   font-size: 12px;   transition: transform 0.2s;  }  details[open] summary::before {   transform: rotate(180deg);  }         @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; 	} }