:root {
	--colour-white1: #cccccc;
	--colour-white2: #c2c2c2;
	--colour-white3: #b8b8b8;
	--colour-white4: #aeaeae;
	--colour-lightgrey1: #a4a4a4;
	--colour-lightgrey2: #9a9a9a;
	--colour-lightgrey3: #909090;
	--colour-lightgrey4: #868686;
	--colour-darkgrey1: #7c7c7c;
	--colour-darkgrey2: #727272;
	--colour-darkgrey3: #686868;
	--colour-darkgrey4: #5e5e5e;
	--colour-black1: #545454;
	--colour-black2: #4a4a4a;
	--colour-black3: #474747;
	--colour-black4: #333333;
}

/* ==== FONTS ==== */
/* Regular */
@font-face {
	font-family: "Libron";
	src: url("fonts/Libron-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Bold */
@font-face {
	font-family: "Libron";
	src: url("fonts/Libron-Bold.woff2") format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

/* Italic */
@font-face {
	font-family: "Libron";
	src: url("fonts/Libron-Italic.woff2") format("woff2");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

/* Bold Italic */
@font-face {
	font-family: "Libron";
	src: url("fonts/Libron-BoldItalic.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

/* Other use font */
@font-face {
	font-family: "ClarityCity";
	src: url("fonts/ClarityCity-VariableFont_wght.woff2") format("woff2 supports variations");
	font-weight: 100 900;
	font-display: swap;
}

body {
	background-color: var(--colour-white1);
	font-family: "Libron", sans-serif;
	font-weight: 400;
}

/* Primary text and headers */
h1, h2, p {
	color: var(--colour-black4);
	font-weight: 800;
}

/* sub-text/headers */
h3, h4, h5, h6, .sub-text {
	color: var(--colour-black1);
	font-weight: 600;
	font-style: italic;
}

/* this controls the primary site layout of the largest sections */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html, body {
	width: 100%;
	overflow-x: hidden;
}

.container {
	display: grid;
	grid-template-columns: 25vw 75vw;
	padding: 10px;
}

.container .primary-containers {
	border: 1px, solid var(--colour-white4);
	padding: 10px;
	text-align: left;
}

/* LEFT CONTAINER (FLEX: 1 Column, Many Rows)*/
#left-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

#left-container div {
	margin: 10px;
	padding: 5px 10px;
}

#mos-pic {
	width: 80%;
	aspect-ratio: 1 / 1;
	clip-path: circle();
	object-fit: cover;
}

#about-row {
	text-align: center;
	color: var(--colour-black1);
}

#about-me-text {
	font-family: "ClarityCity", sans-serif;
	font-weight: 400;
	padding-top: 0px;
	margin-top: 0px;
}

#projects-link {
	font-family: "ClarityCity", sans-serif;
	font-weight: 500;
}

#external-nav-row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

/* nav items */
.ex-nav-item {
	font-family: "ClarityCity", sans-serif;
	font-size: 10;
	font-weight: 100;
	padding: 10px;
}

a {
	color: inherit;
}

a:link, a:visited {
	text-decoration: none;
}

a:hover, a:active {
	text-decoration: underline;
}

/* ==== MAIN VIEW ==== */
#posts-subtext {
	font-family: "ClarityCity", sans-serif;
	font-weight: 200;
	font-style: italic;
	color: var(--colour-darkgrey1);
}

#posts-header {
	font-size: 100px;
}

#posts-group-header {
	color: var(--color-black1);
}

#divider {
	margin-top: 2px;
	margin-bottom: 10px;
}

/* MOBILE FEATURES */
#mobile-display-button {
	display: none;
}
@media screen and (max-width: 767px) {
	.hidden-display {
		display: none !important;
	}

	#mobile-display-button {
		display: block;
		position: fixed;
		bottom: 20px;
		left: 20px;
		z-index: 9999;
		border: 1px solid var(--colour-black4);
		font-size: 10px;
		background-color: var(--colour-white3);
		text-decoration: none;
	}
}