@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap');

body {
  display: flex;
  flex-direction: column;
  height: 90vh;
  font-family: 'EB Garamond', serif;
  font-size: 1.3em;
  line-height: 1.5;
  background-color: #000000;
  color: #bdc2c8;
  padding: 0 2em;
  box-sizing: border-box;
  margin: 1em 0;
  justify-content: center;
  row-gap: 2em;
  align-items: center;
}
::selection {
  color: #fff;
  background-color:  rgba(232, 232, 232, 0.1);
}
.audio {
  display: block;
  opacity: 0.3;
  z-index: 5;
  width: 100%;
  max-width: 545px;
  margin: 0 1em;
}
main {
  display: block;
  margin: 0;
	z-index: 3;
}
h1, .title {
  display: block;
  width: 100%;
  font-family: 'EB Garamond', serif;
  font-style: normal;
  font-size: 2em;
  font-weight: 500;
  margin: 0em 0 0em 0;
  text-align: left;
  text-rendering: optimizeLegibility;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-fon-smoothing: grayscale;
  margin: 0.5em 0 0.1em 0;
}
.author, a {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-style: normal;
	font-size: 0.9em;
	font-weight: 400;
	margin: 0em 0 0em 0;
	text-align: left;
  color: #bdc2c8;
  text-decoration: none;
}
.border {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  border: 40px solid #0F1316;
  opacity: 1;
  z-index: 2;
}
.stars, .twinkle, .clouds {
	position:absolute;
	display:block;
	top:0; bottom:0;
	left:0; right:0;
	width:100%;
	height:100%;
}
.stars {
	z-index: 0;
	background: #000 url('stars.png') repeat top center;
	opacity: 0.8;
}
.twinkle{
	z-index: 1;
	background:transparent url('twinkle.png') repeat top center;
	animation: move-twink-back 600s linear infinite;
  opacity: 1;
}
.clouds{
	z-index: 4;
  background:transparent url('clouds.png') repeat top center;
	animation: move-clouds-back 200s linear infinite;
}
@keyframes move-clouds-back {
	from {background-position:0 0;}
	to {background-position:10000px 0;}
}
@keyframes move-twink-back {
	from {background-position:0 0;}
	to {background-position:-10000px 5000px;}
}
@media all and (max-width: 600px) {
  body {
    font-size: 1.2em;
    line-height: 1.5;
    overflow: hidden;
    margin: 0;
    height: 95vh;
  }
  main { margin: 0em; }
  .title { font-size: 1.5em;}
  .author {font-size: 0.8em;}
  .border {border: 0px;}
}