:root {
  color-scheme: dark;
  background: #030609;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle, rgba(39, 133, 160, 0.16) 0, rgba(3, 6, 9, 0) 42vmin),
    #030609;
}

main {
  display: grid;
  place-items: center;
  width: min(70vmin, 340px);
  aspect-ratio: 1;
}

.lock {
  width: 58%;
  overflow: visible;
  filter: drop-shadow(0 0 22px rgba(109, 213, 250, 0.22));
}

.shackle,
.body,
.key-stem {
  fill: none;
  stroke: url(#lock-gradient);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shackle {
  stroke-width: 14;
}

.body {
  stroke-width: 7;
  fill: rgba(14, 27, 37, 0.78);
}

.keyhole {
  fill: url(#lock-gradient);
}

.key-stem {
  stroke-width: 9;
}

@media (prefers-contrast: more) {
  .shackle,
  .body,
  .key-stem {
    stroke: #fff;
  }

  .keyhole {
    fill: #fff;
  }
}