/* roto.css */

/* 1) Full-page reset */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}

/* 2) Spinning blueprint circle on ::before */
body::before {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  
  /* Oversize and circle-mask it */
  width: 300vw;
  height: 300vh;
  border-radius: 50%;
  
  /* Center & initial rotation */
  transform-origin: center center;
  transform: translate(-50%, -50%) rotate(0deg);

  /* Pure-CSS tile */
  background-color: #022f40;
  background-image:
    repeating-linear-gradient(0deg,    rgba(255,255,255,0.12) 0, rgba(255,255,255,0.12) 1px, transparent 1px, transparent 30px),
    repeating-linear-gradient(90deg,   rgba(255,255,255,0.12) 0, rgba(255,255,255,0.12) 1px, transparent 1px, transparent 30px),
    repeating-linear-gradient(45deg,   rgba(255,255,255,0.06) 0, rgba(255,255,255,0.06) 1px, transparent 1px, transparent 15px),
    repeating-linear-gradient(-45deg,  rgba(255,255,255,0.06) 0, rgba(255,255,255,0.06) 1px, transparent 1px, transparent 15px);
  background-repeat: repeat;
  background-position: 0 0;

  will-change: transform;
  z-index: -1;

  /*  — VERY slow spin — */
  animation: spinTile 24s linear infinite;
}

/* 3) Your content remains static on top */
h1, p, /* etc */ {
  position: relative;
  z-index: 1;
  color: #fff;
  text-align: center;
}

/* 4) Spin keyframes */
@keyframes spinTile {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}