body {
    color:#fff;
    display:flex;
    align-items:center;
    font-weight:300;
    font-family:'Arial',sans-serif;
    -webkit-box-align:center;
    display:-webkit-box;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
body, html {
    width:100%;
    height:100%;
    max-height:100vh;
    overflow-x:hidden;
    margin:0;
    padding:0;
}
* {
    box-sizing:border-box;
}
h1 {
    font-weight:300;
    font-size:45px;
    margin-bottom:46px;
    margin-top:0;
    cursor: default;
    position:absolute;
    top:40%;
    left:30%;
}
@media screen and (max-width: 360px) {
	h1 {
		top:40%;
		left:20%;
	}
}
p {
    font-size:16px;
    line-height:20px;
}
sup, sub, .main-temp {
    font-size:7px;
}
.main-temp {
    color: #FF0000;
}
.header, .footer, .invisible {
    color:#0c41a5;
    padding:5px 20px;
}
.main {
    text-align:center;
    max-width:630px;
}
.opt-image {
    background-size: cover!important;
	margin: auto;
    background: no-repeat center; 
	border: 20px solid white!important;	
	position:relative;
	background-image: url(../images/picture.jpg);
}
.stat-image-back {
	opacity: 0;
	width:100%!important;
}
div.img-circle {
  border-radius: 50%!important;
  z-index: 100;
}
canvas {
	position: absolute;
	z-index: 900;
	top: 0;
	left: 0;
}