/* select all elements in the page */
html {
    /* includes padding and borders when setting element widths. "by default, browsers consider an element's width to be only the width of the content area: padding and borders are then added on top of that. so if you set the width of an element to be 300px but then add 10px of padding to the left and right sides, the overall width of the element will actually be 320px by default." */
    box-sizing: border-box;
}

body {
  background-color: #ffabc4;
  font-family: serif;
}

ul {
  list-style-type: none;
}

/* the navbar container... trying to remember why it's a class selector so look into that later lol. my guess is because topnav a affects links specifically?: i figured out why, it's so that it can affect elements within that class */
.topnav {
  max-width: 900px;
  margin: auto; 
  display: flex;
}
  
.topnav a {
 /* color: black; */
  text-decoration: none;
  padding: 14px 14px;
}

.main-container {
  max-width: 900px;
  margin: auto;
  display: flex;
  }
  

/* gallery again!! */

/* gallery again!! */

/*when creating elements for a multi-column flexbox layout, add one element for the entire row (gallery-container), and one child element for each column in your layout (gallery)*/

.gallery-container { /*organised in columns */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  max-width: 1200px;
  margin: auto;
}

/* i was gonna call it gallery-column but remembered it needs to be class gallery so that it can mark up the img element*/

.gallery { 
  flex: 32.5%;
  max-width: 32.5%;
}

.gallery img {
  width: 100%;
  height: auto;
  border: 2px dotted #ff8cca;
}

.item {
  border: 1px solid #000000;
  padding: 15px;
  margin: 25px; /*look into why not defining a margin breaks this element. like resizing it fixes it but only defining it stabilises it */
}

figcaption {
  padding: 5px;
  text-align: center;
  font-size: 15px;
}

@media only screen and (max-width: 800px) {
  .column {
    flex: 65%;
    max-width: 65%;
  }
}

@media only screen and (max-width: 500px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}