.compass {
  width:2.5em;
  height:2.5em;
  background-color: white; 
  opacity: 1;
  border-radius:1.75em;
  padding:0;
  margin-top:0.5em;
  display: block;
}

#north {
  display: none;
  fill:var(--bs-black);
}

#top-l {
  fill:#d40000;
}

#top-r {
  fill:#ff0000;
}

#bottom-l {
  fill:#000000;
}

#bottom-r {
  fill:#666666;
}

div.compass:hover #top-l {
  fill:var(--bs-white);
}

div.compass:hover #top-r {
  fill:var(--bs-gray-300);
}

div.compass:hover #bottom-l {
  fill:var(--bs-gray-300);
}

div.compass:hover #bottom-r {
  fill:var(--bs-white);
}

div.compass:hover #north {
  fill:var(--bs-white);
}

.compass-n {    
  transition: opacity 1s ease-out 2s,height 1s ease-out 3s,margin-top 1s ease-out 3s;
  opacity:0;
  height:0;
  margin-top:0;
}

.compass-n #bottom-l, .compass-n #bottom-r {
  display: none;
}

.compass-n #north {
  display: inline;
}