/* GLOBALS */
*, html, body {
	font-family: "Inter", sans-serif;
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;
}
section{
	margin: 48px 0;
}
article>p {
	margin: 12px 0;
}
article>h4{
	margin: 12px 0;
}

article blockquote {
	margin: 0 24px;
	font-style: italic;
	font-weight: 300;
}
p>code{
	background: lightgray;
	padding: 2px 4px;
}
pre {
	white-space: pre-wrap;
}
p { 
	line-height: 1.5em;
}
.top-rounded {
	border-radius: 5px 5px 0px 0px;
}
.bottom-rounded {
	border-radius: 0px 0px 5px 5px;
}
:root {
	--main-color: #CA87FF;
}
.hover-link {
	color:black;
	text-decoration: none;
}
.hover-link:hover {
	text-decoration: underline;
}
nav ul>li{
	list-style: none;
}
article ul {
	margin: 0 32px;
}

/* TYPOGRAPHY */
h1 {
	font-size: 2.5em;
	margin-top: 5vw;
	margin-bottom: 12px;
}
h2 {
	font-size: 2em;
	margin: 24px 0;
}

/* HEADLINE */
.tagline {
	font-size: 1.5em;
}

/* CIRCLE */
#circle {
	position: absolute;
	width: 600px;
	height: 600px;
	background: var(--main-color);
	left: -300px;
	top: -300px;
	border-radius: 600px;
	z-index: -1;
}

/* PROJECT CARDS */
@media (max-width: 428px){
	.cards-container {
		display:flex;
		flex-direction: column;
	}
}
.cards-container {
	display:flex;
	gap: 12px;
	justify-content: space-between;
	margin: 16px 0;
}
.card {
	border: 1px #EBEBEB solid;
	flex: 1;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background:white;
	transition: 0.1s;
}
.card:hover{
	filter: drop-shadow(4px 4px 10px rgba(0,0,0,0.1));
	transition: 0.1s;
}
.card-thumbnail {
	width:100%;
}
.card-body {
	padding: 8px;
}
.card-summary {
	font-size: 0.9em;
}
.card-edge{
	background: var(--main-color);
	height: 6px;
}
.card-title{
	margin:0;
}

/* LISTING */
.listing {
	margin: 24px 0;
}
.listing-date{
	font-weight: 200;
	font-size: 1.1em;
	margin: 0;
}
.listing>h3{
	margin: 4px 0;
}
.listing-summary{
	font-size:0.9em;
}
.listing .listing-leader{
	color: rgba(0,0,0,0);
	transition: 0.2s;
}
.listing:hover .listing-leader{
	color: black;
	transition: 0.2s;
}
.listing-leader {
	text-align: right;
	font-size: 0.9em;
}
.listing-leader-link {
	color: inherit;
	text-decoration: none;
}
.listing-leader-link:hover{
	text-decoration: underline;
}

/* FOOTER */
#footer-nav{
	background: var(--main-color);
	margin-top: 12px;
}
@media (max-width: 428px){
	#footer-nav {
		padding: 24px 0;
	}
	.footer-link-container {
		flex-direction: column-reverse;
		align-items: center;
	}
	.main-links {
		flex-direction: column-reverse;
	}
	.main-links * {
		text-align: center;
	}
}
@media (min-width: 428px){
	.footer-link-container {
		padding: 24px 36px;
	}
	.footer-link-container ul{
		margin: 0px 48px;
	}
	.footer-link-container {
		justify-content: space-between;
	}
}
.footer-link-container {
	display: flex;
}
.footer-link-container li{
	margin: 12px 0;
}
.footer-link-container a{
	color: white;
	text-decoration: none;
}
.footer-link-container a:hover{
	text-decoration: underline;
}
.main-links {
	display: flex;
}

/* MENU */
.menu {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 8vw;
}
.menu ul {
	display: flex;
	gap: 12px;
}

/* IMAGES AND CAPTION */
.img-caption {
	color: lightgray;
	margin-top: -0.25em;
	font-size: 12px;
}
.img-container {
	text-align: center;
	margin: 24px 0;
}
.img-container>img {
	max-width: 100%;
	max-height: 540px;
}

/* PAGE CONTAINER */
.page-container{
	display: flex;
	flex-direction:column;
	min-height:100vh;
	margin: 0;
}
@media (max-width: 920px){
	.page-body {
		padding: 3vw;
		/* width: 90vw; */
	}
}
@media (min-width: 920px){
	.page-body{
		width: 48vw;
	}

}
.page-body {
	margin: auto;
	margin-top: 4em;
}

/* POST */
.post-title {
	font-weight: 400;
	font-size: 2em;
	margin-top: 0;
}
.post-year {
	font-weight: 200;
}
pre {
	padding: 0.5em;
}
code, code *{
	font-family: monospace;
}

/* TAGS */
.tags-section {
	margin: 24px 0;
}
.tag a{
	padding: 4px 8px;
}
.tag, .tag a {
	font-weight: 300;
	color: #FFC75A;
	text-decoration: none;
	font-size: 0.85em;
	transition: 0.1s;
	border-radius: 3px;
}
.tag a:hover{
	color: white;
	background: #FFC75A;
	transition: 0.1s;
	border-radius: 3px;
}

/* TWITTER / TWEETS */
.twitter-tweet-rendered {
	display: block;
	margin: auto;
}

/* .tag a, .large-tag a { */
/*   color: white; */
/*   text-decoration: none; */
/* } */

/* .large-tag, .tag { */
/*   color: white; */
/*   margin: 4px 8px; */
/*   margin-left: 0; */
/*   background: #FFC75A; */
/* } */
/* .large-tag { */
/*  font-size: 12px; */
/*   border-radius: 16px; */
/*   padding: 4px 8px; */
/* } */

/* .tag { */
/*  font-size: 10px; */
/*   border-radius: 12px; */
/*   padding: 1px 8px; */
/* } */

sup a {
	text-decoration: none;
}

.blog-line {
	display:flex;
}
@media (max-width: 428px){
	.blog-line{
		flex-direction: column;
	}
}

/* TABLE OF CONTENTS / TOC */
@media (min-width: 920px){
	#TableOfContents {
		position: fixed;
		left: 0;
		/* to center the nav on the left column */
		transform: translateX(calc(-100% + 24.5vw - calc( calc(26vw - 100%) / 2) ));
		border: solid 1px rgba(0,0,0,0.03);
		border-radius: 12px;
		padding: 16px;
		transition: 5s;
	}
	#TableOfContents:hover {
		transition: 5s;
		border: solid 1px rgba(0,0,0,0.5);
	}
	#TableOfContents:hover a{
		transition: 2s;
		color: black;
	}
	#TableOfContents a {
		transition: 2s;
		color: rgba(0,0,0,0.25);
		text-decoration: none;
	}
	#TableOfContents a:hover {
		color: black;
		text-decoration: underline;
	}
	#TableOfContents li{
		font-weight: 500;
		margin: 4px 0;
	}
	#TableOfContents li li {
		font-weight: 200;
		margin-left: 12px;
	}
	#TableOfContents li li li {
		margin-left: 24px;
	}
}
@media (max-width: 920px){
	#TableOfContents {
		display: none;
	}
}

/* TABLE */
article table {
	margin: 24px auto;
	border-collapse: collapse;
}
article th,td {
	padding: 4px 8px;
	text-align: center;
	border: 1px solid black;
}