html, body {
  font-family: Montserrat;
  margin: 0;
  padding: 0;
  background: #012A36;
  color: white;
}

body {
  position: relative;
  padding: 25px;
  width: calc(100vw - 50px);
  height: calc(100vh - 50px);
  overflow: hidden;
}

body ::-moz-selection {
  background: transparent;
}

body ::selection {
  background: transparent;
}

header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

header h1 {
  display: inline-block;
  position: relative;
  font-family: 'Bungee Outline';
  line-height: 40px;
  font-size: 30px;
  margin: 0;
  z-index: 6;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  left: 15px;
  font-style: italic;
}

header h1 span {
  position: relative;
  font-family: 'Bungee Shade';
  left: -15px;
  cursor: pointer;
  -webkit-transition: color .33s ease-in-out;
  transition: color .33s ease-in-out;
}

header #controls {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

header #controls button {
  position: relative;
  z-index: 7;
  text-align: center;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0 30px;
  height: 30px;
  padding: 0 15px 0 8px;
  color: white;
  font-family: inherit;
  font-size: 12px;
  line-height: 12px;
  cursor: pointer;
  outline: none;
  -webkit-transition: border .25s ease-in-out;
  transition: border .25s ease-in-out;
  border: 1px solid white;
  border-left: none;
  border-radius: 0 15px 15px 0;
}

header #controls button:hover, header #controls button:hover::before {
  border-color: lime;
}

header #controls button::before {
  -webkit-transition: border .25s ease-in-out;
  transition: border .25s ease-in-out;
  content: '';
  background: url("../assets/next.svg");
  border: 1px solid white;
  border-right: none;
  border-radius: 50% 0 0 50%;
  width: 28px;
  height: 28px;
  position: absolute;
  top: -1px;
  left: -29px;
}

header #controls button#compute::before {
  background: url("../assets/compute.svg");
  background-position: 0px -1px;
}

header #controls button.inactive {
  display: none;
}

p#instructions {
  position: absolute;
  bottom: 0;
  display: inline-block;
  font-family: Montserrat;
  font-style: italic;
  font-size: 13px;
}

a {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: inherit;
  font-family: inherit;
  color: inherit;
  font-style: italic;
  font-weight: 600;
  text-decoration: none;
}

.node {
  position: absolute;
  border-radius: 50%;
  z-index: 4;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.5), inset 0 0 30px 5px rgba(0, 0, 0, 0.33);
          box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.5), inset 0 0 30px 5px rgba(0, 0, 0, 0.33);
  -webkit-filter: saturate(160%) brightness(100%);
          filter: saturate(160%) brightness(100%);
  -webkit-transition: -webkit-filter 450ms ease-in-out;
  transition: -webkit-filter 450ms ease-in-out;
  transition: filter 450ms ease-in-out;
  transition: filter 450ms ease-in-out, -webkit-filter 450ms ease-in-out;
  -webkit-transform: scale(1);
          transform: scale(1);
}

.node input {
  -ms-grid-column-align: center;
      justify-self: center;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  position: relative;
  width: 0;
  height: 0;
  background: transparent;
  border: none;
  text-align: center;
  outline: none;
  color: white;
  font-size: 16px;
  line-height: 16px;
  font-family: Courgette;
  z-index: 5;
}

.node input ::-webkit-input-placeholder {
  opacity: 1;
  color: white;
}

.node input :-ms-input-placeholder {
  opacity: 1;
  color: white;
}

.node input ::-ms-input-placeholder {
  opacity: 1;
  color: white;
}

.node input ::placeholder {
  opacity: 1;
  color: white;
}

.node:hover, .node input:hover {
  cursor: -webkit-grab;
  cursor: grab;
  -webkit-filter: saturate(160%) brightness(125%);
          filter: saturate(160%) brightness(125%);
  -webkit-transition: -webkit-filter 150ms ease-in-out;
  transition: -webkit-filter 150ms ease-in-out;
  transition: filter 150ms ease-in-out;
  transition: filter 150ms ease-in-out, -webkit-filter 150ms ease-in-out;
}

.node.deleting {
  -webkit-filter: saturate(0);
          filter: saturate(0);
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: -webkit-transform 750ms cubic-bezier(0.6, 0, 0.735, 0.045), -webkit-filter 750ms ease-in;
  transition: -webkit-transform 750ms cubic-bezier(0.6, 0, 0.735, 0.045), -webkit-filter 750ms ease-in;
  transition: transform 750ms cubic-bezier(0.6, 0, 0.735, 0.045), filter 750ms ease-in;
  transition: transform 750ms cubic-bezier(0.6, 0, 0.735, 0.045), filter 750ms ease-in, -webkit-transform 750ms cubic-bezier(0.6, 0, 0.735, 0.045), -webkit-filter 750ms ease-in;
}

.node.dragging, .node input.dragging {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.vertex {
  position: absolute;
  height: 5px;
  z-index: 2;
  background: linen;
  -webkit-transform-origin: left;
          transform-origin: left;
  border-radius: 5px;
  text-align: center;
  font-family: Roboto;
  font-style: italic;
  font-weight: 600;
  font-size: 15px;
}

.vertex p {
  position: relative;
  top: -20px;
  left: 50%;
  margin: 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.vertex p:hover {
  cursor: pointer;
}

body {
  position: relative;
}

body#preparing .node, body#preparing .title {
  cursor: pointer;
}

body#computing .node, body#computing .title, body#computing .vertex p {
  cursor: default;
}

.node#inactive {
  -webkit-filter: saturate(0.5);
          filter: saturate(0.5);
}

.node::after {
  position: absolute;
  display: block;
}

.node#start::after {
  content: url("../assets/send.svg");
  bottom: 30%;
  width: 70px;
  height: 70px;
}

.node#current::after {
  content: url("../assets/current.svg");
  bottom: calc(50% + .5em);
  width: 60px;
  height: 60px;
}

.node#end::after {
  content: url("../assets/goal.svg");
  bottom: calc(50% - 1.5em);
  width: 90px;
  height: 90px;
}

.vertex#inactive {
  opacity: .33;
}

.vertex#active {
  opacity: 1;
  -webkit-transition: all 750ms cubic-bezier(0.6, 0, 0.735, 0.045);
  transition: all 750ms cubic-bezier(0.6, 0, 0.735, 0.045);
}

.vertex#active.shortestPath {
  position: absolute;
  z-index: 3;
  background: #53ff6a;
}

.vertex#active.finalPath {
  background: lime;
  color: lime;
}
/*# sourceMappingURL=main.css.map */