:root {
	--gray0: #f8f8f8;
	--gray1: #dbe1e8;
	--gray2: #b2becd;
	--gray3: #6c7983;
	--gray4: #454e56;
	--gray5: #2a2e35;
	--gray6: #12181b;
	--gray7: #393939;

	--body-bgcolor-dark: #242424;
	--body-bgcolor-light: #f5f5f5;
	--default-font-color-dark: lightgray;
	--default-font-color-light: #202136;
	--headline-color-dark: #f8ee2c;
	--headline-color-light: var(--gray6);
	--subhead-color-dark: #f8ee2c;
	--subhead-color-light: var(--gray6);
	--menu-bgcolor-dark: var(--gray6);
	--menu-bgcolor-light: var(--gray2);
	--footer-bgcolor-dark: #393939;
	--footer-bgcolor-light: var(--gray1);
}

html {

	border: 0;
	padding: 0;
	margin: 0;
}

a:any-link {
	text-decoration: none;
	color: inherit;
	
}

table {
	padding-bottom: 5vw;
}

th {

	font-size: large;
	text-align: left;
	padding-bottom: 2vh;

}

tbody {

	tr {
		td {
			
			padding-right: 3vw;
			
			@media (prefers-color-scheme: dark) {
			color: var(--headline-color-dark);
			}

			@media (prefers-color-scheme: light) {
			color: var(--headline-color-light);
			}
		}
	}
	
}

body {

	max-width: 1080px;
	width: 95%;
	margin: auto;
	font-family: Roboto sans, Arial, sans-serif;

	@media (prefers-color-scheme: dark) {
		background-color: var(--body-bgcolor-dark);
		color: var(--default-font-color-dark);
	}

	@media (prefers-color-scheme: light) {
		background-color: var(--body-bgcolor-light);
		color: var(--default-font-color-light);
	}

}

img {
	max-width: 95%;
	height: auto;
}

footer.main-footer {

	margin-top: 1vh;
	padding: 0.5vw;
	border-top: 1px solid #797979;

	@media (prefers-color-scheme: dark) {
		background-color: var(--footer-bgcolor-dark);
	}

	@media (prefers-color-scheme: light) {
		background-color: var(--footer-bgcolor-light);
	}
	
	ul {
		li {
			padding-top:0.5vh;
			padding-bottom:0.5vh;
		}

	}

}

.menu {
	ul {
		display: flex;
		column-gap: 0.5vw;
		padding: 0;
		justify-content: flex-start;

		li {
			list-style-type: none;
			padding-left: 0.5vw;
			padding-right: 0.5vw;
			padding-top: 0.5vh;
			padding-bottom: 0.5vh;
			border: 1px solid var(--gray3);

			@media (prefers-color-scheme: dark) {
				background-color: var(--menu-bgcolor-dark);
			}

			@media (prefers-color-scheme: light) {
				background-color: var(--menu-bgcolor-light);
			}
		}
	}
}

.news-section {

	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(30%, auto));
	column-gap: 1vw;
	row-gap: 1vh;

	div {
		padding-top: 0.5vh;
		padding-bottom: 0.5vh;
		padding-left: 0.25vw;
		padding-right: 0.25vw;
		border: 1px solid var(--gray3);
		border-radius: 3px;

		@media (prefers-color-scheme: dark) {
			background-color: var(--gray4);
		}

		@media (prefers-color-scheme: light) {
			background-color: var(--gray1);
		}

		padding-bottom: 0.5vh;

		span {
			font-size: smaller;

		}

	}

	a {
		@media (prefers-color-scheme: dark) {
			color: var(--headline-color-dark);
		}

		@media (prefers-color-scheme: light) {
			color: var(--headline-color-light);
		}
	}

}


.articles-section {

	display: grid;
	--min: 30ch;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
	column-gap: 1vw;
	row-gap: 1vh;

	article {

		@media (prefers-color-scheme: dark) {
			border-bottom: 1px solid var(--gray4);
		}
		@media (prefers-color-scheme: light) {
			border-bottom: 1px solid var(--gray2);
		}
		padding-bottom: 1vh;

		time {
			font-family: monospace;
			font-size: small;
		}
		
		footer {
			span {
				display: inline-block;
				border-radius: 3px;
				font-size: medium;
				padding: 2px;
				padding-left: 4px;
				padding-right: 12px;
				border-top-right-radius: 25%;
				border-bottom-right-radius: 25%;

				@media (prefers-color-scheme: dark) {
					background: var(--gray4);
					color: var(--gray0);
				}

				@media (prefers-color-scheme: light) {
					background: var(--gray3);
					color: var(--gray1);
				}
			}
		}

		span {
			font-family: monospace;
			font-size: small;
		}

		header {

			font-size: large;
			font-weight: bold;

			@media (prefers-color-scheme: dark) {
				color: var(--headline-color-dark);
			}

			@media (prefers-color-scheme: light) {
				color: var(--headline-color-light);
			}
		}

	}

	&:first-child {
		grid-column: span 2;
	}

}

