@import 'colors.scss';
@import 'cards.scss';
@import 'code.scss';

@mixin screen-max($max) {
	@media (max-width: $max - 1) {
		@content
	}
}

body {
	background-color: $background-color;
	color: $font-color;
	margin: 0px;
	overflow-y: scroll;
	font-family: 'Helvetica';
	font-size: 1.1rem;
}

h2 {font-size: 1.2rem;}

header {
	background-color: $top-bar;
	box-shadow: 0px 5px 10px black;
	nav {
    	@include screen-max(500px){text-align: center;}

    	div {display: inline-block;}

		img { max-width: 300px; }

    	a {
        	margin-right: 12px;
        	font-weight: bold;
        	text-decoration: none;
        	&, &:visited, &:hover {color: $font-color-alternate;}
    	}
	}
}

header, main, section {padding: 0 16px;}

nav, main, section {max-width: 1200px; margin: auto;}
main img {max-width: 100%}

footer {text-align: center;}


a {
	color: $link-color;
	&:visited, &:hover { color: $link-color-visited; }
}

img.featured{aspect-ratio: 4/3;}
img.featured, img.author {
    display: block;
    border-radius: 8px;
    margin: 12px 0;
    object-fit: cover;
    max-height: 500px;
}

.left-to-right {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-evenly;
    align-items: end;
}

.align-center {
    align-items: center;
}

section.article-list {
    margin: 8px 0px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 40px;
}

.fill-wh {
	width: 100%;
	height: 100%
}