body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .card {
    width: 80%;
    max-width: 700px;
  }
  
  .card-body {
    padding: 40px;
  }
  
  .btn-primary {
    background-color: green;
  }

  .star {
    fill: #007c86;
    stroke: #1c2225;
  }	
  @media (prefers-color-scheme: dark) {
    :root {
      --background-color: #323232;
      --text-color: #ccc;
      --shadow-color: #111;
      --highlight: #666;
      --highlight-color: #eee;
      --primary: hsl(12, 90%, 40%);
    }
  }
  
  @media (prefers-color-scheme: light) {
    :root {
      --background-color: #fefefe;
      --text-color: #222;
      --shadow-color: #999;
      --highlight: #cdcdcd;
      --highlight-color: #000;
      --primary: hsl(12, 70%, 50%);
    }
  }
  
  body {
    background-color: var(--background-color);
    color: var (--text-color);
  }