sol.css

:any-link {
  color: inherit;
  text-decoration-style: dotted;
  text-decoration-thickness: .2ex;
}

:focus {
  text-decoration-style: solid;
  outline-style: dotted;
  outline-width: 1rem;
  outline-color: maroon;
}

.esfera {
  border-radius: 100%;
  box-sizing: border-box;
  padding: 1rem;
  box-shadow:
    0 0 1ex 1ex coral,
    0 0 1ex 2ex violet;
}

.esfera:focus-within {
  border-color: orange;
  border-style: dotted;
  border-width: 1rem;
}

.sol {
  background: gold;
  color: #111;
}

.jugo {
  background: hotpink;
  color: #111;
}

html {
  font-family: sans-serif;
  font-size: max(20pt, 10vmin);
  line-height: 1.5;
}

body {
  display: flex;
  flex-flow: column;
  margin: auto;
}

figure {
  display: flex;
  flex-flow: column;
  margin: auto;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

figure > * {
  border-color: transparent;
  border-radius: 100%;
  border-style: double;
  border-width: 1rem;
  box-sizing: border-box;
  padding: 1rem;
}

footer {
  display: flex;
  flex-flow: column;
  justify-content: space-around;
  align-items: center;
  margin-block: 1rem 2rem;
}