/*****************************************************/
/* This semester we will be using my variation of    */
/* Josh Comeau's CSS Reset instead of normalize      */
/* Read more at                                      */
/* https://www.joshwcomeau.com/css/custom-css-reset/ */
/*****************************************************/
/* Always add your CSS below the reset CSS           */
/*****************************************************/
:root {
  --color-font: white; /* #57606f; font colors */
  --color-primary: #ff6348; /* bruschetta tomato */
  --color-secondary: #3742fa; /* bright greek */
  --color-accent: #ffa502; /* orange */
  --color-accent-light: #70a1ff; /* french sky blue */
  --color-kinda-primary: #ff7f50;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  /* this an experimental line-height; if it breaks, add line-height: 1.5 to body */
  line-height: calc(1em + 0.5rem);
}

/* html,
body {
  height: 100%;
} */

body {
  /* margin: 0; */
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
}

/* until you get a feel for overflow, I'll keep these next two commented out */
/* p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
} */

/* p {
  overflow-wrap: break-word;
  hyphens: auto;
} */

/* temp CSS for HTML only assignments */
picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

svg {
  width: 200px;
}

/* temp fix to size about img */
img[srcset] {
  width: 50%;
  height: auto;
  margin: 2rem auto;
}

/* temporary fix to size svg images */
img[src$="svg"] {
  width: 200px;
}

/************ add your CSS here *****************/

body {
  font-family: "Delicious Handrawn", sans-serif;
  font-size: x-large;
  color: var(--color-font);
  background-color: #747d8c;
  align-self: center;
  text-align: center;
  display: flex;
  flex-direction: column;
}

header {
  text-align: left;
  justify-content: space-evenly;
  align-self: stretch;
}

h1,
h2,
h3,
h4 {
  color: var(--color-primary);
  font-family: "Permanent Marker", sans-serif;
  font-weight: 400;
  margin-bottom: 0.5em;
  margin-top: 1.5em;
}

h1 {
  font-size: 3.5rem;
}

h2 {
  font-size: 2.5rem;
}

h3 {
  font-size: 2rem;
}

p {
  margin: 1.5rem;
}

.button {
  border: 1px solid var(--color-secondary);
  color: var(--color-accent);
  cursor: pointer;
  display: inline-block;
  padding: 0.5rem 1rem;
  transition: background-color 350ms ease-in-out, 350ms ease-in-out;
  margin: 1rem;
}

.button:hover {
  background-color: (var(--color-secondary));
  color: var(--color-secondary);
}

main {
  padding: 0 1rem;
  max-width: 86rem;
  align-self: center;
}

article,
aside {
  margin-bottom: 6rem;
}

footer {
  padding: 1rem 1rem;
  background-color: var(--color-accent-light);
}

.fun {
  color: #2ed573;
  font-size: xx-large;
}

a {
  text-decoration: none;
  color: var(--color-accent);
  font-weight: 700;
}

a[href]:hover {
  color: var(--color-accent-light);
}

.hero {
  position: relative;
  height: 80vh;
  margin-bottom: 4rem;
}

.hero .text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.hero h1 {
  font-size: clamp(3.5rem, 6vw, 6rem);
  margin: 0;
}

.hero p {
  color: white;
}

.hero picture {
  height: 100%;
}

.hero img {
  height: 100%;
  object-fit: cover;
}

.cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 1rem;
}

.card {
  position: relative;
  display: inline-block;
  font-size: 2rem;
  font-weight: 400;
  text-align: center;
  opacity: 80%;
}

.card:hover {
  opacity: 100%;
  transform: scale(1.05);
  transition: 300ms ease-in-out;
}

