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-title h1{
   font-family: "Coral Pixels", serif;
   text-align: center;
}
.about-title p{
   outline: 2px ridge gray;
}
.likes-buttons a{
   margin: 0 auto;
}
.about-container{
   max-width: 800px;
   margin: 0 auto;
   background: #c0c0c0;
   border: 3px outset #fff;
   box-shadow: 8px 8px 0 rgba(0,0,0,0.3);
   margin-top: 10px;
}
.likes-container{
   max-width: 800px;
   margin: 0 auto;
   background: #c0c0c0;
   border: 3px outset #fff;
   box-shadow: 8px 8px 0 rgba(0,0,0,0.3);
   margin-top: 10px;
   
}
.likes-container a{
   padding: 10px;

}
.title-bar {
   background: linear-gradient(to right, #000080, #1084d0);
   color: white;
   padding: 3px 5px;
   font-weight: bold;
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 10px;
   
}
.title-bar-buttons {
   display: flex;
   gap: 2px;
}
.title-button {
   width: 16px;
   height: 14px;
   background: #c0c0c0;
   border: 1px outset #fff;
   font-size: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
}
.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.image:hover::after{
   transform: scale(1);
   transition: 4s;
}
.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);
   }
}