@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: 'Gill Sans';
  src: url('/fonts/Gills/Gill Sans Light.otf') format('opentype');
  
}
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Gill Sans Light', sans-serif;
  @apply min-h-fit transition-colors duration-300 ease-in-out ;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  justify-items: center;
  align-items: center;
  justify-self: center ;
  
 
}

.headermobile{
  display: none;
}

.topsection{
  
  
  top: 0;
  margin: 0 auto;
  width: 100%;
  z-index: 999;
} 



/* Light Theme Styles */
.light-theme {
  @apply text-gray-900;
  text-shadow: rgb(253, 250, 250) 0.1em 0.1em 0.2em;
}

/* Dark Theme Styles */
.dark-theme {
  @apply text-gray-100;
}

.dark-theme .menubutton {
  @apply text-gray-800 transition-colors duration-300 ease-in-out;
  border: 3px solid rgb(0, 195, 255);
  border-radius: 8px;
  box-shadow:rgb(174, 175, 221) 0.1em 0.1em 0.2em;
  padding: 10px;
  margin: 10px;
  background-color: white;
  
}

.light-theme .menubutton {
  @apply text-gray-800 transition-colors duration-300 ease-in-out;
  border: 3px solid rgb(17, 45, 122);
  border-radius: 10px;
  padding: 10px;
  margin: 10px;
  background-color: rgb(221, 218, 218);
}



/* Navigation List */
.nav-list {
  @apply flex items-center gap-2;
  font-size: 22px;
  font-weight:460;
  margin-right: 30px;
  margin-bottom: 30px;
  
}

/* Navigation Item */
.nav-item {
  @apply mr-4;
}

/* Light Theme for Nav Links */
.light-theme .nav-item a {
  @apply text-gray-800 transition-colors duration-300 ease-in-out;
}

.light-theme .nav-item a:hover {
  @apply text-slate-600;
}

/* Dark Theme for Nav Links */
.dark-theme .nav-item a {
  @apply text-gray-100 transition-colors duration-300 ease-in-out;
}

.dark-theme .nav-item a:hover {
  @apply text-gray-400;
}

/* Logo Styling */
.logo {
  @apply flex justify-center items-center m-0 p-0;
 
    
  
}

.logo img {
  @apply rounded-full transition-transform duration-300 ease-in-out mx-auto;
  max-width: 90%;
  min-height: 90%;
  transition: transform 1 ease-in-out;
  
}



.logo img:hover {
  animation: rotate 8s infinite linear;
  transform: scale(1.05);
}

@keyframes rotate {
  0% {
    transform: rotate(0deg) scale(1.05);
  }
  100% {
    transform: rotate(360deg) scale(1.05);
  }
  
}

/* Responsive Adjustments */
@media (max-width: 1316px) {
.headerpc{
  display: none;
}

p{
  font-size: medium;
}

h6, h5, h4,h3, h2, h1{
  @apply sm:text-2xl sm:scale-100;
  font-size: medium;
  scale: 0.8;
}

.scroll {
  display: none;
}

.headermobile{
  display: flex;
}

  .nav-container {
    @apply flex-col items-start;
  }

  .nav-list {
    @apply flex-col items-start mb-2;
  }

  .nav-item {
    @apply mr-0 mb-2;
  }

  .logo {
    @apply mb-4;

    max-width: 70%;
    min-height: 70%;
  }

  
  .map iframe {
    @apply w-full min-h-fit;
  }
  
  .video-container {
    position: relative;
    
    width: 100%;
    
    overflow: hidden;
    
    padding-bottom: 98%;
    
    
    
  }

}



main{
  @apply p-4  mb-6 min-h-fit mt-5 w-fit min-w-3.5 mx-10 md:w-[94%] md:mx-auto;
  
 
  }

  .dark-theme main {
    
    background-color: rgb(20, 47, 71, 0.8);
    border: 3px solid rgb(0, 195, 255);
    border-radius: 8px;
    box-shadow:rgb(174, 175, 221) 0.1em 0.1em 0.2em;
  }

  .light-theme main {
    
    background-color: rgb(234, 224, 236, 0.8);
    border: 3px solid rgb(17, 45, 122);
    border-radius: 8px;
    box-shadow:rgb(219, 219, 219) 0.1em 0.1em 0.2em;
  }

