/* 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." */

body {
  background-color: #f0f8ff;
  color: #333;
  font-family: Verdana, sans-serif;
  margin:0;
  padding:20px;
}
img {
  max-width: 100%;     /* image will never be wider than the screen/container */
  height: auto;        /* keeps the correct aspect ratio */
  display: block;      /* removes little gaps below images */
  margin: 20px auto;   /* centers image and adds vertical space */
  border-radius: 10px; /* optional: rounded corners for a nicer look */
  box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* optional: subtle shadow */
}
  
  .portrait-row {
  display: flex;          /* puts children side by side */
  justify-content: center; /* centers them horizontally */
  gap: 20px;              /* space between images */
}

.portrait-row img {
  max-width: 45%;         /* adjust so two images fit nicely */
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

img {
  max-width: 100%;        
  height: auto;           
  display: block;         
  margin: 20px auto;      
  border-radius: 10px;    
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}