<div>
  <h1>Change My Color</h1>
  <h1>I'm Using RGBA</h1>
</div>

/* 1. Standard Color */
/* h1 {
  color: red;
} */

/* 2. Custom Property */
/* html {
  --primary: red;
}

h1 {
  color: var(--primary);
} */

/* 3. RGB Custom Property */
html {
  --primary: red;
  --primary-rgb: 255, 0, 0;
}

h1:first-child {
  color: var(--primary);
}

h1:last-child {
  color: rgba(var(--primary-rgb), 0.5);
}









































/* Base Styles */
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

html {
  background-color: #151515;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

body {
  display: grid;
  place-items: center;
}

h1 {
  font-size: 300%;
}