/* 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." */
   
:root {
  /* CSS HEX */
  --clay-soil: #805049ff;
  --pale-slate: #c6c1c6ff;
  --espresso: #4a2a29ff;
  --alabaster-grey: #dfe6e7ff;
  --lilac-ash: #9d8ba1ff;
}

/* Navigation Bar */
nav {
  background-color: var(--pale-slate);
  padding: 10px 20px;
}

nav a {
  color: var(--espresso);
  text-decoration: none;    /* removes underline */
  font-size: 1rem;
}

nav ul {
  list-style: none;    /* removes bullet points */
  margin: 0;
  padding: 0;
  display: flex;       /* lines links up horizontally */
  gap: 20px;
}

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

nav {
  position: sticky;
  top: 0;              /* sticks to the very top */
  z-index: 10;         /* stays above other elements */
  background-color: var(--pale-slate);
  padding: 10px 20px;
}

/* Main Text*/

main {
  max-width: 800;
  margin: 0 auto;
}

body {
  background: var(--alabaster-grey);
}

p {
  color: var(--clay-soil);
  font-family: Verdana;
}

/* Headings */
h1 {
  color: var(--espresso);
  font-size: 2.5em;
  text-align: center;
}

h2 {
  color: var(--espresso);
  text-align: center;
}

h3 {
  color: var(--espresso);

}

/*lists */
ul {
  color: var(--clay-soil);

}

.collage {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

.img-wrapper {
  width: calc(33% - 10px);  /* 3 images per row */
  overflow: hidden;          /* clips image so it never goes outside its box */
}

/* First and last wrappers are bigger */
.img-wrapper:first-child,
.img-wrapper:last-child {
  width: calc(66% - 10px);
}

.img-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;  /* smooth animation */
  border: none;
}

.img-wrapper img:hover {
  transform: scale(1.1);  /* grows 10% on hover */
}