@import url("https://fonts.googleapis.com/css?family=Montserrat:100");
@-webkit-keyframes flicker {
  0%,
	19%,
	21%,
	23%,
	25%,
	54%,
	56%,
	100% {
    box-shadow: 0 0 9px 2px #fc3e9f, 0 0 9px 2px #fc3e9f inset;
  }
  20%,
	24%,
	55% {
    box-shadow: none;
    opacity: 0.8;
  }
}
@keyframes flicker {
  0%,
	19%,
	21%,
	23%,
	25%,
	54%,
	56%,
	100% {
    box-shadow: 0 0 9px 2px #fc3e9f, 0 0 9px 2px #fc3e9f inset;
  }
  20%,
	24%,
	55% {
    box-shadow: none;
    opacity: 0.8;
  }
}
@-webkit-keyframes flicker-icon {
  0%,
	19%,
	21%,
	23%,
	25%,
	54%,
	56%,
	100% {
    fill: #fc3e9f;
  }
  20%,
	24%,
	55% {
    fill: #411a58;
    opacity: 0.8;
  }
}
@keyframes flicker-icon {
  0%,
	19%,
	21%,
	23%,
	25%,
	54%,
	56%,
	100% {
    fill: #fc3e9f;
  }
  20%,
	24%,
	55% {
    fill: #411a58;
    opacity: 0.8;
  }
}
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-color: #131222;
  font-family: 'Montserrat', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-canvas {
  position: relative;
  z-index: 10;
  width: 375px;
  height: 667px;
  overflow: hidden;
  background-color: #411a58;
  padding: 2em;
}
.mobile-canvas h1 {
  transition: all 300ms ease-in-out;
  color: white;
  font-weight: 100;
  font-size: 4rem;
}
.mobile-canvas.open .overlay {
  opacity: 0.6;
}
.mobile-canvas.open h1 {
  -webkit-filter: blur(5px);
          filter: blur(5px);
}

.overlay {
  position: absolute;
  z-index: 20;
  width: 100%;
  height: 100%;
  opacity: 0;
  top: 0;
  left: 0;
  transition: all 300ms ease-in-out;
  background: #240e31;
}

.button-container {
  position: absolute;
  bottom: 40px;
  right: 40px;
  width: 65px;
  height: 65px;
}
.button-container .button-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}
.button-container.open .button {
  border-color: #2dfbb2;
  box-shadow: 0 0 9px 2px #2dfbb2, 0 0 9px 2px #2dfbb2 inset;
}
.button-container.open .button span {
  width: 3px;
  background-color: #2dfbb2;
  box-shadow: 0 0 9px 2px #2dfbb2, 0 0 9px 2px #2dfbb2 inset;
  transition: margin 300ms, border-radius 300ms 600ms, height 300ms 600ms, -webkit-transform 300ms;
  transition: margin 300ms, transform 300ms, border-radius 300ms 600ms, height 300ms 600ms;
  transition: margin 300ms, transform 300ms, border-radius 300ms 600ms, height 300ms 600ms, -webkit-transform 300ms;
}
.button-container.open .button span:first-child, .button-container.open .button span:last-child {
  margin: 0;
  height: 30px;
  border-radius: 5px;
}
.button-container.open .button span:first-child {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
}
.button-container.open .button span:nth-of-type(2) {
  opacity: 0;
}
.button-container.open .button span:last-child {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
}
.button-container.open .button-child-wrapper {
  -webkit-transform: translateX(-150px);
          transform: translateX(-150px);
  transition-delay: 0s;
}
.button-container.open .button-child {
  box-shadow: 0 0 9px 2px #fc3e9f, 0 0 9px 2px #fc3e9f inset;
  transition-delay: 500ms;
}
.button-container.open .button-child svg {
  opacity: 1;
  visibility: visible;
  transition-delay: 500ms;
}
.button-container.open .button-child svg g {
  -webkit-animation: flicker-icon 1.5s infinite alternate;
          animation: flicker-icon 1.5s infinite alternate;
}
.button-container.open .button-child:nth-child(2) {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.button-container.open .button-child:nth-child(3) {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.button,
.button-child-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.button {
  border-radius: 50%;
  border: 3px solid #fc3e9f;
  z-index: 40;
  box-shadow: 0 0 9px 2px #fc3e9f, 0 0 9px 2px #fc3e9f inset;
  transition: all 300ms ease-in-out 500ms;
}
.button span {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 5px;
  height: 5px;
  background-color: #fc3e9f;
  border-radius: 50%;
  box-shadow: 0 0 9px 2px #fc3e9f, 0 0 9px 2px #fc3e9f inset;
  transition: height 300ms, margin 300ms 600ms, background-color 600ms, border-radius 600ms, -webkit-transform 600ms;
  transition: height 300ms, transform 600ms, margin 300ms 600ms, background-color 600ms, border-radius 600ms;
  transition: height 300ms, transform 600ms, margin 300ms 600ms, background-color 600ms, border-radius 600ms, -webkit-transform 600ms;
}
.button span:first-child {
  margin-top: -10px;
}
.button span:last-child {
  margin-top: 10px;
}

.button-child-wrapper {
  transition: -webkit-transform 0.3s cubic-bezier(0.5, -0.5, 0.5, 1.5) 500ms;
  transition: transform 0.3s cubic-bezier(0.5, -0.5, 0.5, 1.5) 500ms;
  transition: transform 0.3s cubic-bezier(0.5, -0.5, 0.5, 1.5) 500ms, -webkit-transform 0.3s cubic-bezier(0.5, -0.5, 0.5, 1.5) 500ms;
  z-index: 30;
}

.button-child {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  border: 3px solid #fc3e9f;
  -webkit-transform-origin: 182.5px;
          transform-origin: 182.5px;
  transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);
}
.button-child:nth-child(2) svg {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.button-child:nth-child(3) svg {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.button-child svg {
  opacity: 0;
  visibility: hidden;
  transition: all 600ms cubic-bezier(0.64, 0.04, 0.35, 1) calc((-$delay)/2);
}