:root {
  /** Base colors */
  --clr-dark-a0: #000000;
  --clr-light-a0: #ffffff;

  /** Dark theme primary colors */
  --clr-primary-a0: #6300a7;
  --clr-primary-a10: #772cb1;
  --clr-primary-a20: #8a48bc;
  --clr-primary-a30: #9c62c6;
  --clr-primary-a40: #ad7ccf;
  --clr-primary-a50: #be95d9;

  /** Dark theme surface colors */
  --clr-surface-a0: #121212;
  --clr-surface-a10: #282828;
  --clr-surface-a20: #3f3f3f;
  --clr-surface-a30: #575757;
  --clr-surface-a40: #717171;
  --clr-surface-a50: #8b8b8b;

  /** Dark theme tonal surface colors */
  --clr-surface-tonal-a0: #1b141f;
  --clr-surface-tonal-a10: #302934;
  --clr-surface-tonal-a20: #46404a;
  --clr-surface-tonal-a30: #5e5861;
  --clr-surface-tonal-a40: #777279;
  --clr-surface-tonal-a50: #918c93;
}

/** Examples */
body {
  color: var(--clr-primary-a50);
  background-color: var(--clr-surface-a0);
  font-family: "Roboto", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

h1 {
  color: var(--clr-light-a0);
  text-align: center;
}

h2 {
  color: var(--clr-primary-a30);
  margin: 0;
}

.card {
  background-color: var(--clr-surface-a10);
  color: var(--clr-light-a0);
  padding: 0.875em;
  border-radius: 25px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
}

.card input {
    background-color: var(--clr-surface-a10);
    color: var(--clr-light-a0);
    border-color: var(--clr-light-a0);
    margin-top: 0.875em;
    margin-bottom: 0.875em;
    padding: 0.5em;
    padding-left: 1em;
    font-size: 0.875em;
    border-style: solid;
    border-width: 0.1em;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    transition: 0.4s;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
}

.card button {
    background-color: var(--clr-surface-a10);
    color: var(--clr-light-a0);
    padding: 0.5em;
    font-size: 0.875em;
    border-style: solid;
    border-width: 0.1em;
    border-color: var(--clr-light-a0);
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    transition: 0.4s;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
}

.card button:hover {
    border-color: var(--clr-primary-a30);
    transition: 0.4s;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
}

.card button:active {
    background-color: var(--clr-primary-a30);
    transition: 0.1s;
    -webkit-transition: 0.1s;
    -moz-transition: 0.1s;
    -ms-transition: 0.1s;
    -o-transition: 0.1s;
}

.card input:focus {
    outline: none;
    border-color: var(--clr-primary-a30);
    transition: 0.4s;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
}

.grid {
  display: grid; /* Add display grid */
  grid-template-columns: repeat(2, 1fr); /* Creates 2 equal columns */
  gap: 10px; /* Adds spacing between grid items */
  padding: 20px; /* Optional padding around grid */
}

.grid-item {
  background-color: var(--clr-surface-a10);
  color: var(--clr-light-a0);
  padding: 0.875em;
  border-radius: 25px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  text-align: center;
}

.row p {
  margin: 0;
}

.row {
  display: inline-flex;
}

.row label {
  margin-right: 0.35em;
}

.block {
  display: grid;
}