@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

body {
	margin: 0;
	padding: 0;
	font-family: "Poppins", sans-serif;
	background-color: #FFFFFF;
}

	#header {
		display: flex;
		width: 100%;
		height: 80px;
		position: fixed;
		background-color: #FFFFFF;	
	}
		
		#logo {
			width: 50%;
			height: auto;
		}

			#logo h1 {
				margin: 24px 24px 0;
				padding: 0;
			}

				#logo h1 a {
					margin: 0;
					padding: 0;
				}

					#logo h1 a img {
						display: block;
						width: 126px;
						height: 32px;
						filter: brightness(0) saturate(100%) invert(10%) sepia(8%) saturate(509%) hue-rotate(202deg) brightness(100%) contrast(90%);
					}

		#nav {
			width: 50%;
			height: auto;
		}

			#nav ul {
				display: flex;
				justify-content: flex-end;
				gap: 8px;
				margin: 0;
				padding: 16px 24px;
				list-style-type: none;
			}

				#nav ul li {
					font-size: 16px;
					font-weight: 500;
					line-height: 16px;
					text-align: center;
				}

					#nav ul li a {
						display: block;
						padding: 15px 20px;
						border-radius: 48px;
						text-decoration: none;
						transition: 0.3s;
					}

					#nav ul li a.button-primary {
						background-color: #232326;
						color: #FFFFFF;
					}

						#nav ul li a.button-primary:hover {
							background-color: #18181B;
							color: #FFFFFF;
						}

					#nav ul li a.button-secondary {
						background-color: #F9F9FA;
						color: #232326;
					}

						#nav ul li a.button-secondary:hover {
							background-color: #F1F2F3;
							color: #3F3F46;
						}

	#content {
		margin: 0;
		padding: 120px 0 80px;
	}

		.post {
			display: grid;
    		-webkit-box-pack: center;
    		-ms-flex-pack: center;
    		justify-content: center;
			padding: 0 24px;
    		gap: 24px;
		}

			.post img {
				width: 100%;
	    		max-width: 100%;
	    		height: auto;
				border-radius: 12px;
			}