/* subset */

@font-face {
  font-family: "CircularXXSub-MediumSubset";
  src: url("../fonts/CircularXXSub-MediumSubset.woff2") format("woff2");
}

@font-face {
  font-family: "CircularXXSub-MediumSubset";
  src: url("../fonts/CircularXXSub-MediumSubset.woff") format("woff");
}


/* Complete */

@font-face {
  font-family: "CircularXXWeb-Medium";
  src: url("../fonts/CircularXXWeb-Medium.woff") format("woff");
}

@font-face {
  font-family: "CircularXXWeb-Medium";
  src: url("../fonts/CircularXXWeb-Medium.woff2") format("woff2");
}

:root {
  --black: #1d1d1b;
  --white: #ffffff;
}

html {
	background-color: var(--white);
	animation-name: changeBackground;
	animation-duration: 1s;
	animation-timing-function: ease-out;
}
body {
	font-family: "CircularXXSub-MediumSubset";
	color: var(--black);
}
a {
	color: var(--white);
}
.container {
	max-width: 800px;
	margin: 0 auto;
	padding: 50px 30px;
}
h1 {
	margin: 16vh 0 4vh;
	font-size: 70px;
	font-weight: 100;
	line-height: 1;
}
.intro {
	margin: 6vh 0 10vh;
	font-size: 40px;
	line-height: 1.2;
}
.button {
	display: inline-block;
	padding: 10px 16px;
	border: 1px solid #1d1d1b;
	text-decoration: none;
	color: #1d1d1b;
	transition: background-color .4s, color .4s;
}
.button:hover {
	background-color: var(--black);
	color: var(--white);
}

@media screen and (max-width: 600px) {
	h1 {
		font-size: 50px;
	}
	.intro {
		font-size: 30px;
	}
}

@keyframes changeBackground {
  from {background-color: var(--black);}
  to {background-color: var(--white);}
}