@import url("https://fonts.googleapis.com/css?family=Merriweather:400,700|Poppins:400,600");

:root {
	--bs-border-radius: 14px;
}

html,
body {
	height: 100%;
	font-family: "Poppins", sans-serif;
}

.logo {
	width: 40px;
	height: 40px;
}

.section-line {
	border-bottom: 2px solid purple;
	width: 25%;
	margin-bottom: 50px;
}

.section-line.revert {
	border-bottom-color: white;
}

.section-title {
	color: #423950;
}

#blogpost {
	font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#logo1 {
	stop-color: rgb(37, 160, 195);
	stop-opacity: 0.8;
}

#logo2 {
	stop-color: rgb(70, 62, 153);
	stop-opacity: 1;
}

#logo3 {
	stop-color: rgb(152, 164, 221);
	stop-opacity: 0.8;
}

#logo4 {
	stop-color: rgb(154, 208, 233);
	stop-opacity: 0.8;
}

body.container-fluid {
	background-image: url(../images/background.svg);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100%;
}

#blog.homepage-blog {
	background-color: rgba(128, 0, 128, 0.7); /*#6fb4ff;*/
}

#blog .card-img {
	height: 280px;
	background-position: center center;
	background-size: cover;
}

.blog-post {
	font-family: Merriweather;
	font-size: 1.2rem;
	line-height: 1.8;
	color: rgba(0, 0, 0, 0.8);
}

.img-logo {
	width: 88px;
	height: fit-content;
}

.text-purple {
	color: purple;
}

#performance {
	background-color: #276ebb;
}

#performance small {
	color: #cbe4ff;
}

.introduction-to-bootstrap {
	background-image: url("/blog/images/bootstrap.png");
}

.mastering-css-frameworks {
	background-image: url("/blog/images/creativity.jpg");
}

.the-benefits-of-css-framework {
	background-image: url("/blog/images/coding.jpg");
}

.reports {
	background-image: url("/assets/images/reports.jpg");
}

.writing-proposal {
	background-image: url("/assets/images/writing-proposal.jpg");
}

.start {
	background-image: url("/assets/images/start.png");
}

.tailwind-image {
	background-image: url("/blog/images/tailwindcss.webp");
}

.blurred {
	filter: blur(2px);
}

#signup-end {
	margin-top: 80px;
	margin-bottom: 80px;
}

.pulse {
	animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
	0% {
		box-shadow: 0 0 0 0px rgba(37, 99, 235, 0.2);
	}
	100% {
		box-shadow: 0 0 0 15px rgba(37, 99, 235, 0);
	}
}