css.css

body {
    display: flex;
    overflow:auto;
    margin: 100px 0px 0px 0px

}
.container {
  width: auto;
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
  z-index: 100;
  white-space: pre-wrap;
}

code {
  word-break:break-all;
  word-wrap: break-word;
  white-space: pre-wrap;
}
pre {
    white-space: pre-wrap;
}
h2 span{
  font-family: "Century Gothic",sans-serif;
  width: 100%;
}
h2 span{
     text-align: center;
}

h2 span{
     position: relative;
     display: inline-block;
     padding-bottom:0.5em;
     border-bottom: 1px solid black;



}

h2 span::before,
h2 span::after {
     position: absolute;
     top: 100%;
     left:50%;
     transform:translateX(-50%);
     content: '';
     border: 10px solid transparent;
}

h2 span::before {
     border-top: 10px solid black;
}

h2 span::after {
     margin-top: -1px;
     border-top: 10px solid white;
}
a {
	display: inline-block;
	padding: 0.1em 0.3em;
  color: #0af;
	transition: all .3s;
}
a:hover {
	color: #fff;
	background-color: #0af;
}
.wavebox{
  width: 100%;
  height: 100%;
  /* background: #ddd; */
  position: fixed;
  top: 0;
  overflow: hidden;
}

.wave {
border-color: #0af;
  border-style: solid;
  height: 150%;
  width: 150%;
  position: absolute;
  top: -25%;
  left: -25%;
}
.wave:nth-child(1) {
  border-radius: 30% 70% 70% 30% / 40% 40% 60% 60% ;
  animation: drift 30000ms infinite linear;
  animation-delay: -10s;
}
.wave:nth-child(2) {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% ;
  animation: drift 50000ms infinite linear;
  animation-delay: -5s;
}
.wave:nth-child(3) {
  border-radius: 44% 56% 17% 83% / 40% 65% 35% 60% ;
  animation: drift 70000ms infinite linear;
  animation-delay: 0s;
}
@keyframes drift {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  from {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}