/* Reset default margin and padding */
body, h1, h2, h3, p, ul, li {
    margin: 0;
    padding: 0;
}

/* Basic styles for the entire page */
body {
    font-family: Arial, sans-serif;
    line-height: 1.0;
    color: #FFFFFF; /* Set body font color to white */
    background-color: #000000; /* Set background color to black */
}

/* Header styles */
header {
    /* Your header styles go here */
}

/* Main content styles */
main {
    padding: 2rem;
    min-height: calc(100vh - 120px); /* Subtract header and footer height from the viewport height */
    box-sizing: border-box; /* Include padding in the height calculation */
}

/* Section styles */
section {
    margin-bottom: 2rem;
}

h2 {
    font-size: 3vw; /* Responsive text size using vw units for section headings */
    text-align: center;
    margin-bottom: 1rem;
}

p {
    font-size: 1.vw; /* Responsive text size using vw units for paragraphs, was 2.5 */
    text-align: justify;
}

/* Footer styles */
footer {
    background-color: #333; /* #333 is dark gray */
    color: #fff; /* #fff is white */
    text-align: center;
    padding: 1rem;
    position: fixed; /* Make the footer fixed at the bottom */
    bottom: 0;
    left: 0;
    width: 100%;
}

footer nav ul {
    list-style: none;
}

footer nav li {
    display: inline;
    margin-right: 1rem;
}

footer nav a {
    color: #FFCC00; /* #FFCC00 is yellow */
    text-decoration: none;
    font-size: 3vw; /* Responsive text size using vw units for footer navigation links */
    /* Add white underline for all links */
    text-decoration: underline #FFFFFF;
}

/* Style visited links with a grey underline */
footer nav a:visited {
    color: #A9A9A9; /* #A9A9A9 is dark gray (almost light black) */
    text-decoration: underline #A9A9A9; /* Grey underline for visited links */
}

/* Style active links with a white underline */
footer nav a:hover,
footer nav a:focus {
    color: #FFFFFF; /* #FFFFFF is white */
    text-decoration: underline #FFFFFF; /* White underline for active links */
}

/* Justify the text inside the main section */
#content {
    text-align: justify;
}
/* Word-wrap for title attribute */
[title] {
    white-space: normal;
}
/* Set a fixed width for title text */
[title]::after {
    content: attr(title);
    display: inline-block;
    max-width: calc(100% - 20px); /* Adjust the margin as needed */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* below was previously included in art html file */
.container {
  position: relative;
  display: inline-block;
}
.image {
  border: 2px solid #ccc;
}
.textbox {
  display: none;
  position: absolute;
  bottom: -25px;
  left: 0;
  background-color: #990000;
  color: #fff;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 200px;
  text-align: center;
  z-index: 1;
}
/* below was previously included in about html file */
body, td, th {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: large;
  color: #FFFFFF;
}

div.top {
  width: 100%;
  height: 20px;
  text-align: center;
  background-color: #000;
  color: #fff;
  padding-top: 5px;
}

div.menu {
  width: 90%;
  margin: 0px 0px;
  padding: 1%;
  background-color: #000000;
  background-position: center;
  border: 1px solid blue;
  border-radius: 20px;
  box-shadow: 6px 6px 10px #FFFFFF;
  opacity: 0.8;
  /* filter: alpha(opacity=80);*/
  text-align: justify;
  text-justify: auto;
}

div.content {
  width: 95%;
  margin: 0px 0px;
  padding: 1%;
  background-color: #510402; /*dark red*/
  background-position: center;
  border: 1px solid #990000;
  border-radius: 20px;
  box-shadow: 6px 6px 10px #FFFFFF;/*white*/
  opacity: 1.;
 /* filter: alpha(opacity=80);*/
  text-align: justify;
  text-justify: auto;
  color: #FFF;
}

div.auswahl {
  width: 95%;
  margin: 0px 0px;
  padding: 1%;
  background-color: #510402;
  background-position: center;
  border: 1px solid #990000;
  border-radius: 20px;
  background-image: url(img/800a10.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  box-shadow: 6px 6px 10px #FFFFFF;
  opacity: 0.8;
  filter: alpha(opacity=80);
  text-align: justify;
  text-justify: auto;
}

.style6 {
  font-weight: bold;
}

.style8 {
  font-size: x-large;
}
/*added for links in books or any loaded html*/
a {
    color: #FFCC00; /* #FFCC00 is yellow */
    text-decoration: none;
    font-size: 1.vw; /* Responsive text size using vw units for footer navigation links, was 1.5vw */
    /* Add white underline for all links  not used: text-decoration: underline #FFFFFF; */
   
}
/* Style active links with a white underline */
a:hover,
a:focus {
    color: #FFFFFF; /* #FFFFFF is white */
    text-decoration: underline #FFFFFF; /* White underline for active links */
}
/* Change the color of visited links to white */
a:visited {
  color: #FFFFFF; /* White text color */
}

/* used in email form */
		 .error {
            color: red;
            font-size: medium;
        }
		
		/* used behind books for sale */
.highlight-link {
    background-color: rgba(215, 0, 0, 0.8); /* Set your desired background color here #D70000*/
    width: auto; /* Set the width to 'auto' to make it adjust based on content */
    height: 16px; /* Set the desired height */
    line-height: 14px; /* Adjust line-height to vertically center text */
    border-radius: 5px; /* Optionally round the corners */
    text-decoration: none; /* Remove the default underline */
    color: yellow; /* Set the text color */
    display: inline-block; /* Make it an inline-block element to fit content */
    padding: 0 8px; /* Add some horizontal padding for spacing */
}

   /* CSS for centering the video and adding padding to paragraphs 
    .content1 {
      text-align: center; /* Center align the content */
    /*}*/

    video {
      margin: 0 auto; /* Center the video horizontally */
      display: block; /* Remove default inline styling */
    }

    p {
      padding: 10px; /* Add padding to paragraphs */
    }

  .video-container { /* used in video files */
    max-width: 100%;
    height: 350px; /* Set the desired fixed height */
	text-align: center;
  }

  .video-container video {
    width: 100%;
    height: 100%;
  }