@font-face {
  font-family: 'Yekan';
  src: url('../fonts/WebYekan.eot?#') format('eot'),  /* IE6–8 */
       url('../fonts/WebYekan.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
       url('../fonts/WebYekan.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}

.wrapper {
	display: flex;
  flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
	min-height: 100vh;
	min-width: 100vw;
	.hero {
		font-size: 3rem;
	}
}

.lead {
	display: block;
	margin: 0 1em;
	font-size: calc(96% + 0.5vw);
	line-height: 1.5;
	opacity: .8;
}

.actor {
	color: #004D40;
	&:focus, &:hover {
		outline: 0;
		border-bottom: 2px dashed currentcolor;
		color: #212121;
	}
}

.basedOn {
  margin-top: 2.5em;
}

.wrapper {
	display: flex;
  flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
	min-height: 100vh;
	min-width: 100vw;
	.hero {
		font-size: 3rem;
	}
}

.lead {
	display: block;
	margin: 0 1em;
	font-size: calc(96% + 0.5vw);
	line-height: 1.5;
	opacity: .8;
}

.actor {
	color: #004D40;
	&:focus, &:hover {
		outline: 0;
		border-bottom: 2px dashed currentcolor;
		color: #212121;
	}
}

.basedOn {
  margin-top: 2.5em;
}

Move font-face to global scope
Move font-face to global scope
