html, body {
  margin: 0;
  min-height: 100vh;
  background-image: paint(leaves-bg);
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  background: rgba(255, 255, 255, 0.7);
  border: 4px solid darkolivegreen;
  border-radius: 20px;
  padding: 1em;
  color: darkolivegreen;
  text-align: center;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5);
}

@property --leavesCount {
    syntax: '<number>';
    inherits: false;
    initial-value: 120;
}

@property --rotate {
    syntax: '<number>';
    inherits: false;
    initial-value: 1;
}