@charset "UTF-8";
/* CSS Document */

.box.drawbox {
  position: relative;
}

/*** Button Code ****/

.draw-button {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Roboto", sans-serif;
  font-size: 36px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: 4px;
  color: #fff; color: var(--nav-title-color);
  text-align: center;
  margin: auto;
}

.draw-button svg {
  position: absolute;
  left: 0;
  right: 0;
  margin: -50px auto;
  z-index: -1;
}

.draw {
  margin: auto;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  stroke: #f04939; stroke: var(--accent-color);
}
.draw-two {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  stroke: #fff; stroke: var(--nav-title-color);
}
.draw-three {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  stroke: #fff; stroke: var(--nav-title-color);
}

.draw-button:hover .draw {
  stroke-dashoffset: 0;
  transition: 1.2s;
}
.draw-button:hover .draw-two {
  stroke-dashoffset: 0;
  transition: 2.5s;
  transition-delay: .25s;
}

.draw-button:hover .draw-three {
  stroke-dashoffset: 0;
  transition: 4s;
  transition-delay: .4s;
}