/* loading.css */
section.loading {
    display: grid;
    place-items: center;
    min-height: 30vh;
}

div.loading {
	width: 80px;
	aspect-ratio: 1;
	display:grid;
	-webkit-mask: conic-gradient(from 15deg,#0000,#000);
	animation: l26 1s infinite steps(12);
  }
  div.loading,
  div.loading:before,
  div.loading:after{
	background:
	  radial-gradient(closest-side at 50% 12.5%,
	   yellow 96%,#0000) 50% 0/20% 80% repeat-y,
	  radial-gradient(closest-side at 12.5% 50%,
	   lightyellow 96%,#0000) 0 50%/80% 20% repeat-x;
  }
  div.loading:before,
  div.loading:after {
	content: "";
	grid-area: 1/1;
	transform: rotate(30deg);
  }
  div.loading:after {
	transform: rotate(60deg);
  }
  
  @keyframes l26 {
	100% {transform:rotate(1turn)}
  }