* {
    box-sizing: border-box;
}

html, body {
	height: 100%;
	margin: 0;
	background-color: #b08153;
}

p {
	color: black;
	-webkit-text-stroke-width: .05em;
  -webkit-text-stroke-color: black;
	letter-spacing: .05em;
	line-height: 1em;
	margin-block-start: 0;
	margin-block-end: .75em;
}

p.sans {
  font-family: sans-serif;
  font-size: 28px;
  text-transform: uppercase;
}

p.serif {
  font-family: serif;
  font-style: bold;
  font-size: 21px;
}

a, a:hover, a:active, a:visited {
  color: black;
  text-decoration: none;
}

.rotate {
	transform: rotate(180deg);
}

.container {
	display: flex;
  flex-flow: column;
  height: 100%;
	padding: 1em;
}

.container .top {
	flex: 0 1 2em;
}

.container .middle {
	flex: 1 1 auto;
	position: relative;
}

.container .bottom {
	flex: 0 1 auto;
}

svg {
  background-color: white;
}

.svg-container {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding-bottom: 1em;
}

img {
	width: 100%;
	height: 100%;
	fill: black;
}

@media only screen and (max-width: 700px) {

  p.sans {
    font-size: 15px;
  }

  p.serif {
    font-size: 10px;
  }

}