/*
 * Started : 10-OCT-2025
 * Updated : 14-NOV-2025
 */

/*
 * This stylesheet accompanies: Building a static website (part 10) blog post.
 */

*,
* ::before,
* ::after
{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body
{
   background-color: #e6e6ff;
   color: black;
   font-size: 110%;
   font-family: "Noto Sans", "Oxygen-Sans", Ubuntu, Roboto, Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4
{
   font-family: "Noto Serif", "Times New Roman", Georgia, serif;
}

h1
{
   color: #1b0d9f;
   font-size: 3.0rem;
	line-height: 110%;
   margin-block-end: 25px;
}

h2
{
   font-size: 2.5rem;
   margin-block-end: 20px;
}

h3
{
   font-size: 2.0rem;
   margin-block-end: 20px;
}

h4
{
   font-size: 1.6rem;
   margin-block-end: 20px;
}

p, pre, hr, ul, ol, table, details
{
   margin-block-end: 20px;
}

ul, ol
{
   /* If I don't add this, the bullets will not be in line with the rest of the text. */
   padding-inline-start: 20px;
}

/*
 * Default table style.
 */
table thead tr
{
	background-color: lightgrey;
   border: 1px solid #ffff;
}

table, th, td
{
   border: 1px solid black;
   border-collapse: collapse;
}

article
{
   background-color: white;
   /* background-color: #e6e6ff; */
   max-inline-size: 1000px;
   margin: 0 auto;
   padding-inline-start: 20px;
   padding-inline-end: 20px;
}

header
{
   background-color: #052962;
   height: 100px; /* Set an arbitrary height. */
}

footer
{
   background-color: #052962;
   color: white; /* Make sure the text is visible against the background. */
}

/* For now, apply the CSS styles to every element inside the footer. */
footer *
{
   max-inline-size: 1000px;
   margin: 0px auto;
   padding: 20px;
}

/* If the browser window is narrower than the intrinsic size of an image,
 * display it at 100% of the viewport, until that becomes wider than the intrinsic size of the image.
 * The setting of "display: block;" and "margin: 0 auto;" centres all images within <article> … </article>
 */
article img
{
   max-inline-size: 100%;
   /* display: block; */
   /* margin: 0 auto; */
}

/*
 * CSS for the top navigation menu.
 * We set the list not to display any visible bullets and reduce the
 * margin and padding 20 pixels.
 * The list element is set to display mode "inline", which means
 * the items in the list will appear next to each other.
 * We also set the width of the icon graphic to be 40 pixels.
 */
nav ul
{
   list-style-type: none;
   margin: 0;
   padding: 0;
   max-inline-size: 1000px;
   margin: 0 auto;
}

nav li
{
   display: inline;
}

nav img
{
   width: 40px;
}

/*
 * CSS to style the "published" section, which displays a small
 * calendar icon and the published and updated dates.
 * We simply set the height of the IMG element (which is the calendar icon)
 * to "1em", to match the font size.
 * Note the "display: inline;" is required because of the CSS used to centre images.
 */
.published img
{
   height: 1em;
   display: inline;
}

code
{
   background: lightgrey;
}

/* Style code blocks and include a scrollable area if lines are too long. */
pre.code_block
{
   background-color: lightgrey;
   border: thin solid black;
   overflow: auto;
}

/* Styles for the main title block at the top of the page.
 * This includes a reduction in size for the subtitle (which is still ahead)
 * and making changes for narrower screens, to avoid the title block taking up too much room.
 */
.main_title_block h2
{
   font-size: 1.5rem;
}

@media (max-width: 450px)
{
   .main_title_block h2
   {
      display: none;
   }

   .main_title_block h1
   {
      font-size: 2.0rem;
   }
}

/*
 * Styles for the table of contents section.
 */
ol.contents_tab ul li
{
   list-style-type: none;
}

ol.contents_tab ul
{
   margin-block-end: 0;
}

ol.contents_tab
{
   margin-block-end: 0;
}

ol.contents_tab a:visited { text-decoration: none; }
ol.contents_tab a:active { text-decoration: none; }

.flex_container1
{
   display: flex;
   background: #729fcf;
   margin-block-end: 20px;
}

.flex_container1 p
{
   margin-block-end: 0;
}

.flex_container1 p:first-child
{
   background: #cccc00;
   width: 150px;
}

.flex_container1 p:nth-child(2)
{
   background: #808019;
}

.flex_container1 p:last-child
{
   background: #e6e64c;
   align-self: flex-end;
}

.flex_direction_column
{
   display: flex;
   flex-direction: column;
   width: 300px;
   background: #729fcf;
   margin-block-end: 20px;
}

.flex_direction_column p
{
   margin-block-end: 0;
}

.flex_direction_column p:first-child
{
   background: #cccc00;
}

.flex_direction_column p:nth-child(2)
{
   background: #808019;
}

.flex_direction_column p:last-child
{
   background: #e6e64c;
   align-self: flex-end;
}

.justify_end
{
   display: flex;
   justify-content: flex-end;
   background: #729fcf;
   margin-block-end: 20px;
}

.justify_end p
{
   margin-block-end: 0;
}

.justify_end p:first-child
{
   background: #cccc00;
   width: 150px;
}

.justify_end p:nth-child(2)
{
   background: #808019;
}

.justify_end p:last-child
{
   background: #e6e64c;
   align-self: flex-end;
}

.justify_space_around
{
   display: flex;
   justify-content: space-around;
   background: #729fcf;
   margin-block-end: 20px;
}

.justify_space_around p
{
   margin-block-end: 0;
}

.justify_space_around p:first-child
{
   background: #cccc00;
   width: 150px;
}

.justify_space_around p:nth-child(2)
{
   background: #808019;
}

.justify_space_around p:last-child
{
   background: #e6e64c;
   align-self: flex-end;
}

.no_wrap
{
   display: flex;
   flex-wrap: nowrap; /* This is the default value. */
   background: #729fcf;
   margin-block-end: 20px;
}

.wrap
{
   display: flex;
   flex-wrap: wrap;
   /* justify-content: center; */
   background: #729fcf;
   margin-block-end: 20px;
}

.wrap_centre
{
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   background: #729fcf;
   margin-block-end: 20px;
}

.flex_squeeze
{
   display: flex;
   background: #729fcf;
   margin-block-end: 20px;
}

.flex_squeeze p:nth-child(3)
{
   background: #808019;
}

.flex_squeeze p:last-child img
{
   max-inline-size: initial;
   /* flex-shrink: 0; */
}

.centre
{
   margin: 0 auto;
   display: block;
}

/*
 * This is the beginning of the CSS for a list of published articles.
 */
ul.article_list
{
   /* Do not display unordered list bullets */
   list-style-type: none;
   /* Make sure the list lines up on the left-hand side. */
   padding-inline-start: 0;
}

.article_list a:link
{
  text-decoration: none;
}

.article_list li
{
   /* Each list element is a flexbox container. */
   display: flex;
   /* This provides the visual separation between the rows. */
   border-block-end: 1px solid lightgrey;
   /* Put some space between one row in the next (i.e. after the grey border). */
   margin-block-end: 10px;
}

.article_list li:last-child
{
   /* No extra space for the last list element. */
   margin-block-end: 0;
}

.article_list li img
{
   /* Give a specific width to the image. Means flexbox will not resize it. */
   width: 150px;
   /* Counteracts the "max-inline-size: 100%;" definition earlier in the CSS file. */
   max-inline-size: none;
}

/* Do not display the image on screen is narrower than 450 pixels. */
@media (max-width: 450px)
{
   .article_list li img
   {
      display: none;
   }
}

.summary
{
   /* Add space between the image and the text. */
   margin-inline-start: 10px;
   font-size: 0.8rem;
}

.summary h3
{
   margin-block-end: 10px;
   font-size: 1.6rem;
}

.summary p
{
   margin-block-end: 15px;
}