Background opacity from rgba applying to inner class

Question

I'm using react module.css and my outer class has an rgba that makes the opacity slightly grayed out. Thing is, I don't want it to apply to the inner class which is what's happening.

JSX

import styles from "./Join_popup.module.css";

function Join_popup(props) {
  return (
    <div>
      <div className={styles.outer}>
        <div className={styles.inner}>HELLO</div>
      </div>
    </div>
  );
}

export default Join_popup;

CSS

.outer {
    width: 100vw;
    height: 100vh;
    opacity: 50%;
    background-color: rgba(178, 190, 177, 0.6);
    position: fixed;
    top: 0%;
    left: 0%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.inner {
    position: relative;
    background-color: black;
    width: 400px;
    height: 500px;
    opacity: 1;
    border-radius: 5%;
}

Answer 1

The opacity: 50% on the outer applies to inner, even if it has an opacity: 1 set. Remove this and the background-color rgba with alpha (opacity) of .6 should do its job.