/* =====================================================
   STYLE.CSS
   This file controls how the page LOOKS.
   HTML tells the browser WHAT is on the page.
   CSS tells the browser HOW it should look.

   A CSS rule looks like this:

       selector {
         property: value;
       }

   The selector says WHAT to style.
   The property says WHAT to change.
   The value says WHAT to change it TO.
===================================================== */


/* ---- COLORS (saved here so we can reuse them) ---- */
/* Change these to change the color scheme of the whole site */

/* note to self: I might want to make the colors different later like make the heading blue */
/* whatever is most like turtles. that is a project for tomorrow maybe! */

:root {
  --color-background: #fffdf7;   /* page background: warm white */
  --color-text:       #222222;   /* main text: very dark gray */
  --color-accent:     #4a7c59;   /* headings and links: muted green */
  --color-light:      #e8ede9;   /* nav and footer background */
  --color-border:     #cccccc;   /* lines and borders */
}


/* ---- GENERAL PAGE SETTINGS ---- */

body {
  background-color: var(--color-background);
  color: var(--color-text);

  /* font-family: the list of fonts to try, in order */
  font-family: Georgia, "Times New Roman", serif;

  font-size: 18px;
  line-height: 1.7;       /* space between lines of text */
  margin: 0;              /* remove the default browser margin */
}


/* ---- CENTERING THE CONTENT ---- */
/* This puts a "container" in the middle of the page */

header, nav, main, footer {
  max-width: 800px;       /* never wider than 800px */
  margin: 0 auto;         /* auto left/right margin = centered */
  padding: 0 20px;        /* breathing room on the sides */
}


/* ---- HEADER (the big title at the top) ---- */

header {
  padding-top: 40px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--color-border);
}

header h1 {
  font-size: 2.5em;       /* em = relative to the base font size */
  color: var(--color-accent);
  margin: 0 0 8px 0;
}

header p {
  font-size: 1.1em;
  color: #555555;
  margin: 0;
}


/* ---- NAVIGATION (the row of links) ---- */

nav {
  background-color: var(--color-light);
  padding: 12px 20px;
  margin: 0;
  max-width: 100%;        /* nav stretches full width */
}

nav a {
  color: var(--color-accent);
  text-decoration: none;  /* removes the underline */
  font-size: 1em;
  margin-right: 24px;
}

nav a:hover {
  text-decoration: underline;   /* underline appears on hover */
}


/* ---- SECTIONS (about, photos, projects) ---- */

section {
  margin-top: 48px;
  margin-bottom: 48px;
}

h2 {
  color: var(--color-accent);
  font-size: 1.6em;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 6px;
}

  /* Make 3 equal columns. On small screens this will wrap. */
/* ---- PHOTO GRID ---- */
/*
.photo-grid {
  display: grid;


  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

  gap: 20px;              
  margin-top: 20px;
}
*/

figure {
  margin: 0;              /* remove default browser margin */
}

figure img {
  width: 100%;            /* fill the column width */
 /* height: 180px;*/
  object-fit: cover;      /* crop to fill, don't squish */
  border: 1px solid var(--color-border);
  border-radius: 4px;     /* slightly rounded corners */
}

figcaption {
  font-size: 0.85em;
  color: #666666;
  margin-top: 6px;
  text-align: center;
}


/* ---- LINKS ---- */

a {
  color: var(--color-accent);
}

a:hover {
  color: #222222;
}


/* ---- PROJECT LIST ---- */

ul {
  padding-left: 20px;
}

li {
  margin-bottom: 10px;
}


/* ---- FOOTER ---- */

footer {
  margin-top: 60px;
  padding-top: 16px;
  padding-bottom: 32px;
  border-top: 1px solid var(--color-border);
  color: #888888;
  font-size: 0.9em;
  max-width: 100%;
  background-color: var(--color-light);
  text-align: center;
}

footer p {
  max-width: 800px;
  margin: 0 auto;
}