/* Book 1 Page Styles */
body {font-family: 'Arial', sans-serif; background-color: #000000; color: #ffffff; margin: 0; padding: 0;}

header {background-color: #000000;padding: 20px 0;text-align: center; color: goldenrod;}

h1 {font-size: 36px; margin: 0;}

h2 {font-size: 24px; margin-top: 20px; text-decoration: underline;text-align: center; color: goldenrod}

h3 {font-size: 15px;text-decoration: underline;text-align: center; color: goldenrod; padding-bottom: -100px}

p {text-align: center; ; color: #be00ff}
ul{list-style-position: inside; color: #be00ff; text-align: center}

strong {color:goldenrod;}

img{width: 300px; height: 500px;border: 1px solid goldenrod}

nav {display: flex; justify-content: center; background-color: #39004c; padding: 10px 0;}

nav a {color: goldenrod; text-decoration: none; padding: 15px 25px; font-size: 18px;}

nav a {color: goldenrod;text-decoration: none;padding: 1px 25px;font-size: 18px;background-color: #000000;border-style: solid;border-color: #be00ff;border-radius: 50px}
a:hover {color: #000000;text-decoration: none;padding: 1px 25px;font-size: 18px;background-color: goldenrod;border-style: solid;border-color: #be00ff}

.book-content {padding: 30px;text-align: center;}

.book-content h2 {font-size: 24px;margin-top: 20px;color: goldenrod;}

.book-content p {font-size: 18px;line-height: 1.6;max-width: 900px;margin: 0 auto;}

.book-content .synopsis {background-color: #2c2c2c;padding: 20px;margin-top: 30px;}

.book-content .character-list {background-color: #2c2c2c;padding: 20px;margin-top: 30px;}

.book-content .button {background-color: goldenrod;color: #333;border: none;padding: 15px 25px;font-size: 20px;cursor: pointer;text-transform: uppercase;margin-top: 30px;}

.book-content .button:hover {background-color: #ffcc00;}
.map {width: 650px; height: 650px; border-style: none;}

.keylist {font-size: 15px;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-end}

.Arborean {color: #00ae17}

.Naturhüter { color: #ffff00}

.Spadafiorian{ color:#ae0000}

.Abýssios {color: #2b00ff}

.Stjerneskær { color: #eb00ff}

.goldleaf {color:#ffcf00}

.pearl {color:#a9acff}

.mushroom {color:#ffb800}

.hollow {color:#8500a0}

.crest {color:#ffa25f}

.blood {color:#ff3131}

.dragon {color:#ffb1b1}

.rebellion {color:#ff007a}

.first {color: #c0fff4}

.grove {color: #6dff6d}

.ocean {color: #3b9bff}

.german {color:#96ff00}

.aurora{color: #a9fffa}

.fish{color: #300095}

.farm{color: #ffe294}

.star{color:#e4d7ff}

.hidden {color: #5e9666}

.guard {color: #cccccc}

.boat {color: #d60000}

.bar{color: #834b00}

.library {color: #f3dc78}

.forest{color:#6effb8}

.vyrmwood {color: #4a745f}

.back-to-top {color: goldenrod;text-decoration: none;padding: 1px 25px;font-size: 18px;background-color: #000000;border-style: solid;border-color: #be00ff;border-radius: 50px;}

.back-to-top:hover {color: #000000;text-decoration: none;padding: 1px 25px;font-size: 18px;background-color: goldenrod;border-style: solid;border-color: #be00ff}

footer {background-color: #39004c; padding: 15px; text-align: center; color: #ffffff; margin-top: 50px;}
img {  max-width: 100%;  height: auto;  display: block; margin: 0 auto;}