/* ==========
Global styles
========== */

*, *::before, *::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: "Source Sans 3", sans-serif;
}

img {
	max-width: 100%;
}

/* ==========
Typography
========== */

.bold {
	font-weight: 700;
}

.other-user-name,
.location {
	margin: 0;
}

.other-user-name,
.likes,
.comment {
	font-size: .8125rem;
}

.location {
	font-size: .75rem;
}

.icons {
	font-size: 1.5rem;
}

/* Images */

.logo {
	max-width: 130px;
}

.avatar {
	border-radius: 100%;
	max-width: 35px;
}

/* ==========
Layout
========== */

.header {
	justify-content: space-between;
	padding: .25rem .75rem .5rem;
	border-bottom: 1px #C6C6C6 solid;
}

.row {
	display: flex;
	align-items: center;
}

.container {
	max-width: 375px;
	margin: 0 auto;
}

.post + .post {
	border-top: 25px #EDEDED solid;
}

.post-header {
	column-gap: .75rem;
	margin: .5rem .75rem;
}

.post-footer {
	margin: .5rem .75rem;
}

.post-footer i {
	margin-bottom: .5rem;
	margin: .25rem;
}

.icons {
	margin-left: -7px;
}

.icon {
	transition: opacity 150ms ease;
}

.icon:hover,
.icon:focus {
	opacity: .5;
}

.likes,
.comment {
	margin-top: 0;
}

.likes {
	margin-bottom: .5rem;
}