@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  font-family: 'Open Sans', 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background-color: #f0f0f0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

body {
  background-image: linear-gradient(135deg, #8ecbe6, #e743c3);
}

.menu {
  cursor: pointer;
}

.menu .border {
  fill: white;
  -webkit-transition: 200ms all ease;
  transition: 200ms all ease;
  -webkit-transform-origin: 250px 250px;
  transform-origin: 250px 250px;
}

.menu:hover .border {
  fill: #890a0c;
}

.menu:hover .border1 {
  -webkit-transform: translate(-102px, 102px) rotate(45deg);
  transform: translate(-102px, 102px) rotate(45deg);
}

.menu:hover .border2 {
  opacity: 0;
}

.menu:hover .border3 {
  -webkit-transform: translate(-102px, -102px) rotate(-45deg);
  transform: translate(-102px, -102px) rotate(-45deg);
}

/*# sourceMappingURL=demo1_transition.css.map */