:root
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif
  line-height: 1.5
  font-weight: 400

  font-synthesis: none
  text-rendering: optimizeLegibility
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale

html
  width: 100%
  height: 100%
  user-select: none

body
  margin: 0
  width: 100%
  height: 100%

.flex-1
  flex: 1

a
  color: inherit
  text-decoration: none

*
  cursor: url("./matcha_cursor.png") 16 16, auto

.heart 
  position: fixed
  width: 20px
  height: 20px
  background: red
  transform: rotate(-45deg)
  animation: float 2s ease-out forwards
  pointer-events: none /* so it doesn’t block further clicks */

/* Create the two circular parts of the heart using pseudo-elements */
.heart::before, .heart::after 
  content: ""
  position: absolute
  background: red
  border-radius: 50%
  width: 20px
  height: 20px

.heart::before
  top: -10px
  left: 0

.heart::after
  left: 10px
  top: 0

@keyframes float 
  0% 
    opacity: 1
    transform: translateY(0) scale(1) rotate(-45deg)
  
  100% 
    opacity: 0
    transform: translateY(-100px) scale(1.5) rotate(-45deg)
