:root {
  font-family: 'Climate Crisis';
}


.hand {
  position: fixed;
  z-index: 1;
}


.wrapper {
  position: relative;
  justify-content: center;
  align-content: center;
  display: flex;
  grid-template-columns: 1;
  gap: none;
  grid-auto-rows: 2;
}


.wrapper::after{
  content: counter(my-count);
  color:  #980033;
  position: absolute;
  font-size: 10em;
  animation: countdown 11s infinite;
  font-family: "mono";
  grid-column: 1;
  grid-row: 2;
  background-color: #e000ff; 
  border-radius: 50px;
  padding: 20px;
}

h1 {
	text-decoration: none;
	color: #e000ff; 
  font-size: 400px;
  animation: my-super-slant 11s infinite;
  grid-column: 1;
  grid-row: 1;
  
} 


@keyframes countdown {
 
  0% {
    counter-increment: my-count 1960;  
  }
  10% {
    counter-increment: my-count 1970;  
  }
  20% {
    counter-increment: my-count 1980;
  }
  30% {
    counter-increment: my-count 1990;
  }
  40% {
    counter-increment: my-count 2000;
  }
  50% {
    counter-increment: my-count 2010;
  }
  60% {
    counter-increment: my-count 2020;
  }
  70% {
    counter-increment: my-count 2030;
  }
  80% {
    counter-increment: my-count 2040;
  }
  90% {
    counter-increment: my-count 2050;
  }
  100% {
    counter-increment: my-count 2060;
  }
}


@keyframes my-super-slant {
  from {  font-variation-settings: "YEAR" 1979; }
  to {  font-variation-settings: "YEAR" 2050; }
}