body {
    background-color: #2e2d2d;
    background-image: url('street.gif');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}
.title {
    font-family: "Bytesized", sans-serif;
    font-size: xx-large;
    color: #ffffff;
    text-shadow: 2px 2px 4px #000000;
    text-align: center;
}
.title h1 {
    font-family: "Coral Pixels", serif;
    
}
.about {
    font-family: "Bytesized", sans-serif;
    font-size: medium;
    color: #ffffff;
    text-shadow: 1px 1px 2px #000000;
    clear: right;
    margin-top: 20px;
    font-size: 2rem;

}
.about h2 {
    text-align: right;
    font-family: "Coral Pixels", serif;

    margin-right: 10%;
}
.about.image {
    margin-left: 10%;
    width: 300px;
    height: auto;
    display: block;
    float: left;
    margin-top: 10px;
    transform: scale(1);
    transition: transform 3s;
    filter:contrast(1200);
}
.about.image:hover {
    /* transform: scale(5) rotate(360deg); */
    
    animation: head 6s ease-out;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    /* transition: transform 3s;
    filter: hue-rotate(90deg); */
    filter:contrast(1200);

}
.about p {
    margin-right: 10%;
    margin-left: 10%;
    text-align: left;
    /* font-family: "Coral Pixels", serif; */
}
.highlight {
    font-family: "Coral Pixels", serif;
}

.glitch-wrapper {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   background-color: #222;
}

.glitch {
   position: relative;
   /* font-size: 80px; */
   /* font-weight: 700; */
   line-height: 1.2;
   color: #fff;
   letter-spacing: 5px;
   z-index: 1;
}

.glitch:before,
.glitch:after {
   display: block;
   content: attr(data-glitch);
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0.8;
}

.glitch:before {
   animation: glitch-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
   color: rgb(51, 0, 255);
   z-index: -1;
}

.glitch:after {
   animation: glitch-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
   color: #ff0000;
   z-index: -2;
}
@keyframes head{
    0% {transform: rotate(0deg);}
    50% {transform:scale(5) rotate(360deg);}  
    100% {transform:scale(1) rotate(0deg);}
}
@keyframes glitch-color {
   0% {
      transform: translate(0);
   }

   20% {
      transform: translate(-3px, 3px);
   }

   40% {
      transform: translate(-3px, -3px);
   }

   60% {
      transform: translate(3px, 3px);
   }

   80% {
      transform: translate(3px, -3px);
   }

   to {
      transform: translate(0);
   }
}