:root {
    color-scheme: dark;
    color:        #bac2de;
    background:   #11111b;
}
table {
    width: 100%;
}
nav a {
    color: inherit;
    text-decoration: none;
}
.logo {
    font-size: 2em;
    font-weight: bold;
}
.logo a:hover {
    text-decoration: none;
}
.links {
    text-align: right;
}
body {
    margin: 1em auto;
    max-width: 40em;
    padding: 0 .62em;
    font: 1.2em/1.62 sans-serif;
}

h1,h2,h3 {
    line-height:1.2
}
a {
    text-decoration: none;
    color: #89b4fa;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
a.works-display {
    text-decoration: none; /* Remove underline */
    color: inherit; /* Maintain the color inherited from its parent */
}

a.works-display:hover {
    text-decoration: none; /* Remove underline when hovered */
    color: inherit; /* Maintain the color inherited from its parent */
}

/* Apply styles to the horizontal rule */
.line {
    border-color: #bac2de; /* Use color variable from :root */
}
img {
    text-align: center;
    display: block;
    max-width: 100%;
    margin: auto
}
figcaption {
    padding: 0 .15em;
    margin: auto;
    margin-top: .3em; /* Adjust this value as needed */
    text-align: center
}
footer {
    padding: 25px 0;
    text-align: center;
}

table tr td a img {
	min-width: 33px;
}
video {
    width: 100%
}
@media print{
    body { max-width:none }
}

/* Style for the video grid layout */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); /* Adjusts to fit content */
    gap: 20px;
}

/* Style for aspect ratio maintenance */
.video-grid .aspect-ratio {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.video-grid .aspect-ratio video,
.video-grid .aspect-ratio img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the content covers the padded area */
}

.video-grid figure {
    margin: 0; /* Removes default margin from <figure> */
}

/* This will apply a responsive 16:9 aspect ratio to all iframe elements */
.iframe-container {
    position: relative;
    height: 0;
    width: 100%; /* Responsive width */
    padding-bottom: 56.25%; /* Aspect ratio (height / width * 100) */
}

iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none; /* Remove any border */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
}