:root {
  --sun: #fefefe;
  --moon: black;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

body {
  background: black;
}

.sun {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 250px auto;
  width: 250px;
  height: 250px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 200px -30px var(--sun);
  cursor: pointer;
  transition: transform 3s ease;
}

.sun:hover {
  transform: scale(1.1);
}
.moon {
  width: 245px;
  height: 245px;
  background: var(--moon);
  border-radius: 50%;
  box-shadow: inset 0px 1px 20px var(--sun);
}

/* === GLOBAL RESPONSIVE FIXES === */
img, video, canvas, iframe {
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .sun {
    margin: 120px auto;
    width: min(250px, 60vw);
    height: min(250px, 60vw);
  }
  .moon {
    width: min(245px, 58vw);
    height: min(245px, 58vw);
  }
}

@media (max-width: 480px) {
  .sun {
    margin: 80px auto;
  }
}