@import "variables";
@import "nav";
@import "lists";
@import "tags";
@import "tables";
@import "fonts";

html, body {
	margin:0;
}

body {
	background-image:$body-background-image;
	background-position:center center;
	color:$body-color;
	font-family:sofia;
}

a {
	color:$anchor-color;
	text-decoration:none;
	
	&:hover{
		color:$anchor-hover-color;
	}
}

img {
	width:100%;
}

main {
	width:$wrap;
	margin:3em auto;
		
	h2 {
		font-size:3em;
		text-align:center;
	}

	&.recipe {
		background:$recipe-background;
		width:$recipe-wrap;
		padding:1em 4em;
		border:1px solid $border;
		border-radius:8px;

		img {
			display:block;
			margin:0 auto 2em auto;
			border-radius:5px;
			border:1px solid $border;
		}
	
		h2 {
			font-size:2em;
		}
	}

	hr {
		clear:both;
		border:0;
		height:1px;
		background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
		margin:2em 0;
	}

	.meta {
		margin-bottom:1.5em;
	}

	.pagination {
		text-align:center;
	}

	section {	

		&.list {
			display:flex;
			flex-wrap:wrap;
			justify-content:center;
		}

		article {
			display:flex;
			flex-direction:column;
			width:$article-width;
			margin:$article-margin;
			background:$article-background;
			border:1px solid $border;
			border-radius:$article-border-radius;
			overflow:hidden;

			a {
				color:$article-color;
			}

			h3 {
				margin:.5em .8em;
				text-align:center;
			}

			.date {
				align-self:flex-end;
				margin:.5em;
				margin-top: auto;
				color:$article-date-color;
			}
		}
	}
}