Hallo, als Anfänger habe ich ein vermutlich kleines Problem, welches ich nicht durch viel googlen und ausprobieren lösen könnte. Ich bitte um Nachsicht für dumme Fehler 
Ziel: Ich hätte gern untereinander mehrere aufklappbare Punkte, bei denen die Überschrift Allura und dunkelblau und der ausgeklappte Text Montserrat und schwarz ist.
Probleme: Die Schriftfarbe bleibt schwarz, egal was ich tue (Schriftart und -größe funktionieren aber). Die Überschriften stehen unter den Pfeilen statt daneben.
<html>
<head>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Allura|Montserrat');
h1 {font-color: #212d66; font-family: 'Allura'; font-size: 24pt}
p {font-color: #000000; font-family: 'Montserrat', sans-serif; font-size: 12pt}
</style>
</head>
<body>
<details>
<summary> <h1> Programm </h1> </summary>
<p>
Hier steht dann ganz viel Text zum Programm.
</p>
</details>
<details>
<summary> <h1> Ort </h1> </summary>
<p>
Hier steht dann ganz viel Text zum Ort.
</p>
</details>
</body>
</html>