.entry-grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width:1168px ) {
	.entry-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width:736px ) {
	.entry-grid {
		grid-template-columns: repeat(1, 1fr);
	}
}

								/*ROBIN CODE ADDED UWU*/

							/* CSS for altering images*/
.uploaded-image {
	width: 100%;
	height: 400px; /* Larger height for desktop view */
	background-repeat: no-repeat;
	background-size: contain; /* Ensure image fits properly */
	background-position: center;
}


.uploaded-image-thumbnail {
	width: 90%;
	height: 200px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	margin: 0 0 0 0;
	padding: 0 0 0 0;

}

.uploaded-image-frontpage {
	max-width: 100%;
	height: 300px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

								/* CSS for entries on the landingpage*/

/* Base container styling */
.container-landingpage-entries {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	background-image: linear-gradient( #95D5B2, #B7E4C7, #D8f3DC);
	border-radius: 12px;
	padding: 16px;
	justify-content: center;
}

/* Blog post item styling */
.blog-post-landingpage {
	background: white;
	padding: 16px;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	flex: 1 1 calc(30% - 16px);
	min-width: 250px;
}

/* Desktop: 3x2 layout */
@media (min-width: 1024px) {
	.container-landingpage-entries {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(2, auto);
	}
}

/* Tablet & Mobile: 1x6 layout */
@media (max-width: 1023px) {
	.container-landingpage-entries {
		display: flex;
		flex-direction: column;
	}

	@media (max-width: 1024px) {
		.blog-post-landingpage {
			max-width: 100%
		}
	}
}

								/*CSS for altering text (landingpage)*/

#entry-format-frontpage > h1, h2, h3, h4, h5, h6 {
	font-size: 18px;
	font-weight: bolder;
}

#entry-format-frontpage > p {
	font-size: 15px;
	margin: 0 0 0 0 ;
	text-align: left ;
	line-height: 17px;
}

#entry-format-frontpage > li, ul {
	padding-left: 17px;
	font-size: 15px;
	margin: 0 0 0 0;
	text-align: left ;
	line-height: 18px;
}

.headerentriesfrontpage{
	font-weight: bold;
	color: #3d4449;
	text-align: center;
}

							/*Error message popup*/
.error-message-container {
	position: absolute;
	display: flex;
	width: 450px;
	height: 150px;
	padding: 12px 16px;
	border-radius: 5px;
	justify-content: center;
	background-color: #ffdddd;
	left: 35%;
	border: 1px solid #d8000c;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	z-index: 5;
	top: 30%;
}

@media (max-width: 1023px) {
	.error-message-container {
		width: 300px;
		height: 125px;
		left: 15%;
	}
	.error-message {
		color: #d8000c;
		font-weight: bold;
		font-size: 14px;
	}

}

.error-message {
	color: #d8000c;
	font-weight: bold;
}

.warning-btn-container {
	display: flex;
	justify-content: center;
	margin-top: 16px;
}

.warning-btn {
	background-color: #d8000c;
	padding: 10px 16px;
	height: 40px;
	font-size: 16px;
	border-radius: 5px;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	transition: background 0.3s, transform 0.2s;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.warning-btn:hover {
	background-color: #a70000;
}

.warning-btn:active {
	transform: scale(0.95);
}

		/*Account CSS*/

.account-info-container{
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: #52b788;
	max-width: 400px;
	margin-bottom: 16px;
	background-image: linear-gradient( #95D5B2 , #D8f3DC);
	border-radius: 12px;
}

.account-info-container-content{
	display: flex;
	flex-direction: column;
	justify-content: left;
	margin-top: 2px;
	margin-left: 16px;
}


.account-info-container-content > p{
	color: #333333;
	font-size: 15px;
	margin: 0 0 5px 0 ;
	font-weight: bold;
}

#headerMargin {
	margin-top: 10px;
}


 						/* Entry view CSS */

/* Wrapper for the single entry page */
.entry-container {
	display: flex;
	justify-content: center;
	padding: 16px;
	background: linear-gradient(to bottom, #52b788, #74C69D, #95D5B2, #B7E4C7);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	border-radius: 16px;
	width: 100%;
}

.entry-box {
	display: flex;
	flex-direction: column;
	background: white;
	border-radius: 16px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	padding-top: 24px;
	padding-left: 24px;
	padding-right: 24px;
	min-width: 75%;
	align-items: stretch;
	width: 100%;
}

.entry-content{
	width: 100%;
}

.entry-content-line {
	border-bottom: solid 5px #52b788;
	margin-bottom: 5px;
	margin-top: 8px;
	width: 100%;
	display: block;
}


@media (max-width: 1023px) {
	.entry-container {
		padding: 12px;
		width: 100%;
	}
	.entry-box {
		min-width: 100%;
		padding-top: 8px;
		padding-left: 8px;
		padding-right: 8px;
	}

	.entry-content-line {
		width: 100%;
		border-bottom-width: 3px;
	}
}

.entry-content > h1{
	font-size: 25px;
	margin-bottom: 5px;
	margin-top: 8px;
}

.entry-content > h2{
	font-size: 23px;
	margin-bottom: 5px;
	margin-top: 8px;
}

.entry-content > h3{
	font-size: 20px;
	margin-bottom: 5px;
	margin-top: 8px;
}

.entry-content > p{
	font-size: 16px;
	margin-bottom: 5px;
}

.entry-content > ul, li, ol {
	font-size: 16px;
	margin-bottom: 5px;
}


			/*other CSS*/


@media (max-width: 1023px) {
	#fontsize-mobile-a{
		font-size: 18px;
	}
}

.preview-container {
	display: flex;
	flex-direction: column; /* Stack image and button vertically */
	align-items: center; /* Center horizontally */
	gap: 8px; /* Add spacing between image and button */
	margin-top: 16px;
	margin-bottom: 16px;
	max-width: 200px; /* Moved from inline style to CSS */
	max-height: none; /* Remove max-height restriction */
}

/* Ensure images inside the preview container are constrained */
.preview-container img {
	max-width: 100%;
	max-height: 200px; /* Control image height */
	object-fit: contain; /* Prevent distortion */
	border-radius: 4px; /* Optional: for better visuals */
}

		/*	CSS for guidebox*/

.guidebox {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 1000;
	transition: opacity 0.4s ease;
}

.guidebox-content {
	background-color: #fff;
	border-radius: 12px;
	margin: 12% auto;
	padding: 25px;
	width: 85%;
	max-width: 520px;
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
	animation: slideUp 0.4s ease-in-out;
}

.guidebox-content h3 {
	font-size: 1.6rem;
	margin-bottom: 18px;
	color: #333;
}

.guidebox-content ul {
	list-style-type: none;
	padding: 0;
}

.guidebox-content li {
	font-size: 1.1rem;
	margin: 10px 0;
	color: #666;
}

.guidebox .close-guidebox {
	position: absolute;
	top: 15px;
	right: 25px;
	font-size: 28px;
	font-weight: bold;
	color: #aaa;
	cursor: pointer;
}

.guidebox .close-guidebox:hover {
	color: #333;
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(-30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}