body {
  background-image: url("beach.jpg");
}

.container {
  max-width: 1000px;
  margin: auto;
  background: #00949e;
  padding: 10px;
  border: 4px dotted blanchedalmond;
  border-radius: 10px;
}

button {
  padding: .75rem 1.25rem;
  border-radius: 20px;
  color: black;
  background-color: blanchedalmond;
}

button:hover {
  background-color: black;
  color: blanchedalmond;
  transform: translateX(300px);
  -o-transform: translateX(300px);
  -ms-transform: translateX(300px);
  -moz-transform: translateX(300px);
  -webkit-transform: translateX(300px);
}

button:hover::after {
  content: " by the sea shore!";
}

img[alt=beach] {
  transform: translate(50%, 5px);
  -o-transform: translate(50%, 5px);
  -ms-transform: translate(50%, 5px);
  -moz-transform: translate(50%, 5px);
  -webkit-transform: translate(50%, 5px);
}

img[alt=beach]:hover {
  transform: translate(50%, 5px) skew(-20deg, 10deg) scale(1.3);
  -webkit-transform-origin: left;
          transform-origin: left;
  -o-transform: translate(50%, 5px) skew(-20deg, 10deg) scale(1.3);
  -ms-transform: translate(50%, 5px) skew(-20deg, 10deg) scale(1.3);
  -moz-transform: translate(50%, 5px) skew(-20deg, 10deg) scale(1.3);
  -webkit-transform: translate(50%, 5px) skew(-20deg, 10deg) scale(1.3);
}

img[alt=Shell]:hover {
  transform: rotateZ(-30deg) scale(1.5);
  -webkit-transform-origin: top;
          transform-origin: top;
  /*Need webkit?*/
  -o-transform: rotateZ(-30deg) scale(1.5);
  -ms-transform: rotateZ(-30deg) scale(1.5);
  -moz-transform: rotateZ(-30deg) scale(1.5);
  -webkit-transform: rotateZ(-30deg) scale(1.5);
}
/*# sourceMappingURL=style.css.map */