body {
  background-color: #ffffff;
  background: linear-gradient(
    40grad,
    rgba(74, 41, 0, 0.47) 0%,
    rgba(255, 255, 255, 0.14) 50%,
    rgba(181, 146, 0, 0.25) 100%
  );
  min-height: 100vh;
  position: relative;
  font-family: "Roboto", serif;
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  flex-grow: 1;
}

/* Add a dark overlay */
body:not(.custom-theme)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3C!-- D20 (icosahedron) - improved with more accurate shape --%3E%3Cpolygon points='50,10 85,25 95,65 55,80 15,65 25,25' stroke='%23bd9a00' stroke-width='1.5' fill='none' stroke-opacity='0.4'/%3E%3Cline x1='50' y1='10' x2='55' y2='80' stroke='%23bd9a00' stroke-width='0.8' stroke-opacity='0.3'/%3E%3Cline x1='85' y1='25' x2='15' y2='65' stroke='%23bd9a00' stroke-width='0.8' stroke-opacity='0.3'/%3E%3C!-- D12 (dodecahedron) - improved with more accurate pentagon-based shape --%3E%3Cpolygon points='140,15 170,35 175,70 155,95 120,85 110,50' stroke='%23bd9a00' stroke-width='1.5' fill='none' stroke-opacity='0.4'/%3E%3Cline x1='140' y1='15' x2='155' y2='95' stroke='%23bd9a00' stroke-width='0.8' stroke-opacity='0.3'/%3E%3Cline x1='170' y1='35' x2='120' y2='85' stroke='%23bd9a00' stroke-width='0.8' stroke-opacity='0.3'/%3E%3C!-- D8 (octahedron) - improved to show proper diamond shape --%3E%3Cpolygon points='50,130 80,105 110,130 80,155' stroke='%23bd9a00' stroke-width='1.5' fill='none' stroke-opacity='0.4'/%3E%3Cline x1='50' y1='130' x2='110' y2='130' stroke='%23bd9a00' stroke-width='0.8' stroke-opacity='0.3'/%3E%3C!-- D6 (cube) - improved with perspective --%3E%3Cpolygon points='120,120 155,120 155,155 120,155' stroke='%23bd9a00' stroke-width='1.5' fill='none' stroke-opacity='0.4'/%3E%3Cpolygon points='130,110 165,110 155,120 120,120' stroke='%23bd9a00' stroke-width='1.5' fill='none' stroke-opacity='0.3'/%3E%3Cline x1='130' y1='110' x2='130' y2='145' stroke='%23bd9a00' stroke-width='0.8' stroke-opacity='0.3'/%3E%3Cline x1='165' y1='110' x2='165' y2='145' stroke='%23bd9a00' stroke-width='0.8' stroke-opacity='0.3'/%3E%3Cline x1='155' y1='155' x2='165' y2='145' stroke='%23bd9a00' stroke-width='0.8' stroke-opacity='0.3'/%3E%3C!-- D4 (tetrahedron) - improved shape --%3E%3Cpolygon points='25,180 50,145 75,180' stroke='%23bd9a00' stroke-width='1.5' fill='none' stroke-opacity='0.4'/%3E%3Cline x1='50' y1='145' x2='50' y2='165' stroke='%23bd9a00' stroke-width='0.8' stroke-opacity='0.3'/%3E%3C!-- D10 (pentagonal trapezohedron) - added --%3E%3Cpolygon points='180,165 190,180 170,185 160,170' stroke='%23bd9a00' stroke-width='1.5' fill='none' stroke-opacity='0.4'/%3E%3Cline x1='180' y1='165' x2='170' y2='185' stroke='%23bd9a00' stroke-width='0.8' stroke-opacity='0.3'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  z-index: 1;
  pointer-events: none;
  animation: hexPulse 10s ease-in-out infinite;
}

body:not(.custom-theme)::after {
  background: radial-gradient(
      circle at 10% 10%,
      rgba(189, 154, 0, 0.2) 0%,
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 90%,
      rgba(189, 154, 0, 0.2) 0%,
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 10%,
      rgba(189, 154, 0, 0.1) 0%,
      transparent 20%
    ),
    radial-gradient(
      circle at 10% 90%,
      rgba(189, 154, 0, 0.1) 0%,
      transparent 20%
    );
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
}