h1 {
   font-family: "Audiowide", sans-serif;
   color: blue;
   font-size: 40px;
   font-weight: bold;
   text-shadow: 0 0 0px #0000af, 0 0 5px #00a0ff;
}

h2 {
      font-family: "Audiowide", sans-serif;
      color: blue;
      font-size: 20px;
      font-weight: bold;
      text-shadow: 0 0 0px #0000af, 0 0 3px #00a0ff;
}

p {
   font-family: Verdana, Geneva, Tahoma, sans-serif, sans-serif;
   color: black;
   font-size: 12px;
}

#blueline {
   background-color: blue;
   color: blue;
}
.index-section{
      font-family: 'Audiowide', sans-serif;
      background-color: #0000fF; /* Pure blue */
      color: white;
      text-align: left;
      padding-top: 5px;
      padding-right: 10px;
      padding-bottom: 5px;
      padding-left:10px; /* Top,Right,Bottom,Left */
    }
p {
   font-family: Verdana, Geneva, Tahoma, sans-serif, sans-serif;
   color: black;
   font-size: 12px;
}

li {
   font-family: Verdana, Geneva, Tahoma, sans-serif, sans-serif;
   color: black;
   font-size: 12px;
}

table {
   display: inline-table;
   border-collapse: collapse;
   border-radius:10px;
   transform: scaleX(1.2); /* stretch table 20% horizontally */
   transform-origin: left; /* keep the left edge fixed */
 }
 
 th, td {
   border: 1px solid black;
   padding: 8px;
   text-align: center;
 }
 
 th {
   background-color: blue;
   color: white;
   font-family: "Audiowide", sans-serif;
   font-weight: bold;
 }
 
 td {
   color: black;
 }
 
pre {
   background-color:#c0c0ff
} 
 code {
  color: black;
  font-family: "Courier", "Courier New", monospace;
  background-color: #e0f7ff; /* light blue background */
  padding: 4px;
  display: block;
  margin-left: 30px; /* 30px indentation */
}

 a {
   font-family: "Audiowide", sans-serif;
   font-weight: bold;
 }

.silverbg {
  background-color: silver;
}

.codelinks {font-family: "Audiowide", sans-serif;
   font-weight: bold;
}

    .image-container {
      float: right;
      margin: 20px;
       text-align: center;
      position: relative;
    }

    .thumbnail {
      width: 200px;
      height: auto;
      transition: transform 0.3s ease;
      cursor: pointer;
      display: block;
      transform-origin: top right; /* Makes scale + shift behave naturally */
    }

    .thumbnail:hover {
      transform: scale(3) translateX(-50px); /* Zoom and shift left */
      z-index: 1000;
      position: relative;
    }

    .caption {
      font-size: 10px;
      color: #000;
      margin-top: 8px;
    }