body {
	background-image: url(/images/stars.png);
    background-size: 512px;
    image-rendering: crisp-edges;
	color: #f1f1f1;
	padding: 0px;
	margin: 0px;
	font: 18px "verdana","sans-serif";

	animation: 30s linear 0s infinite normal bkg_kf;
}

/* Disable background animation when reduced animation
   os/browser preference is set */

@media (prefers-reduced-motion) {
body {
		animation: none;
		background-color: blueviolet;
	}
}

footer {
	margin: 18px auto 18px auto;
	text-align: center;
	padding: 6px;
	border: 2px solid white;
	background: #333;
	width: 40px;
}

#nav {
	width: min(700px, 100% - 240px);
	margin: auto;
	padding-left: 30px;
}

#nav li {
	display: inline-block;
	padding: 6px;
	margin: auto auto 18px auto;
	border: 2px solid white;
	background: #333;
}
#nav a, footer a { text-decoration: none; }

#content {
	width: min(700px, 100% - 240px);
	border-image: url('../border.png');
	border-image-slice: 60 60;
	border-image-outset: 40px;
	border-image-width: 120px;
	image-rendering: pixelated;

	background: #333;
	margin: 0px auto 0px auto;
	padding: 70px;
}

a {
	color: #d61cac;
}
a.title {
	display: block;
	width: min(700px, 100% - 20px);
	text-decoration: none;
	margin: auto;
}
a.title:visited { color: #f1f1f1; }
a.title:hover { color: #f1f1f1; }

h1 {
	margin-top:10px;
	margin-bottom: 10px;
	font-size: 30px;
}

h2 {
	margin-top:10px;
	margin-bottom: 10px;
	font-size: 20px;
}

.title h2 {
	margin-top:4px;
	margin-bottom: 80px;
}
h3 {
	margin-top:10px;
	margin-bottom: 10px;
	font-size: 15px;
}

/* Background animation keyframes */
@keyframes bkg_kf {
    0% {
        background-position: 0px 0px;
        background-color: blueviolet;
    }
    25% {
        background-position: 1280px 640px;
        background-color: yellow;
    }
    50% {
        background-position: -320px 640px;
        background-color: deeppink;
    }
    75% {
        background-position: 640px -640px;
        background-color: seagreen;
    }
    100% {
        background-position: 0px 0px;
        background-color: blueviolet;
    }
}

/* Adjustments for narrow displays */

@media (max-width: 530px) {
  #content {
    border: 6px double white;
    padding: 20px;
    width: auto;
    margin: 8px;
  }

  body {
  	font-size: 4vw;
  }

  #nav {
  	padding: 4px;
  	margin: 4px;
  	width: auto;
  }
  #nav li {
  	margin: 0px;
  }
}