html {
	scroll-behavior: smooth;
}

body {
	/* font-family: Helvetica; */
	font-family: 'Source Sans 3';
	margin: 0;
}

a,
a:visited {
	text-decoration: none;
	transition: color 0.5s ease;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.external-link,
.project-description a {
	color: white;
}

.external-link:hover,
.project-description a:hover {
	color: rgba(255, 255, 255, 0.75);
}

.icon {
	width: var(--icon-size);
	height: var(--icon-size);
}

.uppercase {
	text-transform: uppercase;
}

.ellipsis {
	white-space: break-spaces;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Styles for imported markdown files. */

.project-description {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: white;
	font-size: 1.1em;
	margin: 5%;
	padding-right: 30%;
	font-weight: 500;
}

.project-description h1,
.project-description h2,
.project-description h3 {
	text-align: right;
	margin: 0;
}

.project-description h2 {
	font-size: 1.4em;
}

.project-description p {
	color: var(--color-grey);
}

.project-description > ul {
	color: var(--color-grey);
	line-height: 1.3;
	margin: 1em 0;
}

.project-description ul ul {
	color: white;
	margin-bottom: 0.5em;
}

#collaborations ul > li {
	font-family: 'Source Sans 3';
	font-weight: 500;
}

#collaborations a {
	color: white;
}

#collaborations a:hover {
	color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 768px) {
	#project {
		grid-template-columns: 1fr;
		padding: 4em var(--page-padding-x-mobile);
	}

	.project-description {
		padding-right: revert;
	}
}

input[type='checkbox'] {
	/* appearance: none; */
	/* For iOS < 15 to remove gradient background */
	background-color: #fff;
	font: inherit;
	color: black;
	--dimension: 0.8em;
	width: var(--dimension);
	height: var(--dimension);
	border: 5px solid black;
	border-radius: 5px;
}

/* input[type="checkbox"]::before {
	--dimension: 1em;
	width: var(--dimension);
	height: var(--dimension);
	content: "";
}

input[type="checkbox"]:checked::before {
	--dimension: 1em;
	width: var(--dimension);
	height: var(--dimension);
	content: "⨯";
} */

@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 700;
	src: url('/fonts/SourceSans3-Bold.otf') format('opentype');
}

@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 500;
	src: url('/fonts/SourceSans3-Semibold.otf') format('opentype');
}

@font-face {
	font-family: 'Source Serif 4';
	font-style: normal;
	font-weight: 300;
	src: url('/fonts/SourceSerif4-Regular.otf') format('opentype');
}