/* Custom Text Utility */
@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  
}


.contact-form {
  @apply flex flex-col gap-4 p-6 justify-center items-center ;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;}

/* 
.light-theme .contact-form {
  @apply bg-white text-gray-900;
  border: 3px solid rgb(17, 45, 122);
  box-shadow: rgb(219, 219, 219) 0.1em 0.1em 0.2em;
  border-radius: 8px;
}

/* 
.dark-theme .contact-form {
  @apply bg-gray-800 text-gray-100;
  border: 3px solid rgb(0, 195, 255);
  box-shadow: rgb(174, 175, 221) 0.1em 0.1em 0.2em;
  border-radius: 8px;
}

/* Form Labels */
.contact-form label {
  @apply font-semibold text-lg;
}

.contact-form textarea {
  resize: vertical;
  columns: 50;
  
}

/* Input and Textarea Fields */
.contact-form input,
.contact-form textarea {
  @apply w-full p-3 border-2 rounded-lg transition-colors duration-300 ease-in-out text-sm;
  outline: none;
  
}

/* Light Theme for Inputs */
.light-theme .contact-form input,
.light-theme .contact-form textarea {
  @apply bg-gray-100 border-gray-300 text-gray-900;
}

/* Dark Theme for Inputs */
.dark-theme .contact-form input,
.dark-theme .contact-form textarea {
  @apply bg-gray-700 border-gray-600 text-gray-100;
}

/* Focus States */
.contact-form input:focus,
.contact-form textarea:focus {
  @apply border-blue-500;
}

/* Submit Button */
.contact-form button {
  @apply bg-blue-600 text-white font-semibold py-3 px-6 rounded-lg cursor-pointer transition-transform duration-300 ease-in-out;
  align-self: center;
  align-items: center;
}

/* Submit Button Hover */
.contact-form button:hover:not(:disabled) {
  @apply bg-blue-700;
}

/* Disabled Button */
.contact-form button:disabled {
  @apply bg-gray-400 cursor-not-allowed;
}

/* Light Theme for Submit Button */
.light-theme .contact-form button {
  @apply bg-blue-500;
}

/* Dark Theme for Submit Button */
.dark-theme .contact-form button {
  @apply bg-cyan-500;
}

/* Success/Error Messages */
.contact-form p {
  @apply text-lg mt-4;
}

.contact-form p.error {
  @apply text-red-500;
}

.contact-form p.success {
  @apply text-green-500;
}



.light-theme .nav-list-mobile {
  @apply bg-white text-gray-900;
  border: 3px solid rgb(17, 45, 122);
  box-shadow: rgb(219, 219, 219) 0.1em 0.1em 0.2em;
  border-radius: 8px;
}

.dark-theme .nav-list-mobile {
  @apply bg-gray-800 text-gray-100;
  border: 3px solid rgb(0, 195, 255);
  box-shadow: rgb(174, 175, 221) 0.1em 0.1em 0.2em;
  border-radius: 8px;
}

/* Mobile Menu */

.menu-open {
  max-height: 510px; /* Adjust as necessary depending on your content size */
  transition: max-height 0.3s ease-in-out;
}

.menu-closed {
  max-height: 0;
  transition: max-height 0.3s ease-in-out;
}

.dark-theme .menubutton {
  @apply bg-gray-800 text-gray-100;
  border: 3px solid rgb(0, 195, 255);
  box-shadow: rgb(174, 175, 221) 0.1em 0.1em 0.2em;
  border-radius: 8px;
}

.light-theme .menubutton {
  @apply bg-white text-gray-900;
  border: 3px solid rgb(17, 45, 122);
  box-shadow: rgb(219, 219, 219) 0.1em 0.1em 0.2em;
  border-radius: 8px;
}

/* Map */


.light-theme .map {
  @apply bg-white text-gray-900 ;
  border: 3px solid rgb(17, 45, 122);
  box-shadow: rgb(219, 219, 219) 0.1em 0.1em 0.2em;
  min-width: fit-content;
  
}

