:root {
  --bg: white;
  --base: #CFCFCF;
  --cover: #2F4EF0;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  cursor: url(https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/60/apple/237/raised-back-of-hand_1f91a.png), auto;
  background: var(--bg);
  transition: background 0.3s;
}

h1, h2 {
  margin: 20px 0;
  font-family: "Source Code Pro", monospace;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
  color: var(--cover);
}

h2 {
  opacity: 0;
}

svg {
  cursor: url(https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/60/apple/237/white-up-pointing-backhand-index_1f446.png), pointer;
}

svg path {
  stroke-width: 3;
  stroke-miterlimit: 10;
  stroke-linecap: round;
}

#fingerprint-base path {
  stroke: var(--base);
}

#fingerprint-cover path, #face path {
  stroke: var(--cover);
}