h2 {color: red;}

#container > div {
    display: none
}
#container > div:first-child {
    display: block
}
#container > div:hover + div {
    display: block
}
.control-me {
    /* Default state */
  }
  #toggle:checked ~ .control-me {
    /* A toggled state! No JavaScript! */
  }
  .control-me::after {
    content: "😃";
    font-size: 100px;
}
#toggle:checked ~ .control-me::after {
    content: "😩";
}

label {
    background: #A5D6A7;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
}

.visually-hidden {
    position: absolute;
    left: -100vw;
    
    /* Note, you may want to position the checkbox over top the label and set the opacity to zero instead. It can be better for accessibilty on some touch devices for discoverability. */
}

/* body {
    height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    text-align: center;
    font: 900 24px/1.4 -system-ui, sans-serif;
} */
details {
    /* background-color: yellow; */
}
details details {
    /* background-color: limegreen; */
    margin-left: 1em;
}   
summary {
    font-size: 24px;
    font-weight: bold;
}