@keyframes cursor {
  0% { 
      cursor: url(./img/cursor/frame_0_delay-0.01s.gif), auto;
  }
  78% { 
      cursor: url(./img/cursor/frame_1_delay-0.01s.gif), auto;
  }
  80% { 
      cursor: url(./img/cursor/frame_2_delay-0.01s.gif), auto;
  }
  90% { 
      cursor: url(./img/cursor/frame_3_delay-0.01s.gif), auto;
  }
  100% { 
      cursor: url(./img/cursor/frame_2_delay-0.01s.gif), auto;
  }
}

@keyframes cursorPointer {
  0% { 
      cursor: url(./img/anim/frame_0_delay-0.01s.gif), auto;
  }
  33% { 
      cursor: url(./img/anim/frame_1_delay-0.01s.gif), auto;
  }
  66% { 
      cursor: url(./img/anim/frame_2_delay-0.01s.gif), auto ;
  }
  100% { 
      cursor: url(./img/anim/frame_3_delay-0.01s.gif), auto;
  }
}

* { 
  background: #a253b6;
  color:white;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
}

html {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;

  cursor: url(./img/cursor.gif), auto;
  animation: cursor 2s linear infinite;
}

a, a * {
  cursor: url(./img/cursor-pointer.gif), auto;
  animation: cursorPointer 1s linear infinite !important;
}

body {
  border-style: double;
  border-color: white;
  
  text-align: center;
  
  width: 60vw;
  max-width: 900px;
  padding: 10px;
}

.icon {
  width: 1em;
  height: 1em;
}