.js, .js * {
  cursor: none;
}

html {
  font-family: Arial,sans-serif;
}

a {
  text-decoration: none;
}

a:link,a:visited {
  color: blue;
}

a:hover,a.focussed {
  color: red;
}

ul,ol {
  list-style: circle;
  padding-left: 1.5rem;
}

#resources {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
}

.resource {
  transition: .2s ease-in-out;
}

.resource:hover,.resource.focussed {
  opacity: 0.5;
  transform: scale(1.05);
}

a > img {
  border-style: solid;
  border-color: blue;
}

.cursor {
  display: none;
  position: absolute;
  z-index: 9;
  width: 30px; /* yea I hardcoded the values :sunglasses: */
  height: 37px; /* sigma male gorillionare grindset */
  top: 0px;
  left: 0px;
  background-image: url(./img/baleface-min.png);
}

.cursor.active {
  display: block;
}

.cursor.focussed {
  background-image: url(./img/balepog-min.png);
}