html{
	background-image: linear-gradient(#000000, #351c75, #b28228); 
	
}
  
.xx-small{
  font-size: clamp(0.625rem, 0.208vw + 0.583rem, 0.75rem);
line-height: clamp(0.938rem, 0.063vw + 0.925rem, 0.975rem);
 } 
.x-small{
 font-size: clamp(0.796rem, -0.007vw + 0.801rem, 0.8rem);
line-height: clamp(1.034rem, -0.276vw + 1.255rem, 1.2rem); 
}

p{
  font-size: clamp(1rem, 0.208vw + 0.958rem, 1.125rem);
line-height: clamp(1.463rem, -0.062vw + 1.513rem, 1.5rem);
}

h5{
  font-size: clamp(1.094rem, 0.469vw + 1rem, 1.375rem);
line-height: clamp(1.641rem, 0.245vw + 1.592rem, 1.788rem);
}
h4{
  font-size: clamp(1.25rem, 0.568vw + 1.136rem, 1.591rem);
line-height: clamp(1.875rem, 0.322vw + 1.811rem, 2.068rem);
}

h3{
  font-size: clamp(1.563rem, 1.145vw + 1.334rem, 2.249rem);
line-height: clamp(2.344rem, 0.967vw + 2.15rem, 2.924rem);
}

h2{
  font-size: clamp(1.953rem, 2.046vw + 1.544rem, 3.181rem);
line-height: clamp(2.93rem, 2.008vw + 2.528rem, 4.135rem);
}

h1{
  font-size: clamp(2.441rem, 3.426vw + 1.756rem, 4.497rem);
line-height: clamp(3.662rem, 3.641vw + 2.934rem, 5.846rem);
}
.x-large{
  font-size: clamp(3.052rem, 5.512vw + 1.949rem, 6.359rem);
line-height: clamp(4.578rem, 6.149vw + 3.348rem, 8.267rem);
}


body {
  margin: 0;
 min-height: 100vh;
  display: grid;
  place-content: center;
 
  body {font-family: "IBM Plex Sans", sans-serif;}
}

header{
  
  color:#FFFACC;
  /*margin: 0px auto; */
  display:grid;
  place-content: center;
  text-wrap: stable;
}

.gallery  {
  --s: 35vw; /* control the size */
  --d: 32s; /* animation duration */
  
  display: grid;
  width: var(--s);
  aspect-ratio: 1;
  overflow: hidden;
  padding: calc(var(--s)/20);
  border-radius: 50%;

  position: relative;
  clip-path: circle(49.5%); /* to avoid a few glitch cause by overflow: hidden */
  -webkit-clip-path: circle(49.5%);
}


.gallery::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: inherit;
  border-radius: inherit;
  background: repeating-conic-gradient(#351c75 0 30deg, #b28228 0 60deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}


.gallery > img {
  grid-area: 1/1;
  width: 100%;
  height: 100%;
   -o-object-fit: cover;
  object-fit: cover;
  border-radius: inherit;
  transform-origin: 50% 120.7%;
}


.gallery::after,
.gallery > img {
  animation: m 8s infinite cubic-bezier(.5,-0.2,.5,1.2);
}
.gallery > img:nth-child(2) {animation-delay: -2s} /* -1 * 8s / 4 */
.gallery > img:nth-child(3) {animation-delay: -4s} /* -2 * 8s / 4 */
.gallery > img:nth-child(4) {animation-delay: -6s} /* -3 * 8s / 4 */

@keyframes m {
  0%,3%    {transform: rotate(0);}
  22%,27%  {transform: rotate(-90deg);}
  47%,52%  {transform: rotate(-180deg);}
  72%,77%  {transform: rotate(-270deg);}
  98%,100% {transform: rotate(-360deg);}
}