Checked Pseudo-Class Practice

<section class="codedoodle-block">

        <label for="checkbox">Display Text</label><input name="checkbox" id="checkbox" class="hide" type="checkbox">
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dolor leo, aliquet id dignissim id, bibendum ac erat. Fusce eleifend arcu dolor, eget efficitur lorem faucibus sed. Sed gravida convallis lorem, accumsan condimentum leo tempus ut. Integer sit amet sapien arcu. Maecenas turpis lectus, dictum at egestas id, vulputate eu turpis. Interdum et malesuada fames ac ante ipsum primis in faucibus. In eget sapien eu elit porta porttitor.</p>
            <p>Maecenas a congue ipsum. Aliquam rutrum ligula id lectus semper, et ultricies velit vestibulum. Curabitur sit amet felis congue, viverra ipsum non, volutpat mi. Ut pretium ligula non nunc laoreet viverra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim libero sed sapien pretium, eu feugiat velit bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas blandit consectetur iaculis. Duis nibh augue, convallis pellentesque viverra vel, sollicitudin sit amet leo. Nullam nec massa egestas, ultricies metus in, viverra sem. Vivamus leo arcu, lacinia ut fermentum id, varius at turpis. Suspendisse eleifend nunc velit, at cursus sem luctus at. Sed iaculis, felis blandit imperdiet placerat, odio eros vestibulum magna, pretium malesuada velit nisl ac nunc. Etiam pellentesque lectus eget quam laoreet, in rhoncus sapien laoreet. </p>
        </div>
    </section>

/* Variables */

        :root {
            --bg-color: #000000;
            --primary-color: orange;
        }

        /* Code Block styles */

        section.codedoodle-block {
            text-align: center;
        }

        section.codedoodle-block div {
            transition: height .125s ease-in-out;
            height: 1px;
            color: white;
            background-color: white;
            padding: 1rem;
            max-width: 60em;
            margin: 0 auto;
        }

        section.codedoodle-block div p {
            max-width: 60em;
            margin: 1rem auto;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
        }

        section.codedoodle-block label {
            display:inline-block;
            margin-bottom: 1rem;
            background-color: #dedede;
            padding: .25rem;
            border: solid 1px rgba(0, 0, 0, 0.2);
            box-shadow: .25rem .25rem .125rem rgba(0, 0, 0, 0.2);
        }

        section.codedoodle-block label:active {
            color: white;
        }

        section.codedoodle-block input {
            position: absolute;
            left: -100000px;
            margin-top: -1rem;
        }


        input[type=checkbox]:checked + div {
            color: #bcbcbc;
            background-color: #454545;
            height: auto;
        }

        .hide {
            height: 1px;
            width: 1px;
            /* position: absolute;
            left: -10000px; */
            display: block;
            overflow: hidden;
        }

        section.codedoodle-block img {
            width: 100%;
            height: 100%;
            mix-blend-mode: multiply;
            position: relative;
            text-align: center;
            vertical-align: middle;
            color: #676767;
            font-weight: bold;
            font-size: 3rem;
        }