/* GLOBAL */
 html {
     font-size: 100%;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }

 :root {
     --white: #F5F5F6;
     --off-white: #bababa;
     --darkbg: #111111;
     --black: #1D1D1D;
     --gray: #737373;
 }


 body {
     font-size: 1.125rem !important;
     margin: 2.5rem auto !important;
     max-width: 40.625rem !important;
     line-height: 1.6 !important;
     -webkit-font-smoothing: antialiased !important;
     -moz-osx-font-smoothing: grayscale !important;
     background-color: var(--white);
     color: #1d1d1d;
     padding: 0 0.625rem;
 }


 /* UTILITY */
 .hidden {
     display: none;
 }


 .container {
     max-width: 50rem;
     margin: 0 auto;
     padding: 0 1.25rem;
 }

 /* INPUT */
 .input-container {
     width: 100%;
     margin: 0 auto;
     max-width: 200rem;
     display: flex;
     justify-content: center;
 }

 .input {
     font-weight: 500;
     font-size: 0.9rem;
     text-align: center;
     color: var(--gray);
     background-color: rgb(28, 28, 30);
     padding: 0.75rem 1.25rem;
     width: 100%;
     box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.5), 0 0 0 0.1rem transparent;
     border-radius: 0.8rem;
     corner-shape: squircle;
     border: none;
     outline: none;
     transition: 0.4s;
 }

 .input:hover {
     box-shadow: 0 0 0 0.1rem var(--gray);
     transition: 0.7s;
 }

 .input:focus {
     box-shadow: 0 0 0 0.1rem var(--gray);
 }

 .input-small {
     display: flex;
     justify-self: center;
     justify-content: center;
     font-size: .6rem !important;
     margin-top: .3rem;
     color: var(--gray);
 }

 /* ARTICLE */

 #article-container {
     padding-top: 1.25rem;
 }

 #article-container h1,
 #article-container h2,
 #article-container h3,
 #article-container h4,
 #article-container h5,
 #article-container h6 {
     font-family: sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     font-weight: 500;
     margin-top: 1.5em;
     padding-bottom: 0.2em;
     line-height: 1.2;
     letter-spacing: -0.01rem;
 }

 #article-container p {
     margin-bottom: 1.2em;
     font-size: 1.125rem !important;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     hyphens: auto;
     max-width: 70ch;
     letter-spacing: 0.01em;
 }

 #article-container img {
     max-width: 100%;
     height: auto;
     display: block;
     margin: 1.25rem auto;
     border: 1px solid #eee;
     box-shadow: 0.125rem 0.125rem 0.3rem rgba(0, 0, 0, 0.05);
 }

 #article-container blockquote p {
     font-family: serif, Georgia, 'Times New Roman', Times, serif;
 }


/* SPECIAL STYLE OVERRIDES FOR WIKIPEDIA STYLING */


 figcaption {
     text-align: center;
 }


 /* STYLES FROM WIKIPEDIA */
 .gallerybox {
     display: flex !important;
     flex-direction: column;
     justify-self: center !important;
 }

 .gallerybox img {
     width: 40rem;
     margin-bottom: 2rem;
 }

 .gallery .mw-gallery-traditional {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
 }


 /* LINKS */
 #article-container a {
     color: var(--black);
     text-decoration: none;
     transition: ease-in;
     transition-duration: 200ms;
     border-bottom: 1px dotted #0077b6;
 }

 #article-container a:hover {
     color: dodgerblue !important;
     border-bottom: 1px solid #333;
 }


 /* --- WIKITABLE STYLES FOR READABILITY --- */

 #article-container table.wikitable {
     width: 100%;
     border-collapse: collapse;
     margin: 1.5rem 0;
     border: 1px solid #ccc;
     box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }

 #article-container table.wikitable caption {
     font-size: 1.125rem;
     font-weight: 600;
     text-align: left;
     margin-bottom: 0.5rem;
     padding: 0 0.5rem;
 }

 #article-container table.wikitable th,
 #article-container table.wikitable td {
     padding: 0.75rem 1rem;
     border: 1px solid #eee;
     text-align: left;
     vertical-align: top;
     font-size: 0.9rem;
     line-height: 1.4;
 }

 #article-container table.wikitable th {
     background-color: #f7f7f7;
     font-weight: 600;
     color: #333;
     text-transform: uppercase;
 }

 /* Alternate row styling for better scanning */
 #article-container table.wikitable tbody tr:nth-child(even) {
     background-color: #fafafa;
 }

 /* Ensure the long description column wraps properly on small screens */
 #article-container table.wikitable td:last-child {
     word-break: break-word;
     word-wrap: break-word;
 }


 /* CONTACT */

 .contact {
     display: flex;
     justify-content: center;
     margin-bottom: .4rem;
 }

 .contact a {
     font-family: sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     color: var(--gray);
     text-decoration: none;
     font-size: .9rem;
 }

 .contact a:hover {
     color: dodgerblue;
     transition: .4s ease-in;
 }


 /* LOADING AND ERROR */

 #loading-message {
     text-align: center;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     color: #333;
 }

 #error-message {
     text-align: center;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     font-weight: bold;
     color: rgb(212, 85, 85);
 }


 /* MEDIA QUERIES */
 @media (max-width: 768px) {

     /* on smaller screens, slightly reduce the base size */
     html {
         font-size: 15px;
     }
 }

 @media (min-width: 1200px) {

     /* on larger screens, you slightly increase the base size */
     html {
         font-size: 19px;
     }
 }



 /* LANDSCAPE MOBILE */

 @media (min-width: 600px) and (max-width: 900px) and (orientation: landscape) {
     body {
         font-size: 15px;
         margin: 3rem 2rem;
     }

     main h1 {
         margin-bottom: 4rem;
     }
 }


 /* DARK MODE */
 @media (prefers-color-scheme: dark) {
     body {
         background-color: var(--darkbg);
         color: var(--white);
     }

     img {
         filter: brightness(.8) contrast(1.1);
     }

     #article-container a {
         color: var(--white);
         text-decoration: none;
         transition: ease-in;
         transition-duration: 200ms;
         border-bottom: 1px dotted #0077b6;
     }

     #article-container a:hover {
         color: dodgerblue !important;
         border-bottom: 1px solid #333;
     }
 }


 /* --- DARK MODE TABLE STYLES --- */
 @media (prefers-color-scheme: dark) {

     #article-container table.wikitable a {
         color: #7abaff;
         border-bottom-color: #7abaff;
     }

     #article-container table.wikitable a:hover {
         color: #fff;
         border-bottom-color: #fff;
     }

     #article-container table.wikitable {
         border: 1px solid #333;
         box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.2);
     }

     #article-container table.wikitable th {
         background-color: #2c2c2c;
         color: var(--white);
         border-color: #333;
     }

     #article-container table.wikitable td {
         border-color: #333;
         color: var(--white);
     }

     #article-container table.wikitable tbody tr:nth-child(even) {
         background-color: #1f1f1f;
     }

     #article-container table.wikitable p {
         color: var(--white);
     }
 }