*, *::before, *::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
}

*:focus-visible {
  outline: none;
  /* I wouldn't normally do this, but I don't want any focus border just for this project... */
}

:root {
  --colour1: hsl(205, 71%, 91%);
  --colour2: hsl(212, 12%, 72%);
  --colour3: hsl(204, 70%, 63%);
  --colour4: hsl(211, 29%, 25%);

  --background-size: 200px;
  --blade-height: 300px;
  --blade-width: 60px;
  --blade-radius: 20px;
  --circle-border-width: 25px;
}

body {
  background-image: radial-gradient(circle, var(--colour3), var(--colour4) var(--background-size));
  background-repeat: none;
}

main {
  border: 10px groove var(--colour3);
  height: 100dvh;
  display: grid;
  place-items: center;
}

a {
  color: var(--colour1);
  text-decoration: none;
  font-size: 1.5rem;
  font-family: 'Balatro', sans-serif;
}

footer {
  margin-top: -40px;
  margin-right: 20px;
  text-align: right;
  color: var(--colour3);
  font-size: 0.8rem;
  opacity: 0.3;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}




/* CSS Riddle: https://codepen.io/kevinpowell/pen/BaOOoWp
This is a css challange and the animation is the only interesting thing happening here; 
I built the gear as simply something to spin, it could have been anything. 
It's more like a child's painting than anything artistic!

I have a rotate function in the animation and a rotate property in a transition; 
both start at the same time, but the transition rotation works against the animation transform rotation 
as it is going backwards to -360degs, giving the effect of an ease-in; 
a gradual speed increase therefore appears to happen, into the linear animation while the gear is focused, hovered or touched.
When removing the focus, the main animation rotation will stop and the tranistion rotation property will kick in again, 
 rotating the container back to 0 degrees. 

The timing of both rotations is really the key, 
so the animation as a whole ends up being a giant ease-in-out with an infinite spin inbetween. 

This is obviously quite simple to accomplish using JavaScript; it wasn't the point of this exercise - 100% CSS man! */

button {
  position: relative;
  
  height: var(--blade-height);
  aspect-ratio: 1;

  /* main linear animation; starting paused, erm, aka stopped... */
  animation: 1.5s linear infinite spin paused;
  /* speed up and slow down rotation! */
  rotate: 0deg;
  transition: rotate 3s ease-out;
}

button:hover, button:focus, button:active {
  animation-play-state: running;
  rotate: -360deg;
}

button div:not(:last-child) {
  /*  blades of a fan or the teeth of a gear, whatever; just a few rectangles positioned using the rotate property - 
  each is fed their angle which is set as a custom property in the html elements */
  position: absolute;
  inset: 0;
  margin: auto;

  width: var(--blade-width);
  height: var(--blade-height);
  border-radius: var(--blade-radius);
  rotate: var(--degree);

  background: radial-gradient(circle at 100%, var(--colour4) 50%, var(--colour3) 90%);
  box-shadow: 0 0 100px 10px black;
}

button div:last-child {
  /* the circle... */

  position: absolute;
  inset: 0;
  margin: auto;

  display: flex;
  place-items: center;

  width: calc(var(--blade-height) / 2);
  aspect-ratio: 1;
  border-radius: 50%;
  border: var(--circle-border-width) solid var(--colour4);
  box-shadow: 0 0 20px var(--colour4), inset 0 0 30px var(--colour4), inset 0 0 5px 20px var(--colour1);
  background: conic-gradient(var(--colour4), var(--colour1), var(--colour3), var(--colour2),
      var(--colour4), var(--colour1), var(--colour3), var(--colour2), var(--colour4));
}

button div:last-child::before {
  /* this is meant to look like a screw head... */
  content: '';
  width: 30px;
  height: 7px;
  background: var(--colour3);
  border-radius: 10px;
  opacity: 0.3;
  transform: translateY(-35px);
  rotate: 90deg;
}

button div:last-child::after {
  content: '';
  width: 30px;
  height: 7px;
  background: var(--colour4);
  opacity: 0.2;
  border-radius: 10px;
  transform: translateX(5px);
}





@media (min-width: 900px) {
  :root {
    --background-size: 250px;
    --blade-height: 400px;
    --blade-width: 80px;
    --blade-radius: 30px;
    --circle-border-width: 50px;
  }
}

/* the page will do literally nothing, if that is what the user wants... */
@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
    transition: none;
  }
}