<h1>Detail and Summary</h1>

<h2>Read more about the wizarding schools:</h2>

<section>
  <details open>
    <summary>Beauxbatons Academy of Magic</summary>
    <p>
      If you like your magic served with a dash of savoir faire, this school is for you. Beauxbatons welcomes a multitude of students of different nationalities, mainly French, but also Spanish, Portuguese, Dutch, Luxembourgian and Belgian.
    </p>
  </details>

  <details>
    <summary>Durmstrang Institute</summary>
    <p>You’ll certainly hear a few interesting stories at Durmstrang, seeing as this is the school that Dark wizard Gellert Grindelwald was expelled from. </p>
  </details>

  <details>
    <summary>Ilvermorny School of Witchcraft and Wizardry
    </summary>
    <p>If you fancy living a Hogwarts-style life across the pond. The founder of Ilvermorny, Isolt Sayre, always wished she could go to Hogwarts, and the school definitely seems to embody some of its traditions. </p>
  </details>

  <details>
    <summary>Hogwarts School of Witchcraft and Wizardry
    </summary>
    <p>Because you love it. But also because of its detailed history, secret passages, eccentric professors, wisecracking ghosts, lovely house-elves, talking portraits and much, much more besides. Most importantly, Hogwarts seems to have a sense of humour
      about itself, and round every corner is a new delight. </p>
  </details>
</section>

/* Only for styling, not required for it to work */
body {
  background-color: lightsteelblue;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

h1 {
  font-size: 3rem;
  color: #fff;
  font-family: "Berkshire Swash", cursive;
  text-align: center;
}

h2 {
  font-size: 1.2rem;
  font-family: sans-serif;
  text-align: center;
}

details {
  margin-bottom: 20px;
  width: 100%;
  font-family: sans-serif;
}

details p {
  padding: 20px;
}

summary {
  padding: 20px;
  background-color: #9fb6ce;
  border: 1px solid #9fb6ce;
  outline: none;
}

summary:hover,
summary:focus {
  border: 1px solid lightslategray;
}

details[open] summary {
  background-color: lightslategray;
  border: 1px solid lightslategray;
}

details[open] {
  background: #fff;
}

section {
  max-width: 80%;
  width: 100%;
}