@import "fonts.css";
@import "fontello/css/fontello.css";
@import "font-awesome/css/font-awesome.min.css";

:root {
    --font-1: "opensans", sans-serif;
    --font-2: "librebaskerville", serif;
    --font-mono: Consolas, "Andale Mono", Courier, "Courier New", monospace;

    --vspace-5_5  : calc(5.5 * var(--space));
    --vspace-6    : calc(6 * var(--space));
    --vspace-6_5  : calc(6.5 * var(--space));
    --vspace-7    : calc(7 * var(--space));
    --vspace-7_5  : calc(7.5 * var(--space));
    --vspace-8    : calc(8 * var(--space));
    --vspace-8_5  : calc(8.5 * var(--space));
}

.ribbon {
	/ width: 100; */
    font-family: opensans-extrabold; sans-serif;
	font-size: 25px;
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: 0;
	padding: 15px;
	position: absolute;
	left: 10%;
	top: 15%;
	text-align: center;
	border-radius: 15px;
	transform: rotate(-10deg);
	background-color: #f00000;
	color: white;
}
/*
.ribbon a:before {
    font-family: 'FontAwesome';
    content: "\f14c";
    font-size: 30px;
}
*/
.ribbon a, .ribbon a:visited {
    color: white;
}
.s-header__nav {
	font-weight: bold;
}
.s-hero__content h1 {
	text-shadow: 0px 1px 3px rgba(0, 0, 0, .8);
}
.s-about__pic {
	width: var(--vspace-7);
	height: var(--vspace-7);
	border: 1.6rem solid rgba(255, 255, 255, 0.02);
	border-radius: 15%;
}
a, a:visited {
	text-decoration: none;
	outline: 0;
	-webkit-transition: color .3s ease-in-out;
	-moz-transition: color .3s ease-in-out;
	-o-transition: color .3s ease-in-out;
	transition: color .3s ease-in-out;
}