.articles-list-section {

	display: grid;
	grid-template-columns: 1;
	column-gap: 1vw;
	row-gap: 1vh;

	ul {
		list-style-type: none;
		display: flex;
		column-gap: 2vw;
		padding: 0;

		li {

			&.active {
				color: var(--gray3);
			}
			&.disabled {
				color: var(--gray3);
			}

		}
		
	}

	article {

		border-bottom: 1px solid var(--gray4);
		padding-bottom: 1vh;
   
		footer {
			span {
				display: inline-block;
				border-radius: 3px;
				font-size: medium;
				padding: 2px;
				padding-left: 4px;
				padding-right: 12px;
				border-top-right-radius: 25%;
				border-bottom-right-radius: 25%;

				@media (prefers-color-scheme: dark) {
					background: var(--gray4);
					color: var(--gray1);
				}

				@media (prefers-color-scheme: light) {
					background: var(--gray3);
					color: var(--gray1);
				}
			}
		}

		span {
			font-family: monospace;
			font-size: small;
		}

		header {

			font-size: large;
			font-weight: bold;

			@media (prefers-color-scheme: dark) {
				color: var(--headline-color-dark);
			}

			@media (prefers-color-scheme: light) {
				color: var(--headline-color-light);
			}
		}

	}

}

.tags-section {

	display: flex;
	column-gap: 0.75vw;
	row-gap: 0.25vh;
	padding: 0;
	justify-content: flex-start;
	margin-top: 2vh;
	margin-bottom: 5vh;

	div {
		display: inline-block;
		border-radius: 3px;
		font-size: medium;
		padding: 2px;
		padding-left: 4px;
		padding-right: 12px;
		
		border-top-right-radius: 25%;
		border-bottom-right-radius: 25%;

		@media (prefers-color-scheme: dark) {
			background: var(--gray4);
			color: var(--gray1);
		}

		@media (prefers-color-scheme: light) {
			background: var(--gray4);
			color: var(--gray1);
		}
		sup {
			font-size: medium;
		}
	}

}

.article-single {

	header {
		
		h3 {

			font-size: x-large;
			font-weight: bold;
			@media (prefers-color-scheme: dark) {
				color: var(--headline-color-dark);
			}
			@media (prefers-color-scheme: light) {
				color: var(--headline-color-light);
			}
		}

		h4 {
			
	@media (prefers-color-scheme: dark) {
				color: var(--subhead-color-dark);
			}
			@media (prefers-color-scheme: light) {
				color: var(--subhead-color-light);
			}		}
		
		time {
			font-size: medium;
		}
		
		address {

			display: inline;
			font-style: normal;
			font-weight: bold;
			
			@media (prefers-color-scheme: dark) {
				color: var(--headline-color-dark);
			}
			@media (prefers-color-scheme: light) {
				color: var(--headline-color-light);
			}
		}
		
		ul {

			padding: 0px;

			li {
					display: inline-block;
					border-radius: 2px;
					font-size: medium;
					padding: 2px;
					padding-left: 1vw;
					padding-right: 2vw;
					border-top-right-radius: 25%;
					border-bottom-right-radius: 25%;
					border: 2px solid yellow;

					@media (prefers-color-scheme: dark) {
						background: var(--gray4);
						color: var(--gray1);
					}

					@media (prefers-color-scheme: light) {
						background: var(--gray3);
						color: var(--gray1);
					}
			}
			
			li:not(:last-child) {
					margin-right: 1vw;
			}
			
		}
		
	}
	
	aside {
		padding-left:1vw;
		@media (prefers-color-scheme: dark) {
			border: 1px dotted var(--gray2);
		}
		@media (prefers-color-scheme: light) {
			border: 1px solid var(--gray5);
		}
	}

}

.section-heading{

	padding-left: 0vw;
	font-size:larger;

	@media (prefers-color-scheme: dark) {
		/* border-top: 1px dotted var(--gray2); 
		border-bottom: 1px dotted var(--gray2); */
		background-color: var(--body-bgcolor-dark);
		opacity: 0.75;
		text-decoration: underline gray;
	}

	@media (prefers-color-scheme: light) {
		/* border-top: 1px dotted var(--gray5);
		border-bottom: 1px dotted var(--gray5); */
		color: red;
		text-decoration: underline gray;
	}

}