/* dark.css */

/* 1. Set the overall background and text color */
body {
    background-color: #1e1e1e; /* Dark main background */
    color: #e0e0e0; /* Light gray text for readability */
}

/* 2. Style common text elements */
h1, h2, h3, h4, h5, h6 {
    color: #f0f0f0; /* Slightly brighter for headings */
}

p {
    color: #e0e0e0;
}

a {
    color: #4a9eff; /* A bright, pleasant blue for links */
    text-decoration: none;
}

a:hover {
    text-decoration: underline; /* Standard hover effect */
}

/* 3. Style the main layout containers */
header, footer {
    background-color: #2d2d2d; /* Slightly lighter than body */
    border-bottom: 1px solid #444444; /* Subtle border for definition */
}

footer {
    border-top: 1px solid #444444; /* For the footer */
    border-bottom: none;
}

main {
    /* If your main content area has a background, set it here */
    background-color: #252526;
}

/* 4. Style navigation */
nav ul.nav-list li a {
    color: #e0e0e0; /* Light text for nav links */
}

nav ul.nav-list li a:hover {
    color: #4a9eff; /* Highlight on hover */
}

/* 5. Style specific content blocks like blog posts */
.blog-post {
    background-color: #2d2d2d; /* Give posts a distinct background */
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #444444;
}

/* 6. Style forms and inputs */
input[type="text"],
input[type="email"],
textarea {
    background-color: #333333;
    color: #e0e0e0;
    border: 1px solid #555555;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    border-color: #4a9eff; /* Highlight active input fields */
}

button[type="submit"] {
    background-color: #4a9eff;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

button[type="submit"]:hover {
    background-color: #3a8eef; /* Darker on hover */
}

/* 7. Style code blocks */
pre, code {
    background-color: #2b2b2b;
    color: #f8f8f2;
    padding: 2px 4px;
    border-radius: 4px;
}

pre {
    padding: 1em;
    overflow-x: auto;
}

/* 8. Handle images - optional but recommended */
/* You can make images slightly less bright to blend in better */
img {
    opacity: 0.85;
    transition: opacity 0.2s ease-in-out;
}
img {
  float: left;
  max-width: 100%;
  height: auto;
}
img { padding-right: 22px; padding-bottom: 8px; 
    
  }

img:hover {
    opacity: 1; /* Brighten on hover */
}
blockquote {
  display: block;
  font-style: italic;
  font-size: large;
  margin: 1em 1em 30px 40px;

}
.video-container {
    text-align: center; /* Center the content horizontally */
}

.video-container p {
    margin: 0; /* Remove any default margin */
}
hr {
    border: 0;
    border-top: 4px solid #ccc;
    margin: 20px 0;
}

.video-container {
    position: relative;
    width: 100%;
    max-width: 560px; /* Match the width of the original iframe */
    margin: 0 auto; /* Center the container */
    /* padding-top: 56.25%; removed vecause there was space 16:9 aspect ratio */
    overflow: hidden; /* Ensure no overflow */
}
.video-container video {
  display: block;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* .video-container video { */
  
/*  vertical-align: bottom; /* or 'top' or 'middle' */
/* } --> old code to fix space above video */