:root {
    --bg: #0A0F0C;
    --surface: #111A15;
    --surface-hi: #19251D;
    --border: #2A3A2E;
    --text-hi: #F0F5F1;
    --text-lo: #91A399;
    --accent-lo: #35D07F;
    --accent: #55E897;
    --accent-hi: #75F0B0;
    --success: #4ADE80;
    --warning: #FBBF24;
    --error: #F87171;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--bg);
}

@media (max-width: 600px) {
	.topnav {
		flex-direction: column;
		padding: 15px 0;
	}

	.topnav h1 {
		font-size: 24px;
		margin-bottom: 10px;
	}

	.navlinks {
		width: 100%;
		justify-content: center;
	}

	.topnav a {
		padding: 10px 12px;
		font-size: 15px;
	}

	.messagebox {
		margin: 20px 12px;
		padding: 40px 20px;
	}

	.messagebox h1 {
		font-size: 26px;
	}

	.messagebox p {
		font-size: 17px;
		line-height: 1.5;
	}
}

.topnav {
    background-color: var(--surface);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

.topnav h1 {
    color: var(--text-hi);
    margin: 0;
}

.topnav a {
    color: var(--text-hi);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.navlinks {
	display: flex;
	align-items: center;
}

.topnav a:hover {
    background-color: var(--accent);
    color: var(--surface);
    transition: background-color 0.5s ease;
}

.topnav a.active {
	background-color: var(--accent);
    color: var(--surface);
}

.messagebox {
    background-color: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-hi);
    text-align: center;
    border-radius: 12px;
    margin: 40px auto;
    padding: 60px 40px;
    max-width: 500px;
    box-sizing: border-box;
}

.messagebox h1 {
    color: var(--accent);
    margin: 0;
}

.messagebox p {
    font-size: 20px;
}

.messagebox br {
	padding: 15px;
}

.contactlinks {
    display: flex;
    gap: 35px;
    justify-content: center;
    padding: 10px;
}

.contactlinks a {
    color: var(--text-hi);
    font-size: 28px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.contactlinks a:hover {
    color: var(--accent);
}

.blogchains {
    text-align: left;
    max-width: 500px;
    margin: 30px auto 0;
}

.blogchains > h2 {
    color: var(--accent);
	text-align: center;
}

.blogfilters {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin: 30px 0;
}

.blogfilters a {
    color: var(--text-hi);
	background-color: var(--surface-hi);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 8px 14px;
	text-decoration: none;
}

.blogfilters a:hover,
.blogfilters a:active {
	background-color: var(--accent);
    color: var(--surface);
}

.blogposts {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.blogpost {
	ackground-color: var(--surface-hi);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
}

.blogpost h3 {
    color: var(--text-hi);
    margin-top: 0;
}

.blogpost-date {
    color: var(--text-lo);
    font-size: 14px;
}

.blogpost p {
    line-height: 1.5;
}

.blogpost > a {
    color: var(--accent);
    text-decoration: none;
}

.blogpost > a:hover {
    color: var(--accent-hi);
}