<header class="header">
  <div class="header__title">
    <h1>
      <code>rgb() and rgba()</code>
    </h1>
  </div>
  <div class="header__reference">
    <ul class="reference-list">
      <li><a class="reference-list__link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#RGB_colors">MDN reference</a></li>
      <li><a class="reference-list__link" href="https://caniuse.com/#feat=mdn-css_properties_color_alpha">caniuse Support</a></li>
    </ul>
  </div>
</header>

<main>
  <div class="example">
    <p>
      In this example, we are making the fuchsia square 50% transparent by using a value of <code>0.5</code> in the <code>a</code> portion of the square's <code>rgba</code> argument. This allows the blue square to show through where the two squares overlap.
    </p>
    <p>
      If you hover over the fuchsia square, it's transparency will be removed by changing the <code>a</code> value to <code>1.0</code>.
    </p>

    <div class="example__demo example__demo--rgb-and-rgba">
      <div class="rgb"></div>
      <div class="rgba"></div>
    </div>
  </div>
</main>

// Demo
.rgb {
  background-color: rgb(0, 183, 255);
}

.rgba {
  background-color: rgba(255, 0, 253, 0.5);
  
  &:hover {
    background-color: rgba(255, 0, 253, 1.0);
  }
}




// Pen Setup
.example__demo--rgb-and-rgba {
  background-color: var(--color-cinder);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.rgb,
.rgba {
  height: 10rem;
  width: 10rem;
}

.rgb {
  position: relative;
  top: 3rem;
  left: 2rem;
}

.rgba {
  position: relative;
  bottom: 3rem;
  right: 2rem;
  transition: background-color var(--transition-duration-longer) ease-in-out;
}