* {
	margin: 0;
 	padding: 0;
 	position: relative;
 }

*, ::before, ::after { box-sizing: border-box; } /* Switch to border-box for box-sizing. */
::selection { background: lightseagreen; /* Safari */ }
::-moz-selection { background: lightseagreen; /* Firefox */ }

html, body, .container {
	height: 100%;
}


html {
	-webkit-font-smoothing: antialiased;
}

body {
	background: #111;
	color: #eee;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Lucida Grande", sans-serif;
	font-size: 100%;
	line-height: 1.5;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

a {
	border-bottom: 1px solid transparent;
	color: lightskyblue;
	text-decoration: none;
	pointer:  cursor !important;
	transition: border .5s;
}

a:hover {
	border-bottom-color:lightskyblue;
}

img {
	height: auto;
	max-width: 100%;
}
.wrap {
	max-width: 640px;
	min-height: 200px;
	padding: 2em 4em;
	background-color: #111;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 1em;
  border: 1px double #222;
  box-shadow: 0 0 80px #000;
}

h1 {
	font-size: 2.75em;
	margin-bottom: .5em;
}

p {
	margin: 0 0 2.5em 0;
	font-size: 1.25em;
}

ul {
	display: block;
	margin: 0 0 2.5em 0;
}

li {
	list-style: none;
	font-size: 1.25em;
}

span {
	font-size: 1.25em;
	display: block;
}

footer {
	margin: 2em 0 0 0;
	padding: 2em 4em 0;

	width: calc(100% + 8em);
	transform: translate( -4em, 0);
	border-top: 1px double #222;
}



nav ul {
  list-style: none;
}

@media (max-width: 480px) {
	body {
		padding: 1em;
		margin:  0;
	}

	.wrap {
	max-width: 640px;
	min-height: 200px;
	padding: 2em;
	background-color: #111;
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
  transform: translate(0,0);
  border-radius: 0;
  border: none;
  box-shadow: none;
}

footer {
	width: 100%;
	transform: translate(0,0);
	padding: 2em 0;
}

	h1 {
		font-size: 1.5em;
	}


	p, li, span {
		font-size: 1em;
	}
	li {
		padding: 2px 0;
	}

}


body {
	background: radial-gradient(#111, #000);
	background-size: 1200% 1200%;
	animation: gradient 50s ease infinite;
	height: 100vh;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}