.dark-theme .map {
  @apply bg-gray-900 ;
  border: 3px solid rgb(0, 195, 255);
  box-shadow: rgb(174, 175, 221) 0.1em 0.1em 0.2em;
  min-width: fit-content;
  
}

 

.light-theme .breadcrumb-link {
  @apply text-gray-600 hover:text-blue-500 transition-colors duration-200 ease-in-out;
}

.dark-theme .breadcrumb-link {
  @apply text-gray-300 hover:text-blue-500 transition-colors duration-200 ease-in-out;
}

.light-theme .breadcrumbs {
  @apply bg-white bg-opacity-70 text-gray-900 mx-auto ml-4 mr-4;
  border: 3px solid rgb(17, 45, 122);
  box-shadow: rgb(219, 219, 219) 0.1em 0.1em 0.2em;
  border-radius: 8px;
  min-height: fit-content;
  min-width: fit-content;
  overflow: hidden;
  
  
}

.dark-theme .breadcrumbs {
  @apply bg-gray-800 bg-opacity-70 text-gray-100;
  border: 3px solid rgb(0, 195, 255);
  box-shadow: rgb(174, 175, 221) 0.1em 0.1em 0.2em;
  border-radius: 8px;
  min-height: fit-content;
  min-width: fit-content;
  overflow: hidden;
}

/* cards/postcards */
.card-container {
  display: grid;
  gap: 20px;
  justify-content: center;
  justify-items: center;
  justify-self: center;
  text-align: center;
  align-items: center;
}

@media (min-width: 768px) {
  /* Small screens and up */
  .card-container {
    grid-template-columns: 1fr;

  }

   
}

@media (min-width: 1024px) {
  /* Medium screens and up */
  .card-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns on wider screens */
    align-items: center;
    justify-items: center;
    justify-self: center; 
    text-align: center;
  }
  h3{
    @apply  font-bold text-2xl ;
  }
  p{
    @apply  font-medium text-xl ;
  }

 body{
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  justify-items: center;
  align-items: center;
  justify-self: center ;
  scroll-behavior: smooth;
  background: fixed;
  background-attachment: fixed;

  
 }
}
.dark-theme .no-post {
  @apply bg-gray-800 bg-opacity-70 text-gray-100 items-center text-center;
  border: 3px solid rgb(0, 195, 255);
  box-shadow: rgb(174, 175, 221) 0.1em 0.1em 0.2em;
  padding: 16px;
  border-radius: 8px;
  align-items: center;
  text-align: center;
  max-width: fit-content;
  
} 

.light-theme .no-post {
  @apply bg-white bg-opacity-70 text-gray-900;
  border: 3px solid rgb(17, 45, 122);
  box-shadow: rgb(219, 219, 219) 0.1em 0.1em 0.2em;
  padding: 16px;
  border-radius: 8px;
  align-items: center;
  text-align: center;
  max-width: fit-content;
  
}



.light-theme .card {
  @apply bg-white bg-opacity-70 text-gray-900;
  border: 3px solid rgb(17, 45, 122);
  box-shadow: rgb(219, 219, 219) 0.1em 0.1em 0.2em;
  padding: 16px;
  border-radius: 8px;
  align-items: center;
  text-align: center;
  max-width: 300px;
  width: 300px;
  height: 400px;
  max-height:400px;
  
}

.dark-theme .card {
  @apply bg-gray-800 bg-opacity-70 text-gray-100 items-center text-center;


  border: 3px solid rgb(0, 195, 255);
  box-shadow: rgb(174, 175, 221) 0.1em 0.1em 0.2em;
  padding: 16px;
  border-radius: 8px;
  align-items: center;
  text-align: center;
  max-width: 300px;
  width: 300px;
  height: 400px;
  max-height:400px;
  
 
}






.card h2 {
  font-size: 1.5rem;
  margin-top: 12px;
  hyphens: auto;
  word-break: break-word;
}

.light-theme .card p {
  font-size: 1rem;
  margin-top: 8px;
  color: #555;
}

.dark-theme .card p {
  font-size: 1rem;
  margin-top: 8px;
  color: #ddd;
}

.light-theme .card a {
  display: inline-block;
  margin-top: 12px;
  color: #0070f3;
  text-decoration: none;
}

