:root {
      --primary: #303f9f;
      --bg-light: #f9f9fb;
      --bg-dark: #1e1e2e;
      --text-light: #2c2c2c;
      --text-dark: #f0f0f0;
      --card-light: #fff;
      --card-dark: #2e2e3e;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: 'Varela Round', sans-serif;
      background-color: var(--bg-light);
      color: var(--text-light);
      transition: background-color 0.3s ease, color 0.3s ease;
    }

    body.dark {
      background-color: var(--bg-dark);
      color: var(--text-dark);
    }

    header {
      background-color: var(--primary);
      color: white;
      padding: 1em 2em;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 2px 4px rgba(0,0,0,0.15);
	  
    }
	
	header .actions i {
		font-size: 20px;
		position: relative;
		top: 4px;
	}

    header .actions i,
    header .actions button {
      margin-left: 1em;
      cursor: pointer;
    }

    header .actions button {
      background: white;
      color: var(--primary);
      border: none;
      padding: 0.5em 1em;
      border-radius: 20px;
      font-weight: bold;
	  font-family: 'Varela Round', sans-serif; /* <- Add this line */
    }

    .container {
      max-width: 800px;
      margin: 2em auto;
      padding: 0 1em;
    }

    .card {
      background: var(--card-light);
      border-radius: 16px;
      padding: 1.5em;
      box-shadow: 0 4px 8px rgba(0,0,0,0.05);
      margin-bottom: 1.5em;
      transition: background 0.3s ease;
    }

    body.dark .card {
      background: var(--card-dark);
    }

    .card h2 {
      margin-top: 0;
      color: var(--primary);
    }

    @media (max-width: 600px) {

      header .actions button {
        margin-left: 10px;
      }
    }