/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* Professional Wiki Styling - Clean, Modern, and Fluffy */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  color: #2c3e50;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  padding: 20px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
}

.wiki-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 40px;
  border-radius: 20px;
  margin-bottom: 30px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.wiki-header h1 {
  color: #2c3e50;
  font-size: 3.5em;
  margin-bottom: 15px;
  font-weight: 700;
  letter-spacing: -1px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.wiki-header p {
  color: #7f8c8d;
  font-size: 1.2em;
  font-weight: 300;
}

.section-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
  margin-bottom: 30px;
}

.section-btn {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 2px solid #3498db;
  color: #2c3e50;
  padding: 16px 32px;
  font-size: 1.2em;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  font-family: inherit;
}

.section-btn:hover {
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(52, 152, 219, 0.3);
}

.section-btn.active {
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  color: white;
  box-shadow: 0 8px 25px rgba(52, 152, 219, 0.3);
}

.section-btn.items {
  border-color: #e74c3c;
}

.section-btn.items:hover,
.section-btn.items.active {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  box-shadow: 0 8px 25px rgba(231, 76, 60, 0.3);
}

.content-area {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  display: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.content-area.active {
  display: block;
  animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.entities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 20px;
  margin-top: 25px;
}

.entity-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 18px;
  font-size: 1.1em;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
  font-family: inherit;
}

.entity-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.entity-detail {
  display: none;
  margin-top: 40px;
  animation: fadeIn 0.4s ease-in-out;
}

.entity-detail.active {
  display: block;
}

.entity-detail h2 {
  color: #2c3e50;
  font-size: 2.8em;
  margin-bottom: 25px;
  border-bottom: 4px solid #3498db;
  padding-bottom: 20px;
  font-weight: 700;
  letter-spacing: -1px;
}

.back-btn {
  display: inline-block;
  background: #95a5a6;
  color: white;
  padding: 12px 24px;
  border-radius: 10px;
  text-decoration: none;
  margin-bottom: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  font-family: inherit;
  border: none;
  box-shadow: 0 4px 15px rgba(149, 165, 166, 0.3);
}

.back-btn:hover {
  background: #7f8c8d;
  transform: translateX(-3px);
  box-shadow: 0 6px 20px rgba(149, 165, 166, 0.4);
}

.info-section {
  margin: 35px 0;
}

.info-section h3 {
  color: #34495e;
  font-size: 1.9em;
  margin-bottom: 18px;
  margin-top: 30px;
  border-left: 5px solid #3498db;
  padding-left: 20px;
  font-weight: 600;
}

.info-section p {
  color: #2c3e50;
  line-height: 1.8;
  font-size: 1.1em;
  margin-bottom: 18px;
  text-align: justify;
}

.info-box {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 25px;
  border-radius: 12px;
  margin: 25px 0;
  border-left: 5px solid #3498db;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.info-box strong {
  color: #2c3e50;
  display: block;
  margin-bottom: 12px;
  font-size: 1.15em;
  font-weight: 600;
}

.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.item-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  padding: 35px;
  border-radius: 16px;
  border-left: 6px solid #e74c3c;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.item-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15);
}

.item-card h2 {
  color: #2c3e50;
  font-size: 2.2em;
  margin-bottom: 18px;
  border-bottom: 3px solid #e74c3c;
  padding-bottom: 15px;
  font-weight: 700;
}

.item-card h3 {
  color: #34495e;
  font-size: 1.4em;
  margin-top: 25px;
  margin-bottom: 12px;
  font-weight: 600;
}

.item-card p {
  color: #2c3e50;
  line-height: 1.8;
  font-size: 1.1em;
  margin-bottom: 18px;
  text-align: justify;
}

.section-title {
  color: #2c3e50;
  font-size: 2.5em;
  margin-bottom: 25px;
  border-bottom: 4px solid #3498db;
  padding-bottom: 15px;
  font-weight: 700;
  letter-spacing: -1px;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Responsive design */
@media (max-width: 768px) {
  .wiki-header h1 {
    font-size: 2.5em;
  }
  
  .section-btn {
    font-size: 1em;
    padding: 14px 24px;
  }
  
  .entities-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 15px;
  }
  
  .items-grid {
    grid-template-columns: 1fr;
  }
  
  .content-area {
    padding: 25px;
  }
}