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;
}

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
}

.pre-bash {
    background-color: #e0f7fa;  /* light cyan */
    padding: 5px;
    border-radius: 5px;
}

.pre-python {
    background-color: #fff3cd;  /* light yellow */
    padding: 5px;
    border-radius: 5px;
}

.pre-sql {
    background-color: #f8d7da;  /* light red/pink */
    padding: 5px;
    border-radius: 5px;
}
.pre-html {
    background-color: #99ffcc;  /* light green */
    padding: 5px;
    border-radius: 5px;
}
 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;
    }