/* Import en Font-face ------------------------------------------ */

@import "reset.css";
@import "https://use.typekit.net/xjn7mcf.css";

@font-face {
    font-family: 'Alte DIN 1451 Mittelschrift';
    src: url('../fonts/AlteDIN1451Mittelschrift.woff2') format('woff2'),
        url('../fonts/AlteDIN1451Mittelschrift.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Algemene stijlen -------------------------------------------- */

body {
	font: 400 100%/1.4 "din-2014", Roboto, Arial;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 95vh;
	padding: 2em 2em 0;
}

.logo { 
	width: 70vw;
	margin-bottom: 50px;
}

p {
	font: 400 1.4rem/1.4 "din-2014", Roboto, Arial;
	text-align: center;
	margin-bottom: 20px;
	width: 80vw;
}

p span { white-space: nowrap; }

strong { font-weight: 700; }

@media screen and (min-width: 800px) {
	.logo { width: 400px; }
	
	p {
		font: 400 1.4rem/1.4 "din-2014", Roboto, Arial;
		width: 50vw;
	}
}

/* Start button ------------------------------------------------ */
a.start {	
	display: inline-block;
  	font-size: 20px;
  	background: rgb(31,113,184);
  	color: white;
  	padding: 0.7em 1em;
  	padding-left: 0.9em;
  	display: flex;
  	align-items: center;
	justify-content: center;
  	border: none;
  	border-radius: 50px;
  	overflow: hidden;
  	transition: all 0.2s;
  	cursor: pointer;
	text-decoration: none;
	width: 300px;
	margin: 20px 0;
}

a.start span {
  	display: block;
  	margin-left: 0.3em;
  	transition: all 0.3s ease-in-out;
}

a.start svg {
  	display: block;
  	transform-origin: center center;
  	transition: transform 0.3s ease-in-out;
}

a.start:hover .svg-wrapper {
  	animation: fly-1 0.6s ease-in-out infinite alternate;
}

a:hover svg {
  	transform: translateX(3em) translateY(-4px) rotate(45deg) scale(1.5);
}

a.start:hover span {
  	transform: translateX(11em);
}

a.start:active {
  	transform: scale(0.95);
}

.st0 { fill: #fff; }

@keyframes fly-1 {
	from {
    	transform: translateY(0.1em);
  	}

  	to {
    	transform: translateY(-0.1em);
  	}
}

@media screen and (min-width: 1024px) {
	a.start { 
		font-size: 30px;
		width: 300px;
		transform: scale(90%);
	}
}