/* 90s-era Retro Stylesheet */

/* Base styles */
body {
  font-family: "Times New Roman", Times, serif;
  line-height: 1.4;
  color: #000000;
  background-color: #C0C0C0; /* Classic grey background */
  margin: 0;
  padding: 10px;
}

/* Links */
a {
  color: #0000FF; /* Bright blue links */
  text-decoration: underline;
}

a:visited {
  color: #800080; /* Purple visited links */
}

a:hover {
  color: #FF0000; /* Red hover for links */
  text-decoration: none;
}

/* Header */
h1 {
  font-size: 2.5em;
  text-align: center;
  border-bottom: 2px solid #000000;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

h1 img {
  width: 40px; /* simple fixed size */
  height: 40px;
  vertical-align: middle;
  margin: 0 5px;
  display: inline; /* Keep images inline for header */
}

h2 {
  font-size: 2em;
  border-bottom: 1px solid #000000;
  padding-bottom: 5px;
  margin-top: 30px;
}

h3 {
    font-size: 1.5em;
}

/* Article layout */
article {
  border: 2px outset #808080; /* Classic 3D border */
  background-color: #FFFFFF;
  padding: 15px;
  margin-bottom: 20px;
}

.paper_date {
  font-weight: bold;
  font-style: italic;
  color: #333333;
}

.paper_title {
  font-size: 1.2em;
  font-weight: bold;
  display: block;
  margin: 5px 0;
}

article ul {
  list-style-type: disc;
  padding-left: 40px; /* Standard indent for lists */
  margin: 10px 0 0 0;
}

article li {
    margin-bottom: 5px;
}

/* Tables */
table {
  width: 100%;
  border: 2px solid #000000;
  border-collapse: collapse;
  margin: 15px 0;
}

td, th {
  border: 1px solid #000000;
  padding: 8px;
  text-align: left;
}

td.algorithm, td.synthesis {
    text-align: left; /* override original alignment */
}

/* Audio player */
audio {
  border: 2px outset #808080;
}

/* Player - remove fixed positioning */
#player {
    display: none; /* The floating player is too modern */
}

/* Responsive Images */
img {
  max-width: 100%;
  height: auto;
}

/* Utility classes */
.transcript, .text_e2e, .text_gst, .h2_explainer, .h3_explainer {
  font-style: italic;
  color: #333333;
}

/* Responsive Styles */
@media (max-width: 768px) {
  body {
    padding: 5px;
  }

  h1 {
    font-size: 2em;
  }

  h2 {
    font-size: 1.5em;
  }

  /* Responsive tables */
  table,
  tbody,
  tr,
  td {
    display: block;
    width: 100%;
  }

  table tr {
    margin-bottom: 15px;
    border: none; /* Remove row borders in mobile view */
  }

  table td {
    text-align: left !important;
    border: 1px solid #000000; /* Add borders to cells */
  }
  
  table td:first-child {
    border-top: 2px solid #000000;
  }
  
  table td:last-child {
    border-bottom: 2px solid #000000;
  }

  table audio {
    width: 100%;
  }
    }