/*Included styles for the zipkes.llc site.*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

html{
	height: 100%;
	margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@keyframes background {
  0%   {background-color: #f57fbb;}
  25%  {background-color: #5fffd8;}
  50% {background-color: #520074;}
  100%  {background-color: #a2aa00;}
}

@keyframes foreground {
  0%   {fill: #00a99d;}
  25%  {fill: #ffec6a;}
  50% {fill: #9f0011;}
  100%  {fill: #31009f;}
}

body{
	height: 100%;
	font-family: "Inter", "Helvetica", sans-serif;
	background: #f57fbb;
	color: #666666;
	animation-name: background;
	animation-duration: 24s;
	animation-delay: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-direction: alternate;
}

body a{
	color: #666666;
}

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 960px;
}

.logo{
	width: 90%;
	margin-left: auto;
  margin-right: auto;
}

.logo img{
	width: 100%;
	max-width: 600px;
	filter: invert(54%) sepia(95%) saturate(2962%) hue-rotate(142deg) brightness(90%) contrast(102%);
}

.logo svg{
	width: 100%;
	max-width: 600px;
	fill: #00A99D;
	animation-name: foreground;
	animation-duration: 24s;
	animation-delay: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-direction: alternate;
}

.copy{
	width: 90%;
	margin-left: auto;
  margin-right: auto;

}

.copy h1{
	font-size: 1.8em;
	margin-bottom: 0.3em;
	font-weight: 500;
}

.copy p{
	margin-top: 0;
	font-weight: 300;
}

.copy p.subhead{
	font-style: italic;
}

.copy p.copyright{
	font-size: 0.7em;
}