body {
	text-align: center;
}

svg {
	border: 1px solid black;
}

/* SVG 1 */
polygon {
	fill: lime;
	stroke: green;
	stroke-width: 3;
}

#logo:hover polygon {
	fill: white;
	transition: 2s ease;
}

line {
	stroke: black;
	stroke-width:5
}

#logo:hover polygon {
	transform: rotate(360deg);
	transform-origin: center;
}

/* SVG 2 */
#cactus:hover {
	animation: shake 1s cubic-bezier(.36,.07,.19,.97) both;
}

#cactus:hover circle {
	fill: white;
	stroke: black;
	transition: 1s ease;
}

#cactus:hover path {
	fill: black;
	transition: 1s ease;
}

/* Läst om https://css-tricks.com/snippets/css/shake-css-keyframe-animation/ */
@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}