body,html{
  width:100%;
  height: 100%;
}
body{
  margin:0;
  padding:0;
  background: radial-gradient(ellipse at bottom, #476589 0%, #090A0F 100%);
  overflow: hidden;
}
h1 {
  font-size: 30pt;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}
.text-center {
  text-align: center;
  margin-top: 15vh;
}
p,a,.footer-copyright {
  font-family: Arial, Helvetica, sans-serif;
  color: #c7c7c7;
  text-decoration: none;
}
.site-footer {
  position: absolute;
  bottom: 5%;
  width: 100%;
}
.site-footer-inner {
  display: flex;
  justify-content: space-between;
  margin: 0 10%;
  font-size: smaller;
}
.bubbles{
  position:absolute;
  width:100%;
  height: 100%;
  z-index:0;
  overflow:hidden;
  top:0;
  left:0;
}
.bubble{
  position: absolute;
  bottom:-100px;
  width:6px;
  height: 6px;
  background:#f1f1f1;
  border-radius:50%;
  opacity:0.6;
  animation: rise 10s linear infinite, sides 3s ease-in-out infinite alternate;
}
.bubble:nth-child(1){
  width:4px;
  height:4px;
  left:10%;
  animation-duration:16s;
}
.bubble:nth-child(2){
  width:4px;
  height:4px;
  left:20%;
  animation-duration:15s;
  animation-delay:1s;
}
.bubble:nth-child(3){
  width:5px;
  height:5px;
  left:35%;
  animation-duration:11s;
  animation-delay:2s;
}
.bubble:nth-child(4){
  width:8px;
  height:8px;
  left:50%;
  animation-duration:9s;
  animation-delay:0s;
}
.bubble:nth-child(5){
  width:5px;
  height:5px;
  left:55%;
  animation-duration:14s;
  animation-delay:1s;
}
.bubble:nth-child(6){
  width:6px;
  height:6px;
  left:65%;
  animation-duration:12s;
  animation-delay:3s;
}
.bubble:nth-child(7){
  width:9px;
  height:9px;
  left:70%;
  animation-duration:10s;
  animation-delay:2s;
}
.bubble:nth-child(8){
  width:15px;
  height:15px;
  left:80%;
  animation-duration:9s;
  animation-delay:2s;
}
.bubble:nth-child(9){
  width:12px;
  height:12px;
  left:70%;
  animation-duration:12s;
  animation-delay:1s;
}
.bubble:nth-child(10){
  width:9px;
  height:9px;
  left:25%;
  animation-duration:10s;
  animation-delay:1s;
}
.bubble:nth-child(11){
  width:4px;
  height:4px;
  left:10%;
  animation-duration:20s;
}
.bubble:nth-child(12){
  width:6px;
  height:6px;
  left:20%;
  animation-duration:18s;
  animation-delay:1s;
}
.bubble:nth-child(13){
  width:5px;
  height:5px;
  left:35%;
  animation-duration:17s;
  animation-delay:2s;
}
.bubble:nth-child(14){
  width:8px;
  height:8px;
  left:50%;
  animation-duration:11s;
  animation-delay:0s;
}
.bubble:nth-child(15){
  width:5px;
  height:5px;
  left:55%;
  animation-duration:14s;
  animation-delay:1s;
}
.bubble:nth-child(16){
  width:6px;
  height:6px;
  left:65%;
  animation-duration:12s;
  animation-delay:3s;
}
.bubble:nth-child(17){
  width:9px;
  height:9px;
  left:70%;
  animation-duration:10s;
  animation-delay:2s;
}
.bubble:nth-child(18){
  width:15px;
  height:15px;
  left:80%;
  animation-duration:9s;
  animation-delay:2s;
}
.bubble:nth-child(19){
  width:12px;
  height:12px;
  left:70%;
  animation-duration:10s;
  animation-delay:1s;
}
.bubble:nth-child(20){
  width:9px;
  height:9px;
  left:25%;
  animation-duration:13s;
  animation-delay:1s;
}
@keyframes rise{
  0%{
    bottom:-100px;
  }
  100%{
    bottom:100vh;
  }
}
@keyframes sides{
  0%{
    margin-left: 0px;
  }
  30%{
    margin-left: 50px;
  }
  100% {
    margin-left: 10px;
  }
}