:root {
  --background-color: 255 255 255;
  --text-color: #000000;
  --radius-circle: 50%;
  --border-standard: 1px solid var(--primary-color);
  --primary-color: 255, 0, 153;
  --svg-fill: red;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: 0 0 0;
    --text-color: #ffffff;
    --radius-circle: 50%;
    --border-standard: var(--border-standard);
    --primary-color: 255, 0, 153;
    --svg-fill: green;
  }
}

*::selection {
  color: #ffffff;
  background-color: rgb(var(--primary-color));
}

html,
body {
  background-color: rgb(var(--background-color));
  color: rgb(var(--primary-color));
  min-height: 300vh;
}

img,
svg {
  max-width: 100%;
}

.test__shadow {
  margin: 50px;
  border: var(--border-standard);
  border-radius: var(--radius-circle);
  width: 50%;
  aspect-ratio: 1;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 10px 5px rgb(var(--primary-color), .25);
}

header {
  top: 0;
  position: sticky;
  border-bottom: 2px solid #ffffff;
  background-color: rgb(var(--background-color), .5);
  z-index: 10;
  backdrop-filter: blur(15px);
}

.svg_star {
  fill: var(--svg-fill);

  &:hover {
    fill: yellow
  }
}

.svg__stroke {
  stroke: var(--text-color);
}