.dark-theme .card a {
  display: inline-block;
  margin-top: 12px;
  color: #3fe5eb;
  text-decoration: none;
}





.light-theme .scroll{

  background-color: rgb(234, 224, 236, 0.8);
  border: 3px solid rgb(17, 45, 122);
  border-radius: 100px;
  box-shadow: rgb(0, 0, 0) 0.1em 0.1em 0.2em;
  
}

.dark-theme .scroll{  

  background-color: rgb(20, 47, 71, 0.8);
  border: 3px solid rgb(0, 195, 255);
  border-radius: 100px;
  box-shadow:rgb(174, 175, 221) 0.1em 0.1em 0.2em;
  
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 20px ;
  font-size: 1.2em;
}

.observer-element {
  height: 1px; /* Small invisible element to trigger the IntersectionObserver */
}

/* Grid container for books */
.bcontainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); /* Adjust width of the book card */
  gap: 20px;
  justify-content: center; /* Center the grid */
  justify-items: center; /* Center items within the grid */
  justify-self: center;
  padding: 20px;
}

.light-theme .bcard, .dark-theme .bcard {
  /* Common styles for both themes */
  word-break: break-all;
  hyphens: auto;
  justify-content: center;
  align-items: center;
  text-align: center;
  max-width: 400px; /* Make the card larger */
  margin-bottom: 40px;
  padding: 20px; /* Increase padding for larger feel */
  border-radius: 12px; /* Slightly rounder corners */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  justify-self: center;
  margin-left: 10px;
  margin-right: 10px;
}

.light-theme .bcard {
  background-color: rgba(255, 255, 255, 0.7); /* Lighter background for light theme */
  color: #1a202c; /* Dark text for readability */
  border: 3px solid rgb(17, 45, 122);
  box-shadow: rgb(219, 219, 219) 0.1em 0.1em 0.5em;
}

.dark-theme .bcard {
  background-color: rgba(55, 55, 55, 0.7); /* Darker background for dark theme */
  color: #e2e8f0; /* Lighter text for readability */
  border: 3px solid rgb(0, 195, 255);
  box-shadow: rgb(174, 175, 221) 0.1em 0.1em 0.5em;
}



.light-theme .card-thumbnail {
  
  height: auto;
  border: solid 3px rgb(17, 45, 122); /* Keep rounded corners */
  object-fit: cover;
  border-radius: 5px ; /* Ensure the image fits the card nicely */
}
.dark-theme .card-thumbnail {
  
  height: auto;
  border:solid 3px rgb(0, 195, 255);
  border-radius: 6px ;/* Keep rounded corners */
  object-fit: cover; /* Ensure the image fits the card nicely */
  max-height: min-content;
}
.bcard h2 {
  font-size: 1.8rem; /* Increase font size for the title */
  margin-top: 16px; /* Add more space above the title */
}

.light-theme .bcard p, .dark-theme .bcard p {
  font-size: 1.2rem; /* Slightly larger paragraph text */
  margin-top: 12px;
}
.light-theme .card-button {
  color: rgb(17, 45, 122);
  font-size: 1.2rem; /* Slightly larger button text */
  margin-top: 12px;
}

.dark-theme .card-button {
  color:rgb(0, 195, 255);
  font-size: 1.2rem; /* Slightly larger button text */
  margin-top: 12px;
}

 .card-button:hover {
  text-decoration: underline;
  cursor: pointer;
  transition: all 0.2s ease;
  transform:  scale(1.1);
  text-shadow: #1a2124 0.1em 0.1em 0.2em;
}

