html,
body {
  width: 100%;
  height: 100%;
  font-family: Kanit;
  color: white;
  margin: 0;
  font-size: 19px;
}

body {
  display: flex;
  justify-content: center;
  background: #1d1d1d;
  overflow: hidden;
}
.wrapper {
  position: absolute;
  top: 80px;
  width: 90%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
}

p {
  font-size: 42px;
}

.nav {
  position: absolute;
  height: 80px;
  background: rgba(0, 0, 0, 0.4);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.demo {
  position: relative;
  min-width: 400px;
  min-height: 400px;
  border: 1px solid #eee;
}

.dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: yellow;
  position: absolute;
}

.tracer {
  background: #fff;
  opacity: 0;
}

body {
  overflow: hidden;
  background-image:
    linear-gradient(
      245deg,
      rgba(27, 27, 27, 0.04) 0%,
      rgba(27, 27, 27, 0.04) 93%,
      rgba(92, 92, 92, 0.04) 93%,
      rgba(92, 92, 92, 0.04) 100%
    ),
    linear-gradient(
      44deg,
      rgba(11, 11, 11, 0.04) 0%,
      rgba(11, 11, 11, 0.04) 39%,
      rgba(186, 186, 186, 0.04) 39%,
      rgba(186, 186, 186, 0.04) 100%
    ),
    linear-gradient(
      134deg,
      rgba(178, 178, 178, 0.04) 0%,
      rgba(178, 178, 178, 0.04) 95%,
      rgba(237, 237, 237, 0.04) 95%,
      rgba(237, 237, 237, 0.04) 100%
    ),
    linear-gradient(
      322deg,
      rgba(56, 56, 56, 0.04) 0%,
      rgba(56, 56, 56, 0.04) 58%,
      rgba(232, 232, 232, 0.04) 58%,
      rgba(232, 232, 232, 0.04) 100%
    ),
    linear-gradient(
      139deg,
      rgba(51, 51, 51, 0.04) 0%,
      rgba(51, 51, 51, 0.04) 62%,
      rgba(35, 35, 35, 0.04) 62%,
      rgba(35, 35, 35, 0.04) 100%
    ),
    linear-gradient(
      252deg,
      rgba(9, 9, 9, 0.04) 0%,
      rgba(9, 9, 9, 0.04) 39%,
      rgba(174, 174, 174, 0.04) 39%,
      rgba(174, 174, 174, 0.04) 100%
    ),
    linear-gradient(
      229deg,
      rgba(241, 241, 241, 0.04) 0%,
      rgba(241, 241, 241, 0.04) 2%,
      rgba(140, 140, 140, 0.04) 2%,
      rgba(140, 140, 140, 0.04) 100%
    ),
    linear-gradient(
      223deg,
      rgba(82, 82, 82, 0.04) 0%,
      rgba(82, 82, 82, 0.04) 36%,
      rgba(229, 229, 229, 0.04) 36%,
      rgba(229, 229, 229, 0.04) 100%
    ),
    linear-gradient(90deg, rgb(245, 16, 17), rgb(177, 69, 207));
}

button {
  box-shadow: 0px 1px 0px 0px #fff6af;
  background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
  background-color: #ffec64;
  border-radius: 6px;
  border: 1px solid #ffaa22;
  display: inline-block;
  cursor: pointer;
  color: #333333;
  font-family: Arial;
  font-size: 21px;
  font-weight: bold;
  padding: 12px 24px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #ffee66;
  margin: 10px;
}
button:hover {
  background: linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
  background-color: #ffab23;
}
button:active {
  position: relative;
  top: 1px;
}