/* One of the important things about CSS is inheritance: every tag that is inside another will inherit all of the rules of the enclosing tag as well as using any that are specified for it. That means that anything set on the body tag will affect basically everything in the document, and anything on nav will affect the list, and the items on that list, and the links in those items as well. That's especially interesting when it comes to font size. It might be worth looking at the CSS Almanac at CSS-tricks.com */
/* This sets the background colour so that it can be used later, in rgb hex */
/* Likewise, but for the colour of the links */
@import url("https://fonts.googleapis.com/css?family=EB+Garamond|Lato&display=swap"); /* This imports the fonts that we'll use from google fonts */
body { /* This is the actual content, as opposed to the invisible header material */
  font-family: "Lato", sans-serif; /* sets the basic font for everything to be Lato, or if that doesn't load for some reason, the system will choose a sans-serif font instead */
  max-width: 45rem; /* Sets the maximum width of the content to 40 rem - a rem is the width of a letter m, in the basic font size of the document */
  margin: 4rem auto; /* This sets the margins of the content, first top and bottom, then the sides: 4rem keeps whitespace at the top and bottom of the content and keeps everything separated inside, and auto makes the margins the same as each other and enough to fill the window, which keeps the content centred */
}

h1 { /* Selects both level 1 and level 2 headers, because they're separated by a comma */
  font-family: "EB Garamond", serif; /* sets the font for these headers to Garamond, or a serif font if that doesn't work */
  font-weight: 500; /* This is semibold, not completely bold. I just prefer the look of it */
  font-size: 2.5em; /* sets a font size that is 2.5 times bigger than the body text */
}
h1 span { /* Applies the followwing only to a span that is inside an h1, because there's no comma. The & basically adds this selector to the enclosing one */
  color: #fff; /* uses the background colour set earlier, so that the text will belnd in with the background */
  font-size: 0.7em; /* sets the text in a smaller font because it's the less important part of the header */
}
h1 span:hover { /* only applies to a span inside an h1, and only when the mouse is hovering over it */
  color: #d00; /* changes the colour to the link colour set above, so that we can see it */
  transition: all 1s; /* this is an animation so that the colour change happens over the course of a second instead of instantly */
}

nav { /* This selects the navigation elements */
  font-family: "EB Garamond", serif; /* Sets it to Garamond to match the h1 and h2 that will generally surround it */
  font-size: 1.6em; /* Sets the font size to something in between the body and the h1 */
  margin-bottom: 3rem; /* gives some nice clearance belowso that the content doesn't bump up against the nav bar */
}
nav ul { /* selects for an unordered list inside the nav bar */
  list-style-type: none; /* gets rid of the bullet points */
  padding: 0; /* sets the space between the box and the text to 0, which keeps everything in line  */
  display: flex; /* this says that everything inside the list should be organised automatically */
  flex-wrap: wrap; /* lets the browser wrap items onto the next line if it needs to */
}
nav ul li { /* this selects the items within the list */
  margin: 0 0.05em; /* give them a 1em margin to left and right so that they don't bump into each other */
  flex: 1; /* This tells the browser to fill all of the horizontal space with the items, stretching them out if necessary */
  text-align: center; /* This puts the text in the centre of the box */
}

a { /* This selects all of the links */
  text-decoration: none; /* This gets rid of the underline, because it's ugly */
  color: #d00; /* sets the colour to whatever was defined above */
}
a:hover { /* when the mouse is hovering over a link... */
  text-decoration: underline; /* put the underline back in, just to reinforce that it's a link */
}

img { /* This selects all images */
  float: right; /* pulls them out of the flow of the text and puts them on the right hand side, with text flowing around them */
  max-width: 40%; /* images will be whatever their real pixel size is, unless it's more than 40% of the container that they're in in which case they'll be that size. Setting only a width and not a height means that images won't be stretched out of shape, because that's ugly */
}

div > ul { /* This is essentially selecting the lists of members in the group, because that's the only page with an unordered list as the direct descendant of a div */
  list-style-type: none; /* Takes those bullet points off */
  display: flex; /* lets the browser lay them out so that they fit */
  flex-wrap: wrap; /* and lets them spill over across multiple lines */
}

.member, .partner { /* selects the items that have the class "member" set on them */
  width: 8rem; /* Give them a fixed width, but in rem so that the browser gets to choose it */
  margin: 1rem; /* give them some breathing space. There's only one value here, so it applies on all sides */
}
.member a img, .partner a img { /* select for images that are inside a link that is inside an item with the class "member" */
  float: none; /* don't move them to the right */
  max-width: 100%; /* don't keep them below 40% of the container */
}

.member img {
  filter: grayscale(1); /* make them black and white */
  -webkit-filter: grayscale(1); /* the black and white thing is quite new, so it needs special syntax for anything based on safari or chrome or opera */
  -moz-filter: grayscale(1); /* or firefox */
}

footer { /* selects the bar at the bottom, with the sponsors in */
  display: flex; /* lets the browser lay them out */
}
footer a { /* links within that bar */
  padding: 1em; /* should be separated a little */
}
footer a img { /* the images that make them up */
  max-width: 100%; /* shouldn't be kept to less than 40% of their container */
}

@media only screen and (max-width: 50rem) { /* This selects for the case when the screen is narrower than 50rem, which is to say when it's narrower than the content */
  body { /* adds to the rules for the body from above */
    width: 90%; /* and changes the width to 80% of the window instead of 40rem. This just looks nice, but the 50rem limit for the media selector is set so that there's no weird transition: as you shrink the screen the content never jumps in width */
  }
  h1 span { /* select that fade-in span from earlier */
    display: none; /* and just take it out entirely, so that we don't see it on mobile */
  }
  img { /* select all images, which will be comically small with that 40% limit from earlier */
    float: none; /* put them back where they came from */
    max-width: 100%; /* and make sure they don't get any bigger than the container that they're in */
  }
}
.title {
  font-style: italic;
}

.volume {
  font-weight: 600;
}

.issue:before, .year:before {
  content: "(";
}
.issue:after, .year:after {
  content: ")";
}

/*# sourceMappingURL=style.css.map */