/* Basic style */
:root {
  --primary: #fff;
  --secondary: #050840;
  --highlight-primary: #7ce7c9;
  --highlight-secondary: #9d7beb;
  --radius: 0.5rem;
  --pill: 2rem;
  --line: 0.1rem;
}

* {
  box-sizing: border-box;
}

body {
  margin: 2rem;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 2rem;
  background: var(--secondary);
}

section {
  max-width: 90vw;
}

a {
  display: inline-block;
  margin: 0.2em;
  padding: 0.4em 0.8em;
  background: var(--secondary);
  color: var(--highlight-primary);
  border: var(--line) solid var(--highlight-primary);
  border-radius: var(--pill);
  font-weight: normal;
  text-decoration: none;
}

a:hover {
  color: var(--primary);
  border-color: var(--primary);
}

/* UI Event Classes */

/* Jump animation on the interaction link */
a:nth-of-type(12) {
  position: relative;
  background: var(--highlight-secondary);
  color: var(--secondary);
  border-color: var(--secondary);
}

.jump {
  animation-name: jump;
  animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1);
  animation-duration: 1.2s;
  animation-iteration-count: 1;
}

@keyframes jump {
  0% {
    transform: scale(1, 1) translateY(0);
  }

  10% {
    transform: scale(1.1, 0.9) translateY(0);
  }

  30% {
    transform: scale(0.9, 1.1) translateY(-5rem) rotate(10deg);
  }

  50% {
    transform: scale(1.05, 0.95) translateY(0);
  }

  57% {
    transform: scale(1, 1) translateY(-0.5rem) rotate(-2deg);
  }

  64% {
    transform: scale(1, 1) translateY(0);
  }

  100% {
    transform: scale(1, 1) translateY(0);
  }
}


@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }

  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }

  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }

  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }

  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }

  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }

  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }

  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }

  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }

  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }

  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}


@keyframes rainbow {
  0% {
    background-color: red;
  }

  25% {
    background-color: yellow;
  }

  50% {
    background-color: blue;
  }

  75% {
    background-color: green;
  }

  100% {
    background-color: red;
  }
}


@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}


@keyframes explode {
  0% {
      transform: scale(1);
      opacity: 1;
  }
  100% {
      transform: scale(2);
      opacity: 0;
  }
}

@keyframes jelly {
  0% {
      transform: scale(1);
  }
  50% {
      transform: scale(0.7);
  }
  100% {
      transform: scale(1);
  }
}

@keyframes zigzag {
  0% {
      transform: translateX(0) translateY(0);
  }
  25% {
      transform: translateX(5px) translateY(-5px);
  }
  50% {
      transform: translateX(-5px) translateY(5px);
  }
  75% {
      transform: translateX(5px) translateY(-5px);
  }
  100% {
      transform: translateX(-5px) translateY(5px);
  }
}


/* Jouw animaties */

/* frontend knop */
a:nth-of-type(1) {
  transition: transform 1s;
  background-color: #7ce7c9;
  color: #050840;
}

.zoom-in {
  transform: scale(1.5);
}


/* design knop */
a:nth-of-type(2) {
  background-color: #7ce7c9;
  color: #050840;
  transition: transform 1s;

}

.flip {
  transform: rotateY(180deg);
}


/* & knop */
a:nth-of-type(3) {
  background-color: #7ce7c9;
  color: #050840;
  transition: transform 1s;
}

a.color-change {
  color: #050840;
  background-color: #9d7beb;
}


/* development knop */
/* & knop */
a:nth-of-type(4) {
  background-color: #7ce7c9;
  color: #050840;
  transition: transform 1s;
}


.shake {
  animation-name: shake;
  animation-duration: 1.2s;
  animation-iteration-count: 1;
}

/* sprint knop */
a:nth-of-type(5) {
  background-color: #7ce7c9;
  color: #050840;
  transition: transform 1s;

}

.turn {
  transform: rotate(-180deg);
}

/* sprint knop */
a:nth-of-type(6) {
  background-color: #7ce7c9;
  color: #050840;
  transition: transform 1s;
}

.rainbow {
  animation-name: rainbow;
  animation-duration: 1.2s;
  animation-iteration-count: 1;
}


/* the knop */
a:nth-of-type(7) {
  background-color: #7ce7c9;
  color: #050840;
  transition: transform 1s;
}

.bounce {
  animation-name: bounce;
  animation-duration: 1.2s;
  animation-iteration-count: 1;
}


/* flow knop */
a:nth-of-type(8) {
  background-color: #7ce7c9;
  color: #050840;
  transition: transform 0.7s;
}

.explode {
  animation-name: explode;
  animation-duration: 0.7s;
  animation-iteration-count: 1;
}

/* user knop */
a:nth-of-type(9) {
  background-color: #7ce7c9;
  color: #050840;
  transition: transform 1s;
}

.jelly {
  animation-name: jelly;
  animation-duration: 0.9s;
  animation-iteration-count: 3;
}

/* interface */
a:nth-of-type(10) {
  background-color: #7ce7c9;
  color: #050840;
  transition: transform 1s;
}

.zigzag {
  animation-name: zigzag;
  animation-duration: 1s;
  animation-iteration-count: 1;
}