body:hover > #cursor {
  opacity: 1.8;
}

#cursor {
  height: 15px;
  width: 15px;
  /*
    background-color: var(--default-dark);
    color:  var(--default-light);
  */
  /*border-radius: 15px;*/
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms ease;
  display: grid;
  place-items: center;
}

#cursor:not([data-type=""]) > #cursor-icon {
  opacity: 1;
}

#cursor-icon {
  font-size: 16px;
  line-height: 0;  
  opacity: 0;
  transition: opacity 400ms ease;
}

.interactable {
    /*
  aspect-ratio: 1 / 1.5;
  width: clamp(120px, 40vmin, 600px);
  background-position: center 50%;
  background-size: 100%;  
  opacity: 0.4;
  transition: background-size 400ms ease, opacity 400ms ease;
    */
}

.interactable:hover {
}

.CV::after {
  content: "CV";
  font-style: normal;
  color: var(--default-light)!important;
}

.more::after {
  content: "+";
  font-style: normal;
}