html, body {
		margin: 0;
		padding: 0;
}

html {
  background-image: url('./bg.png');
  color: white;
  text-shadow: 0 1px 4px #000;
  font-family: aptos, arial, sans-serif;
  background-size: cover;
  background-position-x: 14%;
  background-attachment: fixed;
  height: 100vh;
}
html{
	-webkit-animation: kenburns-right 42s ease-in-out infinite alternate both;
	        animation: kenburns-right 42s ease-in-out infinite alternate both;
}



header {
  text-align:center;
  margin-bottom: 1.5em;
}

img.logo {
  height: 4em;
}

.version {
  margin-top: -2em;
  margin-bottom: 3em;
  font-size: .8em;
  color: mediumturquoise;
}

content {
  width: 80%;
  margin-left: calc(50vw - .5em - 40%);
  display: flow-root;
  background: rgba(22,22,22,.6);
  padding: .5em;
  border-radius: 8px;
  max-width: 80%;
  margin-top: 2em;
  margin-bottom: 6em;
}

h1,h2,h3,h4,h5 {
  color: #fff;
  text-shadow: 0 4px 4px #000;
}

a, a:visited {
  color: #d1b3ff;
  transition: text-shadow .3s;
  text-decoration: none;
}
a:hover {
  color: #fff;
  text-shadow: 0 1px 8px #ff00cb;
}

a.btn {
  background: rgba(0,0,0,.7);
  padding: 1em;
  border-radius: 8px;
}

pre {
  background: rgba(22,22,22,.7);
	padding: 1em;
	margin-left: -3em;
}

@-webkit-keyframes kenburns-right {
  0% {
	background-position-x:14%;
  }

  100% {
    background-position-x:40%;
  }
}
@keyframes kenburns-right {
  0% {
	background-position-x:14%;
  }

  100% {
    background-position-x:40%;
  }

}