:root {
   /* Color Palette */
   --bg-body: #1a1a1a;
   --bg-surface: #2c2c2c;

   --text-main: #e0e0e0;
   --text-highlight: #ffffff;
   --text-secondary: #b0b0b0;
   --text-muted: #888888;
   --text-disabled: #555555;
   --text-inverse: #1a1a1a;
   /* Dark text on bright backgrounds */

   --primary-color: #bb86fc;
   --border-color: #333333;
   --shadow-color: rgba(0, 0, 0, 0.2);
}

html {
   width: 100vw;
   max-width: 100vw;
   overflow-x: hidden;
   margin: 0;
   padding: 0;
}

body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   margin: 0;
   padding: 0;
   background-color: var(--bg-body);
   color: var(--text-main);
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   width: 100vw;
   min-height: 90vh;
}

.container.main {
   width: 80%;
   max-width: 80%;
   overflow-wrap: anywhere;
}

.container {
   margin: 1% 2%;
}

.container.info {
   font-size: 1.2em;
   margin-top: 2%;
   width: 20%;
   max-width: 20%;
}

h1 {
   color: var(--text-highlight);
   text-align: center;
}

a {
   color: var(--primary-color);
   text-decoration: none;
   transition: color 0.3s;
}

a:hover {
   color: var(--text-highlight);
}

#search-box {
   width: 100%;
   padding: 15px;
   font-size: 1.2em;
   border: 2px solid var(--border-color);
   border-radius: 8px;
   box-sizing: border-box;
   transition: border-color 0.3s;
   background-color: var(--bg-surface);
   color: var(--text-main);
}

#search-box:focus {
   outline: none;
   border-color: var(--primary-color);
}

#results-container {
   margin-top: 20px;
}

.result-item {
   background-color: var(--bg-surface);
   padding: 15px;
   border-radius: 8px;
   margin-bottom: 10px;
   border: 1px solid var(--border-color);
   box-shadow: 0 2px 4px var(--shadow-color);
   transition: border-color 0.1s;
}

.result-item:hover {
   outline: none;
   border-color: var(--primary-color);
}

.result-item h3 {
   margin: 0 0 10px 0;
}

.result-item h3 a {
   text-decoration: none;
   color: var(--primary-color);
}

.result-item p {
   margin: 0;
   color: var(--text-secondary);
   line-height: 1.6;
   -webkit-line-clamp: 4;
   line-clamp: 4;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.result-item strong {
   background-color: var(--primary-color);
   padding: 1px 3px;
   border-radius: 3px;
   color: var(--text-inverse);
}

#search-info {
   color: var(--text-muted);
   margin-bottom: 15px;
   font-size: 0.9em;
}

.pagination {
   margin-top: 20px;
   text-align: center;
}

.pagination a,
.pagination span {
   margin: 0 5px;
   padding: 8px 12px;
   border: 1px solid var(--border-color);
   text-decoration: none;
   color: var(--primary-color);
}

.pagination span.current {
   background-color: var(--primary-color);
   color: var(--text-inverse);
   border-color: var(--primary-color);
}

.pagination span.disabled {
   color: var(--text-disabled);
   border-color: var(--border-color);
}

.container.main>.title {
   color: var(--text-highlight);
   text-align: center;
   font-weight: bold;
   font-size: 3rem;
   display: flex;
   align-items: center;
   margin: 2% 0;
}

.other-links {
   margin-bottom: 1em;
}

hr {
   border-top: 2px solid var(--primary-color);
}

@media only screen and (max-width: 768px) {
   body {
      flex-direction: column;
      align-items: center;
   }

   .container.info {
      width: 90%;
      max-width: 90%;
   }

   .container.main {
      width: 90%;
      max-width: 90%;
   }
}