/* Select all div elements */
div {
  background: hsl(0 0% 0% / .5);
  border: 1px solid white;
  color: white;
  place-items: center;
  padding-block: 1rem;
  padding-inline: 1.5rem;
  position: relative;
  width: 100%;
}

/* Selects all .brother elements */
.brother {
  background-color: hsl(25 100% 50%);
}

/* Selects all .sister elements */
.sister {
  background-color: hsl(150 50% 30%);
}

/* Select .sister if it comes after .brother and shares the same parent */
.brother ~ .sister {
  background-color: hsl(250 50% 30%);
}

/* Select .sister if it comes after .brother and shares the same parent */
.brother + .sister {
  background-color: hsl(350 50% 30%);
}

@layer base {
  html {
    background-color: #262626;
    background-position: top center;
    background-repeat: no-repeat;
    background-image:
      radial-gradient(50% 50% at top center, rgb(0 0 0 / 0.66), #262626),
      linear-gradient(180deg, #fff, #262626);
    background-size: 120% 2000px, 100% 2000px;
  }
  
  body {
    display: grid;
    font-size: 1.5rem;
    gap: 1.5rem;
    font-family: Merriweather, serif;
    padding: 1ch;
  }
  
  main {
    display: grid;
    gap: 1rem;
  }
  
  div > div {
    inset-block-start: 1rem;
    inset-inline-start 100vw;
    position: absolute;
  }
}