body{
    background-color: #4a8bad;
    margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
    overflow: hidden;
    background-color: #006AA2;
    display: flex;
    justify-content: space-between;
  }
  
  .topnav a {
    float: left;
    color: white;
    text-align: center;
    padding: 16px 16px;
    text-decoration: none;
    font-size: 17px;
    transition: 0.2s;
  }
  
  .topnav a:hover {
    background-color: #E50D0Ded;
    color: black;
  }
  
  .topnav a.active {
    background-color: #E50D0Ded;
    color: black;
  }


  .title{
    text-align: center;
    margin: 0px 200px;
    text-transform: uppercase;
    margin-top: 25px;
    font-size: 55px;
  }

h1{
  color: white;
 

}

.about{
  text-align: center;
  margin: 0px 500px;
}

p{
  color: white;
  padding: 20px;
}

img{
  margin-top: 20px;
    height: 300px;
    width: 300px;
    display: block;
    margin-left: auto;
    margin-right: auto;    
}




.glitch{
  text-transform: uppercase;
  animation-name: glitch;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  text-shadow: 
  0.05em 0 0 rgba(255,0,0,.75),
  -0.025em -0.05em 0 rgba(0,255,0,.75),
  0.025em 0.05em 0 rgba(0,0,255,.75);
  
}





@keyframes glitch{
  0%{
    text-shadow: 
  0.05em 0 0 rgba(255,0,0,.75),
  -0.05em -0.025em 0 rgba(0,255,0,.75),
  -0.025em 0.05em 0 rgba(0,0,255,.75);
  }
  15%{
    text-shadow: 
  -0.05em -0.025em 0 rgba(255,0,0,.75),
  0.05em 0.025em 0 rgba(0,255,0,.75),
  -0.05em -0.05em 0 rgba(0,0,255,.75);
  }
  50%{
    text-shadow: 
  0.025em 0.05em 0 rgba(255,0,0,.75),
  0.05em 0 0 rgba(0,255,0,.75),
  0 -0.05em 0 rgba(0,0,255,.75);
  }
  75%{
    text-shadow: 
  -0.025em 0 0 rgba(255,0,0,.75),
  -0.025em -0.025em 0 rgba(0,255,0,.75),
  -0.025em -0.05em 0 rgba(0,0,255,.75);
  }
  100%{
    text-shadow: 
  0.05em 0 0 rgba(255,0,0,.75),
  -0.05em -0.025em 0 rgba(0,255,0,.75),
  -0.025em 0.05em 0 rgba(0,0,255,.75);
  }
}