p, h3{
	display:block;
	line-height: 1;
	margin: 0.5rem;
}
header{
	border-bottom: 1px solid deepskyblue;
    padding-bottom: 0.5rem;
}
h3{
	font-family: monospace;
}
p{
	font-family: "Arial";
	font-size:12px;
}
ul{
	list-style-type: none;
}
main.wrapper{
	display: flex;
	align-items:center;
	justify-content:center;
	height: 100vh;
	width: 100%;
	background-color: transparent;
}
section.content{
	display: block;
	background-color: lightblue;
    height: 50vh;
    padding: 15px;
	position: relative;
	width: 350px;
	max-width: 100%;
	margin:auto;
	-webkit-border-radius: 5%;
	-khtml-border-radius: 5%;
	-moz-border-radius: 5%;
	-ms-border-radius: 5%;
	-o-border-radius: 5%;
	border-radius: 5%;
}
.avatar{
	display: flex;
	padding: 10px;
	text-align: center;
    justify-content: center;
    align-items: center;
}
.avatar img{
	-webkit-border-radius: 50%;
	-khtml-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	box-shadow: 0 0 0 4px rgb(255 255 255 / 10%), 0 0 0 8px rgb(255 255 255 / 10%), 0 0 20px #fff;
}
.animated{
	-webkit-animation-duration:3s;
	-moz-animation-duration:3s;
	-khtml-animation-duration:3s;
	-ms-animation-duration:3s;
	-o-animation-duration:3s;
	animation-duration:3s;

	-webkit-animation-fill-mode:both;
	-moz-animation-fill-mode:both;
	-khtml-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	-o-animation-fill-mode:both;
	animation-fill-mode:both;
}
@-webkit-keyframes fadeInZoom{
	from{opacity:0;zoom: 0.1;}
	to{opacity:1;zoom:1}
}
@keyframes fadeInZoom{
	from{opacity:0}
	to{opacity:1}
}
.fadeInZoom{
	-webkit-animation-name:fadeInZoom;
	-moz-animation-name:fadeInZoom;
	-khtml-animation-name:fadeInZoom;
	-ms-animation-name:fadeInZoom;
	-o-animation-name:fadeInZoom;
	animation-name:fadeInZoom;
}
@-webkit-keyframes rotate{
	from{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0, 0, 1, -200deg);transform:rotate3d(0, 0, 1, -200deg);opacity:0}
	to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;}
	}
@keyframes rotate{
	from{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0, 0, 1, -200deg);transform:rotate3d(0, 0, 1, -200deg);opacity:0}
	to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;}
}
.rotate{
	-webkit-animation-name:rotate;
	-moz-animation-name:rotate;
	-khtml-animation-name:rotate;
	-ms-animation-name:rotate;
	-o-animation-name:rotate;
	animation-name:rotate;
}
.keyboard .line{
  color: #414e46;
  font-family: monospace;
  overflow: hidden;
  border-right: .15em solid #000;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: .15em;
  animation: 
    keyboard 3.5s steps(30, end),
    cursor .5s step-end infinite;
}
@keyframes keyboard {
  from { width: 0 }
  to { width: 100% }
}
@keyframes cursor {
  from, to { border-color: transparent }
  50% { border-color: #000 }
}
#stars{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:hidden;
	background: #000;
	margin: 0px;
    padding: 0px;
}
@keyframes stars{
	0%{transform:rotate(-45deg) translateX(0)}
	70%{opacity:1}
	100%{transform:rotate(-45deg) translateX(-1000px);opacity:0}
}
@-webkit-keyframes stars{
	0%{transform:rotate(-45deg) translateX(0)}
	70%{opacity:1}
	100%{transform:rotate(-45deg) translateX(-1000px);opacity:0}
}
#stars span{
	position:absolute;
	width:5px;
	height:5px;
	background:#fff;
	border-radius:50%;
	box-shadow:0 0 0 4px rgba(255,255,255,.1),0 0 0 8px rgba(255,255,255,.1),0 0 20px #fff;
	animation:stars 3s linear infinite;
}
#stars span:before{
	content:'';
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	width:300px;
	height:1px;
	background:linear-gradient(90deg,#fff,transparent);
}
#stars span:nth-child(1){top:0;right:0;animation-delay:0;animation-duration:1s}
#stars span:nth-child(2){top:0;left:500px;animation-delay:.2s;animation-duration:3s}
#stars span:nth-child(3){top:80px;right:0;animation-delay:.4s;animation-duration:2s}
#stars span:nth-child(4){top:0;left:1000px;animation-delay:.6s;animation-duration:1.5s}
#stars span:nth-child(5){top:300px;right:-150px;animation-delay:.8s;animation-duration:2.5s}
#stars span:nth-child(6){top:0;right:600px;animation-delay:1s;animation-duration:3s}
#stars span:nth-child(7){top:0;left:250px;animation-delay:1.2s;animation-duration:1.75s}
#stars span:nth-child(8){top:0;right:700px;animation-delay:1.4s;animation-duration:1.25s}
#stars span:nth-child(9){top:0;right:1000px;animation-delay:.75s;animation-duration:2.25s}
#stars span:nth-child(10){top:100px;right:-250px;animation-delay:2.75s;animation-duration:2.25s}
footer{
	padding: 10px;
    display: inline-block;
    width: 100%;
    max-width: 100%;
    text-align: center;
    vertical-align: bottom;
    position: absolute;
    bottom: 0px;
    margin: auto;
    left: 0%;
    border-top: 1px solid deepskyblue;
}