@font-face {
	font-family: "meanings-of-flowers";
	src: url("../fonts/meanings-regular.ttf");
	font-weight: normal;
}

* {
	margin: 0;
	padding: 0;
}

*::selection {
	color: orangered;
}

body {
	margin: 1.75em 2.5em;
	font-family: meanings-of-flowers, helvetica, arial, sans-serif;
	font-size: 18px;
	line-height: 1.25em;
	background: white;
	color: #888;
}

.header,
.footer,
.project__text {
	max-width: 670px;
}

.header, 
.project__text {
	margin-bottom: 1.75em;
}

.footer {
	margin-bottom: 2.25em;
}

.footer p {
	margin-bottom: 1.25em;
}

.project {
	margin-bottom: .75em;
}

.project__body p {
	text-indent: 2em;
}

.project__body p:first-of-type {
	text-indent: 0;
}

.project__title {
	display: block;
	text-indent: 2em;
}

.project__images {
	margin-bottom: .75em;
}

.project__image {
	display: inline-block;
	margin-right: 1.75em;
	margin-bottom: 1em;
	height: 88px;
	max-width: calc(100vw - 5rem);
    object-fit: contain;
	object-position: bottom;
}

.project__image:hover {
	cursor: pointer;
}

.link, 
.link--alias {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	color: inherit;
}

.link:hover,
.link--alias:hover {
	color: orangered;
}

.link--alias:hover {
	cursor: alias;
}

h1 {
	font-size: inherit;
	font-weight: inherit;
}

@media only screen 
and (min-device-width: 375px) 
and (max-device-width: 812px){ 

	body {
		margin: 2.75em 3em;
		font-size: 28px;
		line-height: 35px;
	}

	.project {
		margin-bottom: 2em;
	}

	.project__text {
		max-width: 100%;
	}

	.projects-container img {
		margin: 1.375em 0.87em 1.375em 0;
		width: 100%;
		height: auto;
	}

}