/*****************************
GENERAL
******************************/

body {
	/*font-family: 'brandon-grotesque', 'Roboto Slab', serif;
	font-style: normal;*/
	/*font-family: 'Playfair Display', serif;*/
	font-family: 'IBM Plex Serif', serif;
	/*font-family: 'Merriweather', serif;*/
	color: #627087;
	font-weight: 400;
	/*line-height: 1.375em;*/
	line-height: 1.5em;
	font-size: 18px;

}

#wrapper {
	max-width: 780px;
	margin: 0 auto;
	padding: 0 5%;
}

a {
	text-decoration: none;
}


h3 {
	margin: 0 0 1em 0;
}



/*****************************
HEADING
******************************/

header {
	float: left;
	margin: 0 0 10px 0;
	padding: 5px 0 0 0;
	width: 100%;
}


#logo {
	text-align: center;
	margin: 0;
}

h1 {
	/*font-family: 'Playfair Display', serif;*/
	/*font-family: 'IBM Plex Serif', serif;*/
	font-family: 'Merriweather', serif;
	margin: 25px 0;
	font-size: 1.5em;
	font-weight: 900;
	line-height: 0.8em;
}

h2 {
	/*font-family: 'IBM Plex Serif', serif;*/
	font-family: 'Merriweather', serif;
	font-size: 0.75em;
	margin: -5px 0 15px 0;
	font-weight: 300;
}


/*****************************
PAGE: ABOUT
******************************/


img {
	display: block;
    margin-left: auto;
    margin-right: auto; 
	width: 100%
}

.social-media {
	font-size: 0.75em;
	text-align: center;
	clear: both;
	/*padding-top: 1.5em;*/
}

.social-media .fa-3x {
	width: 20px;
	height: 20px;
	margin: 0 7px;
	opacity: 0.5;
	color: #000;
	padding-right: 0.5em;
}

.social-media .fa-3x:hover {
	opacity: 1;
}

.break, .encryption, .sample {
	text-align: center;
}

.sample {
	padding: 5px;
	font-size: 17px;
}

p#work {
	font-size: 20px;


}

/*****************************
COLORS
******************************/

/* site body */

body {
	background: #f6f6f6
}

/* blue header */

/*header {
	background-color: #1da1f2;
	border-color: #63bef8; 
}*/

h1, h2 {
	color: #000000;
}

/* links */

a {
	color: #1da1f2;
}

a:hover {
	color: #ff0000;
}

p {
	color: #000000;
}


/*****************************
FOOTER
******************************/

.footer {
	font-size: 0.75em;
	text-align: center;
	clear: both;
	padding-top: 1.5em;
}

.footer p {
	color: #ccd6dd
}

.footer .fa-2x {
	width: 20px;
	height: 20px;
	margin: 0 7px;
	opacity: 0.5;
	color: #000;
}

.footer .fa-2x:hover {
	opacity: 1;
}