body {
  /* Uncomment below to zoom out */
  background: #0d0f23;
  padding: 2em;
  /* Color cast */
}
body::before {
  background: #0d0f23;
  content: "";
  mix-blend-mode: color-dodge;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10000;
}

/* Basic setup */
div {
  border-radius: 100%;
  box-sizing: border-box;
  position: relative;
}
div::before, div::after {
  border-radius: inherit;
  box-sizing: inherit;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
}

.panel {
  /* Panel outer metal border */
  background: linear-gradient(90deg, #1f2344, #94a4ba, #404974, #94a4ba, #c2cad4);
  border-radius: 0;
  margin: 0 auto;
  padding: 7px;
  width: 322px;
  height: 985px;
  z-index: 1;
}
.panel::before {
  /* Panel inner metal border */
  background: linear-gradient(#53658c, #0f1029, #52638a);
  width: 308px;
  height: 971px;
}
.panel::after {
  /* Panel background */
  background: radial-gradient(ellipse, #13142d, #08081a);
  box-shadow: inset 0 0 80px #0b0a1f;
  top: 12px;
  left: 12px;
  width: 298px;
  height: 961px;
}

.nameplate {
  /* Split blue background */
  background: linear-gradient(90deg, #0094ce 50%, transparent 50%);
  border: 1px solid #0094ce;
  border-radius: 0;
  /* Text formatting */
  color: #fff;
  font-size: 41px;
  font-family: "Fjalla One", sans-serif;
  line-height: 56px;
  text-align: center;
  text-indent: 0.85em;
  /* Outlined text, webkit-only */
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff;
  top: 25px;
  left: 25px;
  width: 255px;
  height: 56px;
  z-index: 100;
}

.speaker {
  background-color: #0f122a;
  background-image: linear-gradient(rgba(233, 236, 240, 0.4), rgba(18, 20, 44, 0.4)), radial-gradient(#0d0f23 40%, transparent 40%), radial-gradient(#13142d 40%, transparent 41%);
  background-size: 100% 100%, 12px 12px, 12px 12px;
  background-position: 0 0, 0 0, 0 2px;
  background-blend-mode: overlay, normal, normal;
  border-radius: 0;
  box-shadow: inset 0 0 13px #0b0a1f;
  width: 298px;
  height: 205px;
  position: absolute;
  bottom: 11px;
  left: 13px;
  z-index: 10;
  /* Top metal border */
  /* Top metal border upperside */
  /* Top metal border underside */
}
.speaker::before, .speaker::after {
  width: 308px;
  height: 5px;
  left: -6px;
}
.speaker::before {
  background: linear-gradient(90deg, #353f60, #c2cad4, #343e5f);
}
.speaker::after {
  /* Transparent border used to create wedge effect */
  border: 5px solid transparent;
  border-top-color: #1c2242;
  top: 5px;
}

.base {
  /* Metal outer border */
  background-image: linear-gradient(45deg, #fefefe 10%, #5d6d94, #050718, #5d6d94, #fefefe 90%);
  height: 260px;
  width: 260px;
  padding: 10px;
  position: absolute;
  bottom: 295px;
  left: 33px;
  z-index: 10;
  /* Metal inner border */
  /* Red glow */
}
.base::before {
  background-image: linear-gradient(#d9dee5, #151531), linear-gradient(90deg, #434c77, #0b0a1f, #434c77);
  background-blend-mode: hard-light, normal;
  box-shadow: inset 0 0 14px 9px rgba(5, 7, 24, 0.4);
  width: 240px;
  height: 240px;
}
.base::after {
  background-image: radial-gradient(#b10000 10%, rgba(177, 0, 0, 0) 71%);
  mix-blend-mode: lighten;
  top: -8px;
  left: -10px;
  width: 280px;
  height: 280px;
}

.lens {
  /* Red lens */
  background-image: radial-gradient(#b10000 12%, #120619 67%, #200517);
  /* Lens dark inner borders */
  border: 8px solid #050718;
  box-shadow: inset 0 0 0 10px #380014;
  top: 12px;
  left: 12px;
  width: 213px;
  height: 213px;
  z-index: 10;
  /* Red cast over lens, intensifies color */
  /* Yellow core */
}
.lens::before {
  background-image: radial-gradient(#f00 20%, #470010 50%, #1a193e 80%);
  mix-blend-mode: soft-light;
  opacity: 0.8;
  z-index: 100;
}
.lens::after {
  background-image: radial-gradient(#fff 2px, #fff300 8px, rgba(255, 0, 0, 0.9) 14px, rgba(255, 0, 0, 0.08) 35px, transparent 35px);
  z-index: 100;
}

/* Alternating bands of color with transparency to create rounded reflections effect */
.reflections,
.reflections::before,
.reflections::after {
  /* Position gradient for reflections */
  background-image: radial-gradient(transparent 19%, #ec32aa 23%, #d4f6fc 28%, #ec32aa 33%, transparent 36%, transparent 38%, #e558d0 40%, #d0fcfe 45%, #ce73df 50%, transparent 52%, transparent 56%, #b883e7 60%, #b7ffff 65%, #3564c7 72%, transparent);
  background-size: 182px 182px;
  background-position: top center;
  /* Round edges of reflections */
  border-radius: 15px 15px 5px 5px/5px 5px 15px 15px;
  /* Blurs edges & gradient for smoother effect */
  filter: blur(4px);
  position: absolute;
  top: 26px;
  width: 58px;
  height: 75px;
  z-index: 10;
}

/* Center reflection */
.reflections {
  left: 69px;
  /* Transform into trapezoid shape */
  transform: perspective(30px) rotate3d(1, 0, 0, -15deg);
  transform-origin: top;
  /* Left reflection */
  /* Right reflection */
}
.reflections::before, .reflections::after {
  height: 45px;
  top: 28px;
}
.reflections::before {
  left: -65px;
  transform: rotate(-43deg);
}
.reflections::after {
  right: -65px;
  transform: rotate(43deg);
}

/* Brightens lens */
.animation {
  -webkit-animation: flicker 3s infinite;
          animation: flicker 3s infinite;
  background: radial-gradient(#79b4ba, #47696d, #890000);
  mix-blend-mode: color-dodge;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

@-webkit-keyframes flicker {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
}

@keyframes flicker {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
}