.sr-only {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

.icons {
  justify-content: center;
}

nav {
  display: none;
  padding: 2rem 1.5rem 1rem;
  font-size: xx-large;
}

nav ul {
  display: flex;
  font-size: xx-large;
  justify-content: space-around;
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  max-width: 80rem;
}

nav a {
  display: block;
  padding: 1rem;
  font-size: 1.4rem;
}

nav a:not([href]) {
  color: var(--color-secondary);
}

.menu-icon {
  position: fixed;
  top: 20px;
  left: 20px;
  padding: 1.5rem;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: var(--color-secondary);
  z-index: 3;
}

.menu-icon line {
  stroke: var(--color-primary);
  stroke-width: 3px;
  stroke-linecap: round;
  transform-origin: center;
  transition: transform 300ms ease;
}

.menu-icon line:first-child {
  transform: translateY(16%);
}

.menu-icon line:last-child {
  transform: translateY(-16%);
}

/* JavaScript toggles a "close" class on the <nav> when the menu-icon is clicked */
.close nav {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  background-color: var(--color-accent-light);
  z-index: 1;
}

.close nav ul {
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
}

.close a[href]:hover {
  color: var(--color-primary);
}

.close line:first-child {
  transform: rotate(135deg);
}

.close line:last-child {
  transform: rotate(-135deg);
}

.panel {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.space {
  margin-bottom: 4rem;
}

.kinda {
  color: var(--color-kinda-primary);
}

/* Code for the contact page */
.sky {
  background-image: url(../images/mountain.jpg);
  color: var(--color-secondary);
}

input[type="submit"] {
  justify-self: center;
  margin: 2rem 0 6rem;
  border: 2px solid var(--color-secondary);
  border-radius: 3px;
  background-color: var(--color-primary);
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 0.75rem 1rem;
  transition: background-color 300ms ease;
}

input[type="submit"]:hover {
  background-color: var(--color-kinda-primary);
  border-color: var(--color-accent-light);
  box-shadow: none;
}

input[type="checkbox"],
input[type="radio"] {
  opacity: 0;
  height: 0;
}

input[type="radio"] + label,
input[type="checkbox"] + label {
  display: grid;
  grid-template-columns: var(--checkbox-size) max-content;
  grid-column-gap: 12px;
}

input[type="radio"] + label::before,
input[type="radio"] + label::after,
input[type="checkbox"] + label::before,
input[type="checkbox"] + label::after {
  content: "";
  display: block;
  /* height: var(--checkbox-size);
  width: var(--checkbox-size); */
  border: 2px solid var(--color-secondary);
  grid-row: 1 / span 1;
  grid-column: 1 / span 1;
  align-self: center;
  justify-self: center;
}

input[type="checkbox"] + label::before {
  background-color: var(--color-primary);
  border-radius: 3px;
}

input[type="radio"] + label::before {
  border-radius: 50%;
}

input[type="radio"] + label:hover::before,
input[type="checkbox"] + label:hover::before {
  box-shadow: 0px 0px 3px 3px black;
}

input[type="checkbox"] + label::after {
  /* base check dimensions on checkbox size */
  /* width: calc(var(--checkbox-size) / 3);
  height: calc(var(--checkbox-size) / 1.5); */
  border-color: var(--background-color);
  border-width: 3px;
  border-left: none;
  border-top: none;
  margin-bottom: 4px;
  transform: rotate(40deg);
  transition: opacity 300ms ease;
  opacity: 0;
}

input[type="radio"] + label::after {
  background-color: var(--color-secondary);
  border-radius: 50%;

  /* width: calc(var(--checkbox-size) - 8px);
  height: calc(var(--checkbox-size) - 8px); */
  transform: scale(0);
  transition: transform 200ms ease;
}

input[type="checkbox"]:checked + label::after {
  opacity: 1;
}

input[type="radio"]:checked + label::after {
  transform: scale(1);
}

@media (min-width: 401px) {
  .cards {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .card {
    flex: 1 1 45%;
  }
}

@media (min-width: 601px) {
  .menu-icon {
    display: none;
  }

  nav {
    display: block;
    justify-content: space-between;
  }

  nav a::after {
    content: "";
    display: block;
    width: calc(100% + 12px);
    height: 3px;
    margin-left: -6px;
    margin-top: 6px;
    background-color: var(--color-accent);
    transform: scale(0);
    transition: transform 200ms ease-in, color 300ms ease-in;
    transform-origin: right;
  }

  nav a[href]:hover {
    color: var(--color-accent);
  }

  nav a[href]:hover::after {
    transform: scale(1);
    transform-origin: left;
  }

  .panel {
    flex-direction: row;
  }

  .panel .text-wrapper {
    flex: 1 1 50%;
  }

  .panel .image-wrapper {
    flex: 1 1 50%;
  }

  .panel h2 {
    margin-top: 0;
  }

  .panel .left {
    order: -1;
  }
}

@media (min-width: 901px) {
  .hero {
    height: 80vh;
  }

  .panel .text-wrapper {
    flex: 1 1 50%;
  }

  .panel .image-wrapper {
    flex: 1 1 50%;
  }

  .panel .left {
    order: -1;
  }
}

@media (min-width: 1001px) {
  .cards {
    flex-wrap: nowrap;
  }
}

/* Start of Glitching text code */

.black {
  background-color: black;
  color: #eccc68;
  font-size: xx-large;
}

.glitch {
  z-index: -1;
}

section {
  display: flex;
  /* width: 100vw;
  height: 100vh; */
  justify-content: center;
}
section h1 {
  margin: auto;
  position: relative;
  z-index: 1;
  font-family: sans-serif;
  font-size: 10vmin;
  font-weight: 700;
}
section h1:before,
section h1:after {
  mix-blend-mode: screen;
}
section h1:before,
section h1:after {
  content: attr(data-name);
  position: absolute;
  z-index: 2;
  top: 0;
  width: 100%;
  height: 100%;
}
section h1:before {
  left: -5%;
  color: #ff0000;
  clip: rect(0, 1350px, 140px, 0);
  -webkit-animation-name: glitchRed;
  animation-name: glitchRed;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
section h1:after {
  left: 5%;
  color: #0000ff;
  clip: rect(0, 1350px, 50px, 0);
  -webkit-animation-name: glitchBlue;
  animation-name: glitchBlue;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
section h1 span {
  position: relative;
  z-index: 1;
  color: white;
  clip: rect(0, 900px, 722px, 56px);
  -webkit-animation-name: glitchGreen;
  animation-name: glitchGreen;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes glitchRed {
  0% {
    left: 0;
    -webkit-clip-path: inset(0% 0 0% 0);
    clip-path: inset(0% 0 0% 0);
  }
  9% {
    left: 0;
    -webkit-clip-path: inset(0% 0 0% 0);
    clip-path: inset(0% 0 0% 0);
  }
  10% {
    left: 1%;
    -webkit-clip-path: inset(21% 0 5% 0);
    clip-path: inset(21% 0 5% 0);
  }
  19% {
    left: 1%;
    -webkit-clip-path: inset(21% 0 5% 0);
    clip-path: inset(21% 0 5% 0);
  }
  20% {
    left: 6%;
    -webkit-clip-path: inset(72% 0 55% 0);
    clip-path: inset(72% 0 55% 0);
  }
  29% {
    left: 6%;
    -webkit-clip-path: inset(72% 0 55% 0);
    clip-path: inset(72% 0 55% 0);
  }
  30% {
    left: 0;
    -webkit-clip-path: inset(12% 0 -52% 0);
    clip-path: inset(12% 0 -52% 0);
  }
  39% {
    left: 0;
    -webkit-clip-path: inset(12% 0 -52% 0);
    clip-path: inset(12% 0 -52% 0);
  }
  40% {
    left: -5%;
    -webkit-clip-path: inset(-80% 0 12% 0);
    clip-path: inset(-80% 0 12% 0);
  }
  49% {
    left: -5%;
    -webkit-clip-path: inset(-80% 0 12% 0);
    clip-path: inset(-80% 0 12% 0);
  }
  50% {
    left: 0;
    -webkit-clip-path: inset(95% 0 32% 0);
    clip-path: inset(95% 0 32% 0);
  }
  59% {
    left: 0;
    -webkit-clip-path: inset(95% 0 32% 0);
    clip-path: inset(95% 0 32% 0);
  }
  60% {
    left: 2%;
    -webkit-clip-path: inset(4% 0 27% 0);
    clip-path: inset(4% 0 27% 0);
  }
  69% {
    left: 2%;
    -webkit-clip-path: inset(4% 0 27% 0);
    clip-path: inset(4% 0 27% 0);
  }
  70% {
    left: 0;
    -webkit-clip-path: inset(-64% 0 -77% 0);
    clip-path: inset(-64% 0 -77% 0);
  }
  79% {
    left: 0;
    -webkit-clip-path: inset(-64% 0 -77% 0);
    clip-path: inset(-64% 0 -77% 0);
  }
  80% {
    left: -8%;
    -webkit-clip-path: inset(75% 0 -4% 0);
    clip-path: inset(75% 0 -4% 0);
  }
  89% {
    left: -8%;
    -webkit-clip-path: inset(75% 0 -4% 0);
    clip-path: inset(75% 0 -4% 0);
  }
  90% {
    left: 0;
    -webkit-clip-path: inset(-33% 0 96% 0);
    clip-path: inset(-33% 0 96% 0);
  }
  99% {
    left: 0;
    -webkit-clip-path: inset(-33% 0 96% 0);
    clip-path: inset(-33% 0 96% 0);
  }
  100% {
    left: 3%;
    -webkit-clip-path: inset(48% 0 50% 0);
    clip-path: inset(48% 0 50% 0);
  }
}

@keyframes glitchRed {
  0% {
    left: 0;
    -webkit-clip-path: inset(0% 0 0% 0);
    clip-path: inset(0% 0 0% 0);
  }
  9% {
    left: 0;
    -webkit-clip-path: inset(0% 0 0% 0);
    clip-path: inset(0% 0 0% 0);
  }
  10% {
    left: 1%;
    -webkit-clip-path: inset(21% 0 5% 0);
    clip-path: inset(21% 0 5% 0);
  }
  19% {
    left: 1%;
    -webkit-clip-path: inset(21% 0 5% 0);
    clip-path: inset(21% 0 5% 0);
  }
  20% {
    left: 6%;
    -webkit-clip-path: inset(72% 0 55% 0);
    clip-path: inset(72% 0 55% 0);
  }
  29% {
    left: 6%;
    -webkit-clip-path: inset(72% 0 55% 0);
    clip-path: inset(72% 0 55% 0);
  }
  30% {
    left: 0;
    -webkit-clip-path: inset(12% 0 -52% 0);
    clip-path: inset(12% 0 -52% 0);
  }
  39% {
    left: 0;
    -webkit-clip-path: inset(12% 0 -52% 0);
    clip-path: inset(12% 0 -52% 0);
  }
  40% {
    left: -5%;
    -webkit-clip-path: inset(-80% 0 12% 0);
    clip-path: inset(-80% 0 12% 0);
  }
  49% {
    left: -5%;
    -webkit-clip-path: inset(-80% 0 12% 0);
    clip-path: inset(-80% 0 12% 0);
  }
  50% {
    left: 0;
    -webkit-clip-path: inset(95% 0 32% 0);
    clip-path: inset(95% 0 32% 0);
  }
  59% {
    left: 0;
    -webkit-clip-path: inset(95% 0 32% 0);
    clip-path: inset(95% 0 32% 0);
  }
  60% {
    left: 2%;
    -webkit-clip-path: inset(4% 0 27% 0);
    clip-path: inset(4% 0 27% 0);
  }
  69% {
    left: 2%;
    -webkit-clip-path: inset(4% 0 27% 0);
    clip-path: inset(4% 0 27% 0);
  }
  70% {
    left: 0;
    -webkit-clip-path: inset(-64% 0 -77% 0);
    clip-path: inset(-64% 0 -77% 0);
  }
  79% {
    left: 0;
    -webkit-clip-path: inset(-64% 0 -77% 0);
    clip-path: inset(-64% 0 -77% 0);
  }
  80% {
    left: -8%;
    -webkit-clip-path: inset(75% 0 -4% 0);
    clip-path: inset(75% 0 -4% 0);
  }
  89% {
    left: -8%;
    -webkit-clip-path: inset(75% 0 -4% 0);
    clip-path: inset(75% 0 -4% 0);
  }
  90% {
    left: 0;
    -webkit-clip-path: inset(-33% 0 96% 0);
    clip-path: inset(-33% 0 96% 0);
  }
  99% {
    left: 0;
    -webkit-clip-path: inset(-33% 0 96% 0);
    clip-path: inset(-33% 0 96% 0);
  }
  100% {
    left: 3%;
    -webkit-clip-path: inset(48% 0 50% 0);
    clip-path: inset(48% 0 50% 0);
  }
}
@-webkit-keyframes glitchBlue {
  0% {
    left: 0;
    -webkit-clip-path: inset(0% 0 0% 0);
    clip-path: inset(0% 0 0% 0);
  }
  9% {
    left: 0;
    -webkit-clip-path: inset(0% 0 0% 0);
    clip-path: inset(0% 0 0% 0);
  }
  10% {
    left: -2%;
    -webkit-clip-path: inset(41% 0 -15% 0);
    clip-path: inset(41% 0 -15% 0);
  }
  19% {
    left: -2%;
    -webkit-clip-path: inset(41% 0 -15% 0);
    clip-path: inset(41% 0 -15% 0);
  }
  20% {
    left: -4%;
    -webkit-clip-path: inset(-72% 0 75% 0);
    clip-path: inset(-72% 0 75% 0);
  }
  29% {
    left: -4%;
    -webkit-clip-path: inset(-72% 0 75% 0);
    clip-path: inset(-72% 0 75% 0);
  }
  30% {
    left: 0;
    -webkit-clip-path: inset(62% 0 4% 0);
    clip-path: inset(62% 0 4% 0);
  }
  39% {
    left: 0;
    -webkit-clip-path: inset(62% 0 4% 0);
    clip-path: inset(62% 0 4% 0);
  }
  40% {
    left: 7%;
    -webkit-clip-path: inset(80% 0 -12% 0);
    clip-path: inset(80% 0 -12% 0);
  }
  49% {
    left: 7%;
    -webkit-clip-path: inset(80% 0 -12% 0);
    clip-path: inset(80% 0 -12% 0);
  }
  50% {
    left: 0;
    -webkit-clip-path: inset(5% 0 55% 0);
    clip-path: inset(5% 0 55% 0);
  }
  59% {
    left: 0;
    -webkit-clip-path: inset(5% 0 55% 0);
    clip-path: inset(5% 0 55% 0);
  }
  60% {
    left: -5%;
    -webkit-clip-path: inset(-47% 0 36% 0);
    clip-path: inset(-47% 0 36% 0);
  }
  69% {
    left: -5%;
    -webkit-clip-path: inset(-47% 0 36% 0);
    clip-path: inset(-47% 0 36% 0);
  }
  70% {
    left: 0;
    -webkit-clip-path: inset(24% 0 -7% 0);
    clip-path: inset(24% 0 -7% 0);
  }
  79% {
    left: 0;
    -webkit-clip-path: inset(24% 0 -7% 0);
    clip-path: inset(24% 0 -7% 0);
  }
  80% {
    left: 5%;
    -webkit-clip-path: inset(-75% 0 4% 0);
    clip-path: inset(-75% 0 4% 0);
  }
  89% {
    left: 5%;
    -webkit-clip-path: inset(-75% 0 4% 0);
    clip-path: inset(-75% 0 4% 0);
  }
  90% {
    left: 0;
    -webkit-clip-path: inset(3% 0 -96% 0);
    clip-path: inset(3% 0 -96% 0);
  }
  99% {
    left: 0;
    -webkit-clip-path: inset(3% 0 -96% 0);
    clip-path: inset(3% 0 -96% 0);
  }
  100% {
    left: -3%;
    -webkit-clip-path: inset(98% 0 -50% 0);
    clip-path: inset(98% 0 -50% 0);
  }
}
@keyframes glitchBlue {
  0% {
    left: 0;
    -webkit-clip-path: inset(0% 0 0% 0);
    clip-path: inset(0% 0 0% 0);
  }
  9% {
    left: 0;
    -webkit-clip-path: inset(0% 0 0% 0);
    clip-path: inset(0% 0 0% 0);
  }
  10% {
    left: -2%;
    -webkit-clip-path: inset(41% 0 -15% 0);
    clip-path: inset(41% 0 -15% 0);
  }
  19% {
    left: -2%;
    -webkit-clip-path: inset(41% 0 -15% 0);
    clip-path: inset(41% 0 -15% 0);
  }
  20% {
    left: -4%;
    -webkit-clip-path: inset(-72% 0 75% 0);
    clip-path: inset(-72% 0 75% 0);
  }
  29% {
    left: -4%;
    -webkit-clip-path: inset(-72% 0 75% 0);
    clip-path: inset(-72% 0 75% 0);
  }
  30% {
    left: 0;
    -webkit-clip-path: inset(62% 0 4% 0);
    clip-path: inset(62% 0 4% 0);
  }
  39% {
    left: 0;
    -webkit-clip-path: inset(62% 0 4% 0);
    clip-path: inset(62% 0 4% 0);
  }
  40% {
    left: 7%;
    -webkit-clip-path: inset(80% 0 -12% 0);
    clip-path: inset(80% 0 -12% 0);
  }
  49% {
    left: 7%;
    -webkit-clip-path: inset(80% 0 -12% 0);
    clip-path: inset(80% 0 -12% 0);
  }
  50% {
    left: 0;
    -webkit-clip-path: inset(5% 0 55% 0);
    clip-path: inset(5% 0 55% 0);
  }
  59% {
    left: 0;
    -webkit-clip-path: inset(5% 0 55% 0);
    clip-path: inset(5% 0 55% 0);
  }
  60% {
    left: -5%;
    -webkit-clip-path: inset(-47% 0 36% 0);
    clip-path: inset(-47% 0 36% 0);
  }
  69% {
    left: -5%;
    -webkit-clip-path: inset(-47% 0 36% 0);
    clip-path: inset(-47% 0 36% 0);
  }
  70% {
    left: 0;
    -webkit-clip-path: inset(24% 0 -7% 0);
    clip-path: inset(24% 0 -7% 0);
  }
  79% {
    left: 0;
    -webkit-clip-path: inset(24% 0 -7% 0);
    clip-path: inset(24% 0 -7% 0);
  }
  80% {
    left: 5%;
    -webkit-clip-path: inset(-75% 0 4% 0);
    clip-path: inset(-75% 0 4% 0);
  }
  89% {
    left: 5%;
    -webkit-clip-path: inset(-75% 0 4% 0);
    clip-path: inset(-75% 0 4% 0);
  }
  90% {
    left: 0;
    -webkit-clip-path: inset(3% 0 -96% 0);
    clip-path: inset(3% 0 -96% 0);
  }
  99% {
    left: 0;
    -webkit-clip-path: inset(3% 0 -96% 0);
    clip-path: inset(3% 0 -96% 0);
  }
  100% {
    left: -3%;
    -webkit-clip-path: inset(98% 0 -50% 0);
    clip-path: inset(98% 0 -50% 0);
  }
}
@-webkit-keyframes glitchGreen {
  0% {
    -webkit-clip-path: inset(0% 0 0% 0);
    clip-path: inset(0% 0 0% 0);
  }
  9% {
    -webkit-clip-path: inset(0% 0 0% 0);
    clip-path: inset(0% 0 0% 0);
  }
  10% {
    -webkit-clip-path: inset(41% 0 -15% 0);
    clip-path: inset(41% 0 -15% 0);
  }
  19% {
    -webkit-clip-path: inset(41% 0 -15% 0);
    clip-path: inset(41% 0 -15% 0);
  }
  20% {
    -webkit-clip-path: inset(-72% 0 75% 0);
    clip-path: inset(-72% 0 75% 0);
  }
  29% {
    -webkit-clip-path: inset(-72% 0 75% 0);
    clip-path: inset(-72% 0 75% 0);
  }
  30% {
    -webkit-clip-path: inset(62% 0 4% 0);
    clip-path: inset(62% 0 4% 0);
  }
  39% {
    -webkit-clip-path: inset(62% 0 4% 0);
    clip-path: inset(62% 0 4% 0);
  }
  40% {
    -webkit-clip-path: inset(80% 0 -12% 0);
    clip-path: inset(80% 0 -12% 0);
  }
  49% {
    -webkit-clip-path: inset(80% 0 -12% 0);
    clip-path: inset(80% 0 -12% 0);
  }
  50% {
    -webkit-clip-path: inset(5% 0 55% 0);
    clip-path: inset(5% 0 55% 0);
  }
  59% {
    -webkit-clip-path: inset(5% 0 55% 0);
    clip-path: inset(5% 0 55% 0);
  }
  60% {
    -webkit-clip-path: inset(-47% 0 36% 0);
    clip-path: inset(-47% 0 36% 0);
  }
  69% {
    -webkit-clip-path: inset(-47% 0 36% 0);
    clip-path: inset(-47% 0 36% 0);
  }
  70% {
    -webkit-clip-path: inset(24% 0 -7% 0);
    clip-path: inset(24% 0 -7% 0);
  }
  79% {
    -webkit-clip-path: inset(24% 0 -7% 0);
    clip-path: inset(24% 0 -7% 0);
  }
  80% {
    -webkit-clip-path: inset(-75% 0 4% 0);
    clip-path: inset(-75% 0 4% 0);
  }
  89% {
    -webkit-clip-path: inset(-75% 0 4% 0);
    clip-path: inset(-75% 0 4% 0);
  }
  90% {
    -webkit-clip-path: inset(3% 0 -96% 0);
    clip-path: inset(3% 0 -96% 0);
  }
  99% {
    -webkit-clip-path: inset(3% 0 -96% 0);
    clip-path: inset(3% 0 -96% 0);
  }
  100% {
    -webkit-clip-path: inset(98% 0 -50% 0);
    clip-path: inset(98% 0 -50% 0);
  }
}
@keyframes glitchGreen {
  0% {
    -webkit-clip-path: inset(0% 0 0% 0);
    clip-path: inset(0% 0 0% 0);
  }
  9% {
    -webkit-clip-path: inset(0% 0 0% 0);
    clip-path: inset(0% 0 0% 0);
  }
  10% {
    -webkit-clip-path: inset(41% 0 -15% 0);
    clip-path: inset(41% 0 -15% 0);
  }
  19% {
    -webkit-clip-path: inset(41% 0 -15% 0);
    clip-path: inset(41% 0 -15% 0);
  }
  20% {
    -webkit-clip-path: inset(-72% 0 75% 0);
    clip-path: inset(-72% 0 75% 0);
  }
  29% {
    -webkit-clip-path: inset(-72% 0 75% 0);
    clip-path: inset(-72% 0 75% 0);
  }
  30% {
    -webkit-clip-path: inset(62% 0 4% 0);
    clip-path: inset(62% 0 4% 0);
  }
  39% {
    -webkit-clip-path: inset(62% 0 4% 0);
    clip-path: inset(62% 0 4% 0);
  }
  40% {
    -webkit-clip-path: inset(80% 0 -12% 0);
    clip-path: inset(80% 0 -12% 0);
  }
  49% {
    -webkit-clip-path: inset(80% 0 -12% 0);
    clip-path: inset(80% 0 -12% 0);
  }
  50% {
    -webkit-clip-path: inset(5% 0 55% 0);
    clip-path: inset(5% 0 55% 0);
  }
  59% {
    -webkit-clip-path: inset(5% 0 55% 0);
    clip-path: inset(5% 0 55% 0);
  }
  60% {
    -webkit-clip-path: inset(-47% 0 36% 0);
    clip-path: inset(-47% 0 36% 0);
  }
  69% {
    -webkit-clip-path: inset(-47% 0 36% 0);
    clip-path: inset(-47% 0 36% 0);
  }
  70% {
    -webkit-clip-path: inset(24% 0 -7% 0);
    clip-path: inset(24% 0 -7% 0);
  }
  79% {
    -webkit-clip-path: inset(24% 0 -7% 0);
    clip-path: inset(24% 0 -7% 0);
  }
  80% {
    -webkit-clip-path: inset(-75% 0 4% 0);
    clip-path: inset(-75% 0 4% 0);
  }
  89% {
    -webkit-clip-path: inset(-75% 0 4% 0);
    clip-path: inset(-75% 0 4% 0);
  }
  90% {
    -webkit-clip-path: inset(3% 0 -96% 0);
    clip-path: inset(3% 0 -96% 0);
  }
  99% {
    -webkit-clip-path: inset(3% 0 -96% 0);
    clip-path: inset(3% 0 -96% 0);
  }
  100% {
    -webkit-clip-path: inset(98% 0 -50% 0);
    clip-path: inset(98% 0 -50% 0);
  }
}