html, body {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;font-family:'Open Sans', Arial, Helvetica, sans-serif;font-size:1rem;background:#233242;color:#f1f1f1;line-height:1.3;}
* {box-sizing:border-box;position:relative;}
html {height:100%;}
body {min-width:320px;min-height:100%;background:radial-gradient(black 15%, transparent 16%) 0 0,radial-gradient(black 15%, transparent 16%) 8px 8px,radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,radial-gradient(rgba(255,255,255,.1) 15%,transparent 20%) 8px 9px;background-color:rgba(0, 0, 0, 0);background-size:auto, auto, auto, auto;background-color:#233242;background-size:16px 16px;}
.bg-wrapper {position:absolute;top:50%;left:0;padding:16px;transform:translate(0,-50%);width:100%;}
picture, img {border:none;width:180px;height:auto;display:block;}
picture {margin:0 auto 32px auto;animation-duration:0.5s;animation-name:chdown;}
img {border-radius:50%;border:3px solid #fff;box-shadow:0 0 20px rgba(0,0,0,0.7);}
p, h1 {margin:0;padding:0;text-align:center;}
.cover-home {min-height:100vh;width:100vw;overflow:hidden;}
.chbgc {position:absolute;top:50%;left:50%;border-radius:50%;opacity:0.025;animation-iteration-count:infinite;animation-timing-function:ease;transform:translate(-50%,-50%);}
.bgc1 {width:360px;height:360px;background-color:#ffffff;animation-duration:10s;animation-name: chr1;}
.bgc2 {width:350px;height:350px;background-color:#ffffff;animation-duration:12s;animation-name: chr2;}
.bgc3 {width:340px;height:340px;background-color:#ffffff;animation-duration:14s;animation-name: chr3;}
.bgc4 {width:320px;height:320px;background-color:#ffffff;animation-duration:16s;animation-name: chr4;}
@keyframes chr1 { 0%, 100% {transform:translate(-70%, -49%);} 50% {transform:translate(-30%, -51%);} }
@keyframes chr2 { 0%, 100% {transform:translate(-20%, -30%);} 50% {transform:translate(-70%, -70%);} }
@keyframes chr3 { 0%, 100% {transform:translate(-20%, -45%);} 50% {transform:translate(-70%, -55%);} }
@keyframes chr4 { 0%, 100% {transform:translate(-80%, -35%);} 50% {transform:translate(-30%, -35%);} }
@keyframes chdown { 0% {transform:translate(0,-50%);opacity:0;} 100% {transform:translate(0,0);opacity:1;} }
@media all and (min-width:768px) {
picture, img {width:100%;max-width:375px;}
img {border:6px solid #fff;} 
.bgc1 {width:600px;height:600px;}
.bgc2 {width:580px;height:580px;}
.bgc3 {width:560px;height:560px;}
.bgc4 {width:540px;height:540px;}
}