/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* --- General Page Styles --- */
body {
  background-color: white;
  color: black;
  font-family: "Courier Prime", "Courier New", Courier, monospace;
  margin: 0;
  padding: 0;  
}

/* --- Logo & Title --- */

.logo {
  max-height: 50%;   /* control size */
  display: block;     /* or inline-block if you want text beside */
  margin: 0 auto;     /* centres the logo in the header */
}

.title {
  font-size: 100%;
  letter-spacing: 1em;
}

/* --- Header & Footer --- */
header, footer {
  text-align: center;
  padding: 1em 0;
}

/* --- Main Content Container --- */
.container {
  width: 600px;      /* sets the total width of the content window */
  margin: 0 auto;    /* horizontally centres the container in the page */
  text-align: left;  /* ensures text inside stays left-aligned */
  padding: 1em 0;    /* vertical spacing inside container */
}

/* Row styling */
row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* First row: side by side blocks */
.first-row .block {
  width: 200px;
  height: 200px;
  box-sizing: border-box;
  margin-right: 10px; /* space between blocks */
}
.first-row .block:last-child {
  margin-right: 0; /* remove margin for last block */
}

/* Image inside block */
.image-block img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* ensures square image fits */
}

/* Text block formatting */
.text-block {
  padding: 10px;
  color: lime;
  font-family: Courier, monospace;
}

/* Second row: full width */
.second-row {
  display: block;
  width: 100%;
}

.second-row .date {
  font-size: 12px;
  color: lightgreen;
  margin-bottom: 5px;
  text-align: left;
}

/* --- Images --- */
img {
  max-width: 100%;       /* prevent overflow */
  height: auto;
  display: block;
  margin-top: 10px;
}


.image-container img {
  max-width: 100%;   /* keep it responsive */
  height: auto;      /* preserve aspect ratio */
}


 /* --- Links --- */
a:link {
  color: blue;           /* normal links */
}

a:visited {
  color: purple;        /* light purple */
}

a:hover {
  color: red;            /* hover */
}

a:active {
  color: blue;           /* active */
}