html
{
    font-size: 18px;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: font;
    font-style: normal;
    font-variation-settings: "MONO" 1;
    padding-bottom: 40px;
}

h1, h2, .center
{
    text-align: center;
}

h1, h2, h3, h4, h5, h6
{
    overflow-wrap: break-word;
}

hr
{
    margin-bottom: 25px;
}

li
{
	margin-bottom: 10px;
}

li > ul {
  margin-top: 10px;
}

li > ul + ul {
  padding-bottom: 5px;
}

li > ul {
  margin-bottom: 0;
}


code
{
  font-size: 16px;
  font-family: "Roboto", monospace;
  border: 2px solid black;
  background-color: #f0f0f0;
  margin: 20px 0;
  padding: 15px 15px 15px 15px;
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 1);
  display: block;
  width: 100%;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-wrap: break-word;
}


main
{
    max-width: 800px;
    margin: 0 auto;
}

img 
{
    transition: transform 0.3s ease;
}

img:hover 
{
    transform: scale(1.025);
}

.break-word
{
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.overflow-hidden
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* CSS Styles */
table
{
    width: 100%; /* Full width tables */
    table-layout: fixed; /* Fixed table layout */
    border-collapse: collapse; /* Collapse borders */
}

table > tbody > tr:nth-child(2) > td
{
   padding-top: 25px;  
}

/* Style for the first column (icon) */
td:first-child, th:first-child
{
    width: 20px; /* Set the width of the first column */
    padding: 0; /* Remove padding */
}

/* Style for the second column (filename) */
td:nth-child(2), th:nth-child(2)
{
    width: auto; /* Take up remaining space */
}

/* Style for the third column (date) */
td:nth-child(3), th:nth-child(3)
{
    width: 200px; /* Set the width to fit the timestamp */
    text-align: center;
}

/* Style for the fourth column (size) */
td:nth-child(4), th:nth-child(4)
{
    width: 90px; /* Set the width to fit the file size */
    text-align: center;
}

/* Style for other table cells */
td
{
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Show ellipsis for overflowed content */
    white-space: nowrap; /* No wrapping of text to new lines */
    word-wrap: break-word; /* Break the word at the end of the line */
    word-break: break-all; /* Break at any character if necessary */
    hyphens: auto; /* Automatically add hyphens when breaking words */
    padding: 8px; /* Padding for cell content */
}

/* Style for table headers */
th
{
    background-color: #f2f2f2; /* Light grey background */
    padding: 8px; /* Padding for the header cells */
}

#image-header
{
    max-width: 400px;
    margin: 25px auto 0 auto;
}

#image-header img
{
    width: 100%;
}

#bottom
{
	margin-top: 40px;
}


@media (max-width: 600px)
{
    td:nth-child(3), th:nth-child(3),
    td:nth-child(4), th:nth-child(4)
    {
        display: none; /* Hides the third and fourth columns */
    }
}


/* 2023-12-30 */

audio {
    width: 100%;
    height: 60px; /* Larger height for bigger controls */
    outline: none;
    border-radius: 10px; /* Rounded corners */
    background-color: #ffcc00; /* Bright background color */
}

/* Style the audio controls */
audio::-webkit-media-controls-panel {
    background-color: #ffcc00;
    border-radius: 10px;
}

audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-volume-slider,
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display,
audio::-webkit-media-controls-seek-back-button,
audio::-webkit-media-controls-seek-forward-button,
audio::-webkit-media-controls-fullscreen-button,
audio::-webkit-media-controls-mute-button {
    color: #005500; /* Color of the controls */
}