/* 

Blog Categories
------------------------------------------------------------ */
	
	.categories {
		width: 100vw;
		margin: 0 0 0 -32px;
		padding: 0;
		overflow-x: scroll;
		overflow-y: hidden;
		display: inline-block;
	}	
		
		@media screen and (min-width: 768px) {
			.categories {
				margin: 0 0 0 -64px;
			}
		}
		
		@media screen and (min-width: 1024px) {
			.categories {
				width: calc(100vw - 320px)
			}
		}
	
	.category_container {
		display: flex;
		flex-wrap: nowrap; 
		overflow: visible;
		margin-left: 32px;
		margin-right: 32px;
		margin-top: 2px;
		margin-bottom: 2px;
	}
		
		@media screen and (min-width: 768px) {
			.category_container {
				margin-left: 64px;
				margin-right: 64px;
			}
		}
	
	.categories::-webkit-scrollbar { 
		display: none;
	}
	

/* 

Filter Buttons
------------------------------------------------------------ */
	
	.filter-btn {
		flex: 0 0 auto;
	}
	
	.filter-btn:last-child {
		padding-right: calc(32px - 8px);
	}
	
	.filter-btn a:link, .filter-btn a:visited {
		background-color: var(--alabaster);
		border-radius: 100px;
		color: var(--ship-grey);
		cursor: pointer;
		float: left;
		font-size: 1em;
		font-weight: 400;
		margin-left: 0;
		margin-top: 0;
		margin-bottom: 0;
		margin-right: 8px;
		padding: 8px 16px 8px 16px;
		text-decoration: none;
		transition: .25s margin, .25s padding;
	}
		
		@media (prefers-color-scheme: dark) {
			.filter-btn a:link, .filter-btn a:visited {
				background-color: var(--charade);
				color: var(--mercury);
			}
		}
	
	.filter-btn a:hover {
		background-color: var(--iron);
		color: var(--ship-grey);
		margin-top: -2px;
		margin-bottom: -2px;
		padding: 10px 18px;
	}
		
		@media (prefers-color-scheme: dark) {
			.filter-btn a:hover {
				background-color: var(--abbey);
				color: var(--mercury);
			}
		}
	
	.filter-btn a:active {
		background-color: var(--ship-grey);
		color: var(--white);
	}
		
		@media (prefers-color-scheme: dark) {
			.filter-btn a:active {
				background-color: var(--white);
				color: var(--baltic-sea);
			}
		}
	
	a.active:link, a.active:visited {
		background-color: var(--ship-grey);
		color: var(--white);
	}
	
		@media (prefers-color-scheme: dark) {
			a.active:link, a.active:visited {
				background-color: var(--white);
				color: var(--baltic-sea);
			}
		}