/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body and general styles */
body {
    font-family: Arial, sans-serif;
    background-color: #001f3d;  /* Dark blue background for the whole page */
    color: #fff;                /* White text color for readability */
    text-align: center;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Ensure content is vertically centered */
}

/* Header styling */

header a {
    text-decoration: none;     /* Remove underline */
    color: #fff;               /* Make the link text white */
    font-size: 2.5em;          /* Same size as the header text */
    font-weight: bold;         /* Optional: make it bold */
}

header a:hover {
    color: #f0a500;            /* Change color when hovered (light orange/yellow) */
    text-decoration: underline; /* Optionally add underline on hover */
}

header {
    padding: 50px 20px;
    background-color: #333;     /* Dark grey header background */
    color: white;               /* White text inside header */
    width: 100%;
    text-align: center;         /* Center text in header */
}

h1 {
    font-size: 2.5em;
}

p {
    font-size: 1.2em;
}

/* Media List Container */
.media-list {
    display: flex;
    flex-direction: column;  /* Stack items vertically */
    align-items: center;     /* Center the content horizontally */
    justify-content: center; /* Center vertically if needed */
    gap: 30px;               /* Add space between items */
    padding: 20px 0;
    width: 100%;
    max-width: 900px;        /* Max width for media list */
    margin: 0 auto;          /* Center the whole media list container */
}

/* Media Item (for both images, videos, and PDFs) */
.media-item {
    width: 75vw;              /* Set width to 75% of the viewport width */
    height: auto;             /* Maintain aspect ratio */
    max-width: 100%;          /* Prevent media from stretching beyond the container */
    padding: 20px;
    background-color: #fff;  /* White background for media items */
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for media items */
    box-sizing: border-box;
    margin: 0 auto;           /* Horizontally center each media item */
}

/* Styling for images (Non-clickable) */
.media-img {
    width: 100%;               /* Scale image to 100% of its container's width */
    height: auto;              /* Maintain aspect ratio */
    max-width: 100%;           /* Prevent stretching beyond container */
    border-radius: 10px;
    border: 3px solid #ddd;
    box-sizing: border-box;
    pointer-events: none;      /* Disable clicking on images */
}

/* Styling for videos (Non-clickable) */
.media-video {
    width: 100%;               /* Scale video to 100% of its container's width */
    height: auto;              /* Maintain aspect ratio */
    max-width: 100%;           /* Prevent stretching beyond container */
    border-radius: 10px;
    border: 3px solid #ddd;
    box-sizing: border-box;
    pointer-events: none;      /* Disable clicking on videos */
}

/* Styling for PDFs (iframe) - Clickable */
iframe {
    width: 75vw;               /* Set width to 75% of the viewport width */
    height: 75vh;              /* Set height to 75% of the viewport height */
    border: none;
    border-radius: 10px;
    box-sizing: border-box;
    pointer-events: auto;      /* Allow clicking on PDFs */
}

/* Optional: Add a hover effect for media items */
.media-item:hover {
    transform: scale(1.05);   /* Slightly zoom the item on hover */
    transition: transform 0.3s ease-in-out;
}