@import "base.css";

/*
body {
	text-align: justify;
	text-justify: inter-word;
}
*/

body { /* Is margin & padding inherited by everyone? */
	margin: 2em auto;
	padding: 1em 2em;
	max-width: 640px;
}

body > p {
	text-align: justify;
}

/* Heading 1 is solely used as main title */
h1 {
	font-weight: 100 !important;
	font-size: 48pt;
	margin: 0;
	margin-left: -10px;
	overflow: hidden;
}

/* Below ~600px there should be no "underline" on the title */
@media screen and (min-width: 600px) {
	h1::after {
		content: "";
		border-bottom: 1px solid;
		display: inline-block;
		position: relative;
		left: 0.1em;
		width: 100%;
		margin-right: -100%;
	}
}

h1, h2, h3, h4, h5, h6 {
	color: var(--pri-accent);
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
}

.icons,
.fleuron {
	text-align: center;
	overflow: hidden;
	margin: 2em auto;
}

.icons p,
.fleuron p {
	display: inline;
}

.icons p::before,
.icons p::after,
.fleuron p::before,
.fleuron p::after {
	content: "";
	display: inline-block;
	width: 100%;
	border-bottom: 1px solid black;
}

.icons p:before,
.fleuron p:before {
	margin-left: -100%;
}

.icons p:after,
.fleuron p:after {
	margin-right: -100%;
}

.icons p::before,
.icons p::after {
	vertical-align: 0.7em;
}

.icons a {
	margin-left: 0.5em;
	margin-right: 0.5em;
	font-size: 2.5em;
}

a {
	color: black;
	text-decoration: none;
}

a:hover {
	color: var(--lowkey-accent);
}

.projects {
	/* column-count: 2; */
	column-width: 299px;
	column-gap: 2em;
	column-rule: dashed 1px var(--lowkey-accent);
	column-fill: balance;
	text-align: justify;
	margin-bottom: 1.5em;
}


.projects ul {
	padding: 0;
	margin: 0;
}


.projects > ul > li {
	list-style: none;
	margin-bottom: 1.5em;
}

.projects > ul > li > ul > li {
	margin-left: 1.1em;
	list-style-type: square;
}

.projects p {
	margin: 0;
}

.fleuron {
	margin-bottom: 0;
}

.fleuron i {
	/* font-size: 2em; */
	margin-left: 0.5em;
	margin-right: 0.5em;
}

.fleuron p::before,
.fleuron p::after {
	vertical-align: 0.3em;
}

.footer ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 0 2em;
	margin-top: 0;
}

.footer ul li {
	display: inline;
}

.footer i {
	font-size: 1.5em;
	margin-right: 0.5em;
	vertical-align: bottom;
}