body {
  margin: 0;
  font-family:'Papyrus', serif;
  background-color: #212547; 
  color:white;
  text-align: center;
}

.opener {
  padding: 100px 20px;
}

.title {
  font-size: 3em;
  font-weight: bold;
  letter-spacing: 2px;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
}

.subtitle {
  font-size: 1.2em;
  font-style: italic;
  margin-top: 10px;
  color: #2c3261;
}

.directory {
  max-width: 400px;
  margin: 50px auto;
  padding: 20px;
  border: 2px solid rgba (180,190,255,0.3);
  border-radius: 8px;

  background: url('IMG_0835.png') center/cover; #212547;
  background-blend-mode: overlay;
  filter: brightness(0.85) contrast(1.1);
  
  color:white;
  text-align: left;
  position: relative;
}

.directory::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at center, rgba(33,37,71,0) 70%, rgba(33,37,71,0.8) 100%;
  border-radius: 8px;
  pointer-events: none;
}

.directory h2{
  text-align:center;
  margin-bottom:15px;
  text-shadow: 1px 1px 6px black;
}

.directory ul{
  list-style: none;
  padding: 0;
}

.directory li {
  margin: 10px 0;
}
  
.directory a {
  color: #c0c0ff;
  text-decoration: none;
  transition: color 0.3s;
}

.directory a:hover {
  color: #ffffff;
}