@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';

#left  {
    float: right;    
     margin: 0 0 0 15px;
}

body {
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    line-height: 1.5;
    color: rgb(58, 57, 57);
    margin: 0;
}

#super-cool-jessica {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#bg {
    display: flex;
    margin: auto;
    padding-top: 70px;
    width: 60%;
}

main {
    max-width: 50em;
    margin: 0 auto;
    padding: 1em 1em;
}

h1,
h2 {
    text-align: center;
    color: #333;
}

a {
    color: #a20909;
}

ul {
    list-style-type: none;
}

nav {
    text-align: center;
}

header {
    background-image: url("images/header.png");
    background-position: center top;
    background-size: contain;
    background-repeat: no-repeat;
    line-height: 1.2;
    padding: 10vw 1em;
    text-align: center;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

.myGallery {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  
  .myGallery img {
    width: 100%;
    border: 0px solid #555;
  }

pre {
  /* For vertical scrolling if content exceeds height */
  overflow-y: auto; 
  /* For horizontal scrolling if content exceeds width */
  overflow-x: auto; 
  /* Optional: Set a maximum height for vertical scrolling */
  max-height: 300px; /* Adjust as needed */
  /* Optional: Set a maximum width for horizontal scrolling */
  max-width: 100%; /* Adjust as needed */
  /* Maintain preformatted text properties */
  white-space: pre; 
  word-break: normal; 
}

/* Optional: To ensure the code block inside the pre tag also adapts */
pre code {
  display: block; /* Make code a block-level element within pre */
}

.centered-div {
  width: 80%;       /* Must set a width less than 100% */
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  /* Shorthand for top/bottom margins 0, left/right auto */
  margin: 0 auto;

  /* Add styling */
  padding: 20px;
}


/* VIDEO GALLERY – square autoplaying project tiles */

.videoGallery {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin: 2em 0;
}

/* Whole tile is clickable */
.videoCard {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    padding: 0.6em 0.6em 0.8em;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #ddd;
    text-decoration: none;   /* override global link underline */
    color: inherit;          /* keep body text color */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    transition:
        box-shadow 0.18s ease-out,
        transform 0.18s ease-out,
        border-color 0.18s ease-out;
}

.videoCard:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
    border-color: #a20909; /* your link red as an accent */
}

.videoCard:active {
    transform: translateY(0);
}

/* Square video area */
.videoThumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;  /* makes each block a square */
    border-radius: 6px;
    overflow: hidden;
    background: #f5f5f5;
}

/* Make the video fill the square neatly */
.videoThumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;  /* so clicks go to the <a>, not the video */
}

.videoThumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 6px;
    pointer-events: none; /* ensures click still hits the link */
}

/* Title under the video */
.videoTitle {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: #333;  /* matches your h1/h2 color */
    text-align: left;
}

/* Optional: tighter grid on very small screens */
@media (max-width: 480px) {
    .videoGallery {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }

    .videoTitle {
        font-size: 0.9rem;
    }
}

.pdfContainer {
    width: 100%;               /* take up ~70% of the content width */
    margin: 2rem auto;        /* centers it */
    height: 80vh;             /* viewer fills most of the window height */
    border: 1px solid #ddd;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07);
    background: #fff;
    border-radius: 6px;
}

.pdfContainer iframe {
    width: 100%;
    height: 100%;
    border: none;
}


.pdfCard {
  max-width: 600px;
  margin: 1.5rem auto;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.pdfCard h3 {
  margin-top: 0;
}

.pdfCard a {
  display: inline-block;
  margin-top: 0.5rem;
  color: #a20909;       /* your existing link color */
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.pdfCard a:hover {
  border-bottom-color: #a20909;
}

/* A clean photo + caption block matching your site's style */
.photoBlock {
    width: 70%;                 /* readable width similar to your PDF viewer */
    margin: 2rem auto;          /* center horizontally */
    text-align: center;         /* center caption */
}

.photoBlock img {
    width: 100%;                /* responsive */
    max-width: 500px;           /* optional: prevents huge images from dominating */
    height: auto;
    border-radius: 6px;
    border: 1px solid #ddd;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07);
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.photoCaption {
    margin-top: 0.6rem;
    font-size: 0.9rem;
    color: #555;                /* subtle, matches your aesthetic */
    line-height: 1.4;
}

/* Clean video + caption container */
.videoBlock {
    margin: 2rem auto;          /* centered */
    text-align: center;         /* center caption */
}

/* Responsive, square-friendly video styling */
.videoBlock video {
    width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid #ddd;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07);
    display: block;
    margin-left: auto;
    margin-right: auto;
    object-fit: cover;          /* makes squares crop nicely if needed */
    pointer-events: none;       /* allows clicks to pass through if container is a link */
}

.videoCaption {
    margin-top: 0.6rem;
    font-size: 0.9rem;
    color: #555;
    line-height: 1.4;
}

/* Two-column layout for photoBlock and videoBlock */
.twoColBlocks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    width: 80%;           /* centered and slightly narrower for readability */
    margin: 2rem auto;
}

/* Override widths inside – the grid controls width now */
.twoColBlocks .photoBlock,
.twoColBlocks .videoBlock {
    width: 100% !important;   /* ignore inline width settings */
    margin: 0;                /* grid spacing handles layout */
}