/* Base styles for all pages */
body {
  font-family: system-ui, sans-serif;
  font-weight: normal;
  text-wrap: pretty;
  font-size: 1.2rem;
  line-height: 1.7rem;
}

blockquote {
  margin: 3rem 0;
  font-style: italic;
  font-size: 1.8rem;
}

blockquote footer {
  font-style: normal;
  font-size: 1.2rem;
  text-align: right;
}

/* Global Header Centering */
h1, h2, h3, h4, h5, h6 {
    text-align: center;
}

/* Global Image Centering */
img {
    display: block;       /* Changes images from inline to block elements so margins work */
    margin-left: auto;    /* Automatically calculates equal space on the left */
    margin-right: auto;   /* Automatically calculates equal space on the right */
    max-width: 100%;      /* Prevents large images from breaking your layout on mobile phones */
    height: auto;         /* Maintains the original aspect ratio of the image */
}

/* Background Option 1: White tiles*/
.bg-white_tiles {
    background-image: url('/images/backgrounds/1005-2.png');
    background-repeat: repeat; /* Tells the browser to tile the image */
    background-attachment: fixed; /* Keeps background static while scrolling */
}

/* Background Option 2: Grey tiles*/
.bg-grey_tiles {
    background-image: url('/images/backgrounds/1003-2.png');
    background-repeat: repeat; /* Tells the browser to tile the image */
    background-attachment: fixed; /* Keeps background static while scrolling */
}

/* Background Option 3: Black tiles*/
.bg-black_tiles {
    background-image: url('/images/backgrounds/1019-2.png');
    background-repeat: repeat; /* Tells the browser to tile the image */
    background-attachment: fixed; /* Keeps background static while scrolling */
}

/* Background Option 4: Dots*/
.bg-dots {
    background-image: url('/images/backgrounds/dots.png');
    background-repeat: repeat; /* Tells the browser to tile the image */
    background-attachment: fixed; /* Keeps background static while scrolling */
}

/* Background Option 5: stars*/
.stars {
    background-image: url('/images/backgrounds/stars.gif');
    background-repeat: repeat; /* Tells the browser to tile the image */
    background-attachment: fixed; /* Keeps background static while scrolling */
}

/* Background Option 6: fuzzy*/
.fuzzy {
    background-image: url('/images/backgrounds/fuzzy.gif');
    background-repeat: repeat; /* Tells the browser to tile the image */
    background-attachment: fixed; /* Keeps background static while scrolling */
}

/* Background Option 7: warning*/
.warning {
    background-image: url('/images/backgrounds/warning.jpg');
    background-repeat: repeat; /* Tells the browser to tile the image */
    background-attachment: fixed; /* Keeps background static while scrolling */
}

/*This is for having white boxes with black borders around sections of text*/
.content-box {
    background-color: #ffffff; /* Sets the inside background to white */
    border: 2px solid #000000; /* Sets a solid black border, 2 pixels thick */
    color: #000000;            /* Forces the text inside the box to be black for contrast */
    padding: 20px;             /* Adds space between the text and the border */
    margin: 20px auto;         /* Adds space outside the box and centers it */
    max-width: 1200;          /* Prevents the box from stretching too wide on large screens */
    box-sizing: border-box;    /* Ensures padding doesn't affect the overall width calculation */
}

/* The parent container that enables the side-by-side layout */
.column-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: 1200px; /* Limits the layout width on very large monitors */
    margin: 0 auto;    /* Centers the entire layout on the screen */
    gap: 20px;         /* Adds horizontal spacing between the columns */
    padding: 20px;
    box-sizing: border-box;
}

/* Style for both the Left and Right sidebars */
.side-column {
    flex: 0 0 250px; /* Do not grow, do not shrink, fix at 20% width */
    background-color: #ffffff;
    border: 2px solid #000000;
    color: #000000;
    padding: 15px;
    box-sizing: border-box;
}

/* Style for the Center main content area */
.main-column {
    flex: 1; /* Flex: 1 forces it to grow and fill the rest of the container */
    box-sizing: border-box;
}

/* Ensure the content boxes inside the main column take up full width */
.main-column .content-box {
    margin-top: 0; /* Clears top margin conflict */
    max-width: 100%;
}

/* When the screen is 768px wide or smaller (like an iPhone) */
@media (max-width: 768px) {
    .column-container {
        flex-direction: column; /* Stack columns on top of each other */
    }
    
    .side-column, .main-column {
        flex: 1 1 100%; /* Force all columns to take full width */
        width: 100%;
    }
}

/* Specific configuration for book reviews with wrapped text */
img.book-cover-left {
    float: left;                /* Pushes the image left and lets text wrap around the right */
    display: inline !important; /* Overrides the global display: block rule */
    margin: 0 20px 10px 0 !important; /* Overrides global auto-centering margins. 
                                   Adds 20px space to the right and 10px below the image */
    width: 250px;               /* Maintains your desired width constraint */
    height: auto;               /* Keeps the aspect ratio proportional */
}

/* Style for the thumbnail */
.thumbnail {
  cursor: pointer;
  transition: 0.2s;
}

.thumbnail:hover {
  opacity: 0.8;
}