<style>
	a {
		color: purple;
	}
	h1 {
		margin: 0px;
		padding: 0px;
		font-size: 50px;
	}
	#blog-container {
		z-index: 98;
		position: relative;
		display: table;
		left: 50%;
		top: -100px;
		transform: translate(-50%,0%);
		width: 80%;
		height: auto;
		background-color: #f4f4f4;
		padding: 40px;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
		border-radius: 20px;
		border-top: 8px solid #67228d;
	}
	#blog-table {
		position: absolute;
		width: 80%;
		height: auto;
		left: 50%;
		transform: translate(-50%,0%);
	}
	.blog-grid {
		display: grid;
		grid-gap: 20px;
		grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	}
	.post {
		position: relative;
		width: 350px;
		height: 400px;
		left: 50%;
		transform: translate(-50%,0%);
		overflow: hidden;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
	}
	.image {
		position: absolute;
		top: 0px;
		left: 0px;
		height: 70%;
		width: auto;
	}
	.blog-title-container {
		position: absolute;
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 40%;
		background-color: #301e55;
		border-top-right-radius: 30px;
	}
	.blog-title {
		position: relative;
		width: 100%;
		height: 70%;
		top: 50px;
		padding: 20px;
		color: white;
		font-size: 15px;
		
	}
	.category {
		position: absolute;
		top: 20px;
		left: 0px;
		padding: 5px;
		color: white;
		border: 0px;
		font-size: 13px;
		background-color: #67228d;
	}
	.open-icon {
		position: absolute;
		top: 20px;
		right: 30px;
		width: 20px;
	}
	#author-box {
		position: relative;
		width: 100%;
		margin-bottom: 25px;
		padding: 15px;
		border-radius: 20px;
		background-color: #e8e8e8;
	}
	#author-image {
		position: relative;
		width: 80px;
		height: 80px;
		border-radius: 50%;
	}
	#author-name {
		position: absolute;
		border: 0px;
		background-color: transparent;
		left: 110px;
		top: 50%;
		transform: translate(-0%,-50%);
	}
	#updated {
		position: absolute;
		border: 0px;
		background-color: transparent;
		top: 50%;
		transform: translate(-0%,-50%);
		right: 15px;
	}
	#category {
		position: absolute;
		top: -25px;
		left: 40px;
		padding: 10px;
		padding-left: 25px;
		padding-right: 25px;
		color: white;
		border: 0px;
		font-size: 13px;
		background-color: #67228d;
		border-radius: 20px;
	}
	#more-container {
		z-index: 98;
		position: relative;
		left: 50%;
		transform: translate(-50%,0%);
		width: 80%;
		height: auto;
		background-color: transparent;
		padding: 20px;
		padding-bottom: 50px;
		display: grid;
		grid-gap: 40px;
		grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	}
	@font-face {
		font-family: "h1";
		src: url('fonts/Poppins-Black.ttf');
	}
	@font-face {
		font-family: "h2";
		src: url('fonts/Poppins-Bold.ttf');
	}
	@font-face {
		font-family: "text";
		src: url('fonts/Poppins-Regular.ttf');
	}
	@font-face {
		font-family: "light";
		src: url('fonts/Poppins-Light.ttf');
	}
	* {
		box-sizing: border-box;
		font-family: text;
	}
	.gradient-text {
		background-image: linear-gradient(to right, #6a8cd6, #d973ed);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
	body {
		margin: 0px;
		background-color: #e8e8e8;
	}
	button {
		cursor: pointer;
	}
	#content {
		display: table;
		position: relative;
		width: 100%;
		height: auto;
	}
	@media (max-width: 900px) {
		h1 {
			font-size: 32px;
		}
		#blog-container {
			width: 100%;
			padding: 15px;
		}
		#author-box {
			background-color: transparent;
		}
		#author-name {
			transform: translate(0%,0%);
			top: unset;
			right: unset;
			left: 0px;
			bottom: -25px;
		}
		#updated {
			transform: translate(0%,0%);
			top: unset;
			right: unset;
			left: 0px;
			bottom: -45px;
		}
		#footer-container {
			height: 900px;
			max-height: 900px;
		}
		#more-container {
			left: 0px;
			width: 100%;
			transform: translate(0%,0%);
			text-align: center;
		}
		.post {
		  width: 100%;
		  max-width: 350px;
		}
		.blog-grid {
		  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		}
		.faq{
		background-color: #67228d;
		color: white; 
		padding: 10px;
		margin-bottom: 0px;
		}
		.answer{
		background-color: #eeeeee;
		padding: 10px;
		margin-top: 0px;
		}
		.links {
		background-color: #eeeeee;
		padding: 15px;
		border-radius: 10px;
		}
		.icon {
		position: relative;
		top: 5px;
		width: 30px;
		margin-right: 10px;
		}
	}
</style>