body {
    background: #303e44;
  }
  body {
animation: colorchange 10s;
-webkit-animation: colorchange 10s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}

a {
  color: white;
  text-decoration: none;
  margin: 10px;
}

h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 40px;
  color: #fff;
}

p {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  color: #fff;
  width: 400px;
  margin-bottom: -5px;
  margin-top: -10px;
}

@keyframes colorchange
{
    0%   {background: #303e44;}
    20%  {background: #2f3144;}
    40%  {background: #392f44;}
    60%  {background: #442f42;}
    80%  {background: #2f443c;}
    100% {background: #293837;}
}

@keyframes colorchange
{
  0%   {background: #303e44;}
  20%  {background: #2f3144;}
  40%  {background: #392f44;}
  60%  {background: #442f42;}
  80%  {background: #2f443c;}
  100% {background: #293837;}
}

@-webkit-keyframes colorchange
{
  0%   {background: #303e44;}
  20%  {background: #2f3144;}
  40%  {background: #392f44;}
  60%  {background: #442f42;}
  80%  {background: #2f443c;}
  100% {background: #293837;}
}


/* thank you to mario */

@keyframes float {
  0% {
      transform: translatey(0px);
  }
  50% {
      transform: translatey(-17px);
  }
  100% {
      transform: translatey(0px);
  }
}

.margin{
margin-top: 300px;
animation: float 3s ease-in-out infinite;
}



/* thanks for writing the code */


.bg-bubbles {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.bg-bubbles li {
position: absolute;
list-style: none;
display: block;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.15);
bottom: -160px;
-webkit-animation: square 25s infinite;
animation: square 25s infinite;
transition-timing-function: linear;
}
.bg-bubbles li:nth-child(1) {
left: 10%;
}
.bg-bubbles li:nth-child(2) {
left: 20%;
width: 80px;
height: 80px;
-webkit-animation-delay: 2s;
        animation-delay: 2s;
-webkit-animation-duration: 17s;
        animation-duration: 17s;
}
.bg-bubbles li:nth-child(3) {
left: 25%;
-webkit-animation-delay: 4s;
        animation-delay: 4s;
}
.bg-bubbles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
-webkit-animation-duration: 22s;
        animation-duration: 22s;
background-color: rgba(255, 255, 255, 0.25);
}
.bg-bubbles li:nth-child(5) {
left: 70%;
}
.bg-bubbles li:nth-child(6) {
left: 80%;
width: 120px;
height: 120px;
-webkit-animation-delay: 3s;
        animation-delay: 3s;
background-color: rgba(255, 255, 255, 0.2);
}
.bg-bubbles li:nth-child(7) {
left: 32%;
width: 160px;
height: 160px;
-webkit-animation-delay: 7s;
        animation-delay: 7s;
}
.bg-bubbles li:nth-child(8) {
left: 55%;
width: 20px;
height: 20px;
-webkit-animation-delay: 15s;
        animation-delay: 15s;
-webkit-animation-duration: 40s;
        animation-duration: 40s;
}
.bg-bubbles li:nth-child(9) {
left: 25%;
width: 10px;
height: 10px;
-webkit-animation-delay: 2s;
        animation-delay: 2s;
-webkit-animation-duration: 40s;
        animation-duration: 40s;
background-color: rgba(255, 255, 255, 0.3);
}
.bg-bubbles li:nth-child(10) {
left: 90%;
width: 160px;
height: 160px;
-webkit-animation-delay: 11s;
        animation-delay: 11s;
}
@-webkit-keyframes square {
0% {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
100% {
  -webkit-transform: translateY(-700px) rotate(600deg);
          transform: translateY(-700px) rotate(600deg);
}
}
@keyframes square {
0% {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
100% {
  -webkit-transform: translateY(-1700px) rotate(600deg);
          transform: translateY(-1700px) rotate(600deg);
}
}