/* HTML: <div class="loader"></div> */
/* HTML: <div class="loader"></div> */
.loader {
  width: 60px;
  aspect-ratio: 1;
  color: #000;
  border: 10px solid;
  box-sizing: border-box;
  border-radius: 50%;
  animation: l6 2s infinite linear;
  position: relative;
  margin: 0 auto;
}
.loader:before {
  content: "";
  position: absolute;
  height: 20px;
  padding: 10px;
  margin: 0 auto;
  inset: auto calc(50% - 10px) 100%;
  border-radius: 5px 5px 0 0;
  background: 
    linear-gradient(currentColor 0 0) top/100% 30%,
    linear-gradient(currentColor 0 0) top/50% 100%;
  background-repeat: no-repeat;
}
.loader:after {
  content: "";
  position: absolute;
  inset: -8px -10px auto;
  height: 15px;
  background: 
    radial-gradient(farthest-side,currentColor 94%,#0000) left,
    radial-gradient(farthest-side,currentColor 94%,#0000) right;
  background-size: 15px 15px;
  background-repeat: no-repeat;
}
@keyframes l6 {
  0%   {background: conic-gradient(#77a4bd 0     ,#0000 0)}
  12.5%{background: conic-gradient(#77a4bd 45deg ,#0000 46deg)}
  25%  {background: conic-gradient(#77a4bd 90deg ,#0000 91deg)}
  37.5%{background: conic-gradient(#77a4bd 135deg,#0000 136deg)}
  50%  {background: conic-gradient(#77a4bd 180deg,#0000 181deg)}
  62.5%{background: conic-gradient(#77a4bd 225deg,#0000 226deg)}
  75%  {background: conic-gradient(#77a4bd 270deg,#0000 271deg)}
  87.5%{background: conic-gradient(#77a4bd 315deg,#0000 316deg)}
  100% {background: conic-gradient(#77a4bd 360deg,#0000 360deg)}
}

/* General container for article */
.article {
  display: flex;
  flex-direction: column; /* Arrange elements vertically */
  gap: 20px;
  align-items: center;
  justify-content: center;
  
}

/* Paragraphs */
.article p {
  font-size: 1.2rem;
  line-height: 1.6;
  margin: 16px 0; /* Space between paragraphs */
}

/* Headings */
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 10px; /* Space between headings and following content */
  text-align: center; /* Center align titles */
  margin: 16px 0; /* Space between paragraphs */
}

.article h2 { font-size: 1.8rem; }
.article h3 { font-size: 1.6rem; }
.article h4 { font-size: 1.4rem; }

/* Images */
.article img {
  
  height: auto;
  border-radius: 8px;
  margin: 20px auto; /* Center image */
  display: block; /* Ensures centered within parent */
}

/* Lists with decorative bullets for unordered and numbered for ordered */
.article ul,
.article ol {
  font-size: 1.2rem;
  margin: 16px 0;
  padding-left: 40px; /* Indent list items */
  margin: 16px 0; /* Space between paragraphs */
}

.article ul {
  list-style-type: disc; /* Adds disc decoration to unordered lists */
  margin: 16px 0; /* Space between paragraphs */
}

.article ol {
  list-style-type: decimal; /* Adds numbers to ordered lists */
  margin: 16px 0; /* Space between paragraphs */
}

/* Blockquotes */
.article blockquote {
  font-size: 1.2rem;
  margin: 20px;
  padding: 12px 20px;
  color: #555;
  font-style: italic;
  border-left: 4px solid #ddd;
  background-color: #f9f9f9;
  margin: 16px 0; /* Space between paragraphs */
}

/* Links */
.article a {
  display: inline-block;
  margin-top: 12px;
  color: #0070f3;
  text-decoration: none;
  margin: 16px 0; /* Space between paragraphs */
}

.article a:hover {
  text-decoration: underline;
  margin: 16px 0; /* Space between paragraphs */
}

/* Inline text styling */
.article em {
  font-style: italic;
  margin: 16px 0; /* Space between paragraphs */
}

.article strong {
  font-weight: bold;
  margin: 16px 0; /* Space between paragraphs */
}

.dark-theme .return {
  @apply bg-gray-800 bg-opacity-70 text-gray-100 items-center text-center;
  border: 3px solid rgb(0, 195, 255);
  box-shadow: rgb(174, 175, 221) 0.1em 0.1em 0.2em;
  padding: 16px;
  border-radius: 8px;
  align-items: center;
  text-align: center;
  max-width: fit-content;
  transition:all 0.2s ease;
  
} 

.light-theme .return {
  @apply bg-white bg-opacity-70 text-gray-900;
  border: 3px solid rgb(17, 45, 122);
  box-shadow: rgb(219, 219, 219) 0.1em 0.1em 0.2em;
  padding: 16px;
  border-radius: 8px;
  align-items: center;
  text-align: center;
  max-width: fit-content;
  transition:all 0.2s ease-in-out;
}

.return-button:hover{
  cursor: pointer;
  transition:all 0.4s ease-in-out;
  transform:  scale(1.1);
  

}

.cookies{
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: center;
  text-align: center;
  justify-self: center;
  margin-top: 20px;
  margin-bottom: 20px;
  margin: 16px 0; /* Space between paragraphs */
  z-index: 5;
  

}

.light-theme .cookies {
  @apply bg-white bg-opacity-70 text-gray-900;
  border: 3px solid rgb(17, 45, 122);
  box-shadow: rgb(219, 219, 219) 0.1em 0.1em 0.2em;
  padding: 16px;
  border-radius: 8px;
  align-items: center;
  text-align: center;
  max-width: fit-content;
  transition:all 0.2s ease-in-out;
}

.dark-theme .cookies {
  @apply bg-gray-800 bg-opacity-70 text-gray-100 items-center text-center;
  border: 3px solid rgb(0, 195, 255);
  box-shadow: rgb(174, 175, 221) 0.1em 0.1em 0.2em;
  padding: 16px;
  border-radius: 8px;
  align-items: center;
  text-align: center;
  max-width: fit-content;
  transition:all 0.2s ease-in-out;
}

.light-theme .cookie-icon {
  text-shadow: rgb(219, 219, 219) 0.1em 0.1em 0.2em;
 
}

.dark-theme .cookie-icon {
  text-shadow: rgb(174, 175, 221) 0.1em 0.1em 0.2em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.video-container {
  position: relative;
  
  width: 70%;
  max-height: 50%;
  aspect-ratio: 16/9; /* 16:9 aspect ratio (height divided by width, e.g., 9/16 = 56.25%) */
  overflow: hidden;
  border-radius: 6px;
  
  
  
  
}

.video-container iframe,
.video-container embed,
.video-container object {
  @apply w-full max-w-screen-xl min-h-fit;
  position: absolute;
  top: 0;
  left: 0;
 width: 100%;
 height: 100%;
  

 
}

.grecaptcha-badge {
  visibility: hidden;
} 

@media (max-width: 576px) {

  .article {
    display: flex;
    flex-direction: column; /* Arrange elements vertically */
    gap: 20px;
    align-items: center;
    justify-content: center;
  }
  
  /* Paragraphs */
  .article p {
    font-size: 0.975rem;
    line-height: 1.4;
    margin: 8px 0; /* Space between paragraphs */
  }
  
  /* Headings */
  .article h1,
  .article h2,
  .article h3,
  .article h4,
  .article h5,
  .article h6 {
    font-weight: bold;
    margin-top: 12px;
    margin-bottom: 6px; /* Space between headings and following content */
    text-align: center; /* Center align titles */
  }
  
  .article h2 { font-size: 1.25rem; }
  .article h3 { font-size: 1.125rem; }
  .article h4 { font-size: 1rem; }
  
  /* Images */
  .article img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 12px auto; /* Center image */
    display: block; /* Ensures centered within parent */
  }
  
  /* Lists with decorative bullets for unordered and numbered for ordered */
  .article ul,
  .article ol {
    font-size: 0.875rem;
    margin: 8px 0;
    padding-left: 20px; /* Indent list items */
  }
  
  .article ul {
    list-style-type: disc; /* Adds disc decoration to unordered lists */
  }
  
  .article ol {
    list-style-type: decimal; /* Adds numbers to ordered lists */
  }
  
  /* Blockquotes */
  .article blockquote {
    font-size: 0.875rem;
    margin: 12px;
    padding: 8px 12px;
    color: #555;
    font-style: italic;
    border-left: 4px solid #ddd;
    background-color: #f9f9f9;
  }
  
  /* Links */
  .article a {
    display: inline-block;
    margin-top: 6px;
    color: #0070f3;
    text-decoration: none;
  }
  
  .article a:hover {
    text-decoration: underline;
  }
  
  /* Inline text styling */
  .article em {
    font-style: italic;
  }
  
  .article strong {
    font-weight: bold;
  }
}