/* source-sans-3-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/source-sans-3-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  src: url('/fonts/source-sans-3-v18-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* grape-nuts-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Grape Nuts';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/grape-nuts-v5-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



:root {

	--color-lightgrey: #fafafa;
	--color-red: #e30613;
}

html {
	height:100%;
	min-height:100%;
}

body {
	height:100%;
	background-color:var(--color-lightgrey);
	font-family:'Source Sans 3',Arial,Helvetica,sans-serif;
}

main {
	min-height:100%;
}

.outer-container {
	min-height:100%;
	height:100%;
	display:flex;
}

a {
	color:var(--color-red);
	text-decoration:none;
}

.vcard {
	position:relative;
	padding:20px;
	margin-bottom:40px;
	width:640px;
	max-width:calc(100% - 40px);
	margin: 0 auto 80px auto;
	/*border:2px solid var(--color-red);*/
	border-radius:20px;
}

.slogan {
	font-family:'Grape Nuts',serif;
	font-size:3rem;
	line-height:1.25;
	opacity:0;
	transform:scale(0.25);
	-webkit-transition: all 1.5s ease;
	-moz-transition: all 1.5s ease;
	-o-transition: all 1.5s ease;
	-ms-transition: all 1.5s ease; 
	transition: all 1.5s ease;
}
.slogan.show {
	opacity:1;
	transform:scale(1);
}

.edge {
	position:absolute;
	background-color:var(--color-lightgrey);
}
.edge-top {
	left:0;
	top:-2px;
	right:100px;
	height:20px;
}
.edge-right {
	right:-2px;
	top:180px;
	bottom:0;
	width:20px;
}
.edge-bottom {
	left:100px;
	bottom:-2px;
	right:0;
	height:20px;
}
.edge-left {
	left:-2px;
	top:0;
	bottom:180px;
	width:20px;
}

img.logo {
	width:400px;
	max-width:calc(100% - 40px);
}

footer {
	background-color:var(--color-lightgrey);
}

@media screen and ( min-width: 640px ) {
	
	.vcard {
		border-radius:60px;
	}

	.slogan {
		font-size:3rem;
		line-height:1.5;
	}
}