/* basic rules for whole site. the asterisk selects all elements */
* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 14px;
    font-family: Georgia, "Times New Roman", serif;
    /*often you need to "reset" some stuff at the top of your stylesheet because many elements have default properties that are annoying to work around. see "bonus" */

    /* color variables (these don't have to be hex codes. you can specify a color in several ways or even use a background image) */
    --textcolor: #3c3228;
    --pagebg: #f9f6f0;
    --sectionbg: #edece0;
    --links: #716659;
    --mono: #2F2F2F;
    --monobg: #eeeeee;
}
/* variables make it easier to manage your palette, plus some really simple scripting can add a button for dark mode. or, try activating this next chunk for an automatic dark mode based on the browser theme: */

/* (delete this line)
@media (prefers-color-scheme: dark) {
*{
--textcolor: #ffffff;
--pagebg: #24242C;
--sectionbg: #34343C;
--links: #B2B2B2;
--mono: #ccc;
--monobg: #3f3f3f;
}
p{
letter-spacing: .025em;
font-weight: 350;
}
}
(delete this line) */

html{
    background-color: var(--pagebg);
    /*this is how you use a variable*/
    scrollbar-gutter: stable;
    /*this stops the page moving around when the scrollbar appears. they just added this recently and it used to be super annoying to work around*/
}
/* important to know: style rules of a "parent" element will automatically be "inherited" by the "child" element (something else inside the parent) unless you define otherwise, or unless they don't apply by default to that element type. */

body {
    font-size: 18px;
    /* defining a font size here determines the size of an em (see "bonus") */
    font-family: Georgia, "Times New Roman", serif;
    /* naming multiple fonts here (and then a general category) creates a fallback where if the first one can't load or is missing a certain character, the next one (Inter) will cover for it. if none of them load then the page asks the computer for any old sans-serif font it has on hand (typically Arial on windows and San Fransisco on macOS) */
    line-height: 1.4;
    color: var(--textcolor);
    /* "color" actually refers to specifically the text color within an element. yeah i know */
    position: relative;
    margin: -1em auto;
    /* a negative margin is also weird to do but I was getting a small strip of empty space at the top of the site and could not figure out why so i just accounted for it. it's okay to make websites this way! nobody looks at the code! */
    /*in this instance the computer interprets "auto" as "as much space as you have, divided evenly" which neatly centers our container on the screen*/
    width: 43em;
    /* this sets the width of the body where all the content lives, but with paragraphs constrained to their own max width it mostly just moves the navbar around */
}

header {
    padding: 2.5em 2em 1em 2em;
    /* when you do padding or margin in one line like this it goes top-right-bottom-left */
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    /* "absolute" elements don't get pushed around by other elements on the screen. they are "removed from the document flow" */
    top: 0;
    width: 100%;
    z-index: 2;
    /* z-index makes an element stack in front of other things. by default elements further down the page render in front of everything before them */
}

h1 {
    font-size: 1em;
    font-weight: 600;
    flex: 1;
    /*this pushes the nav links to the right. flex is a whole system i'm not gonna get into here */
    white-space: nowrap;
    /* this prevents line breaks */
}

nav a:not(:last-of-type) {
    margin-right: .5em;
    /* this puts space between the nav links, but not after the last one. css is a real code language! it has logic! */
}

a {
    /* "a" is for links for some 1990s reason */
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: 0.2s;
    color: var(--links);
}

nav a:hover {
    /* ":hover" makes something look different when you hover on it, which you probably guessed */
    text-decoration-color: var(--links);
    transition: 0.2s;
    /* here i'm using "transition," an easy way to animate things, along with making the default underline color transparent because you can't animate whether an underline is there but you can animate what color it is */
}

.bar {
  overflow: hidden;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  padding: 14px 16px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--sectionbg);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 3;
}

.dropdown-content a {
  float: none;
  padding: 12px 16px;
  display: block;
  text-align: left;
}

.dropdown:hover .dropdown-content {
  display: block;
}

a.inert:hover{
    text-decoration-color: transparent;
}
/* this "inert" class for links is just for the slashes in the nav menu. which could have been p's but i'd have to make those part of the flex container and i am lazy */

/* sections -------------------------------------------- */
section {
    background: var(--sectionbg);
    padding: 5em 2em 6em;
    /* the reason for padding instead of margin here is because anchor links automatically scroll to the top edge of the target. this way there's some margin between the top of the screen and the text. padding goes inside, margin goes outside */

    /* the next six lines are really important. but maybe see what happens if you change them anyway */
    display: none;
    top: 0;
    width: 100%;
}

section:target {
    display: block;
    /* :target is what makes the pages render one at a time. "block" is the default display mode */
}

body:not(body:has(section:target)) section#home{
    display: block;
}
/* this is a complicated conditional rule that makes the homepage display by default but go away when anything else is selected. this fixes a problem some people were having where longer pages would stick out from under the homepage. thanks to william davies for sending this in! */

footer{
    color: var(--links);
    font-size: 85%;
    padding: .25em 0;
    border-top: 1px solid var(--links);
    /* yes, you can use variables in multi-value rules like this!*/
    margin: -5em 2.25em 2em;
    /* by using a negative top margin the footer will appear inside the section even though it's not. note the generous bottom padding on the sections */
    width: 75%;
}
footer a{
    text-decoration: underline
}
/* the footer doesn't have any target rules, so it just shows up and is always underneath whaatever section is visible. and you only need to write it out once! */

/* text styles -------------------------------------------- */

h2 {
    font-size: 2.5em;
    font-weight: 700;
    margin-bottom: .5em;
    letter-spacing: -0.03em;
    /* css will let you get very particular with your typography. which is not necessary at all but i appreciate, as a dork */
}

h3 {
    font-style: italic;
    font-weight: 400;
    font-size: 1.75em;
    margin-top: 0.75em;
    /* when you define a new font-size for something, the "em" unit becomes that size for everything related to that element */
    margin-bottom: .25em;
    letter-spacing: +0.03 em;
}

h4 {
    font-size: 1.75em;
    font-weight: 100;
    margin-top: 0.75em;
    /* when you define a new font-size for something, the "em" unit becomes that size for everything related to that element */
    margin-bottom: .25em;
    letter-spacing: +0.03 em;
    text-decoration: underline;
}
/* there are 5 or 6 different h's (headings) and they can all be styled differently. it's a good idea to use them in descending order of importance */

p {
    /* "p" is for paragraphs */
    font-size: 1em;
    letter-spacing: 0.02em;
    width: min(75ch, 90vw);
    /* ok im doing a few things here. "min" lets you list several values and the computer will use the smaller one, "ch" is a unit equal to one letter, so paragraphs will never be wider than 60 letters. a lot of web typesetting is too wide for comfortable reading. imo 60ch is about the maximum. a "vw" is a unit equal to 1 percent the "viewport width" (width of the screen or window). when 90% of the screen is smaller than 60 characters, paragraphs will start shrinking, to make sure they don't run off the screen. and you can say all of that in one little line!*/
    margin-bottom: 1em;
}

.footnote p{
    font-size: 0.9em;
    letter-spacing: 0.015em;
    width: min(70ch, 90vw);
    /* ok im doing a few things here. "min" lets you list several values and the computer will use the smaller one, "ch" is a unit equal to one letter, so paragraphs will never be wider than 60 letters. a lot of web typesetting is too wide for comfortable reading. imo 60ch is about the maximum. a "vw" is a unit equal to 1 percent the "viewport width" (width of the screen or window). when 90% of the screen is smaller than 60 characters, paragraphs will start shrinking, to make sure they don't run off the screen. and you can say all of that in one little line!*/
    margin-bottom: 1em;
}

.footnote i {
    font-size: 1em;
    letter-spacing: 0.015em;
    width: min(60ch, 90vw);
    /* ok im doing a few things here. "min" lets you list several values and the computer will use the smaller one, "ch" is a unit equal to one letter, so paragraphs will never be wider than 60 letters. a lot of web typesetting is too wide for comfortable reading. imo 60ch is about the maximum. a "vw" is a unit equal to 1 percent the "viewport width" (width of the screen or window). when 90% of the screen is smaller than 60 characters, paragraphs will start shrinking, to make sure they don't run off the screen. and you can say all of that in one little line!*/
    margin-bottom: 1em;
    font-style: italic;
}

p a{
    text-decoration-color: var(--links);
}

li {
  font-size: 1em;
  letter-spacing: 0.02em;
  width: min(60ch, 90vw);
  /* ok im doing a few things here. "min" lets you list several values and the computer will use the smaller one, "ch" is a unit equal to one letter, so paragraphs will never be wider than 60 letters. a lot of web typesetting is too wide for comfortable reading. imo 60ch is about the maximum. a "vw" is a unit equal to 1 percent the "viewport width" (width of the screen or window). when 90% of the screen is smaller than 60 characters, paragraphs will start shrinking, to make sure they don't run off the screen. and you can say all of that in one little line!*/
  margin-bottom: 1em;
}

ul > li {
    margin-left: 5ch;
}
/* "p [space] a" applies to all links (a) inside paragraphs (p). this trick works with any pair of elements */

/* keep in mind that because i already styled all "a"s up top, these rules will apply after and over those. the computer is just reading the document top-to-bottom and styling as it goes */

span.mono {
    font-family: monospace;
    font-size: 0.9em;
    color: var(--mono);
    white-space: nowrap;
    background-color: var(--monobg);
    padding: 1px;
    border-radius: 4px;
}
/* a "span" lets you sort of highlight some text and make it look different without breaking the flow of text. the period tells the computer what class of span to apply this rule to */

div.inline {
    width: 36em;
    max-width: 90vw;
    margin-bottom: 2em;
    margin-top: 2em;
}
/* this gives embedded stuff about the same width + spacing as paragraphs when it's inside a div with the "inline" class. a div is just an all-purpose box for building and organizing with */

.inline p{
    font-size: 0.8em;
    color: var(--links);
    font-style: italic;
}
/* this makes text inside an "inline" div read as a caption. skipping an element type and just typing the .class will style any item with that class */

img{
    width: 100%;
    height: auto;
}
/* images like to kind of go wild if you don't tell them what size to be. the default is 1:1 pixel size i think? which is almost always too big */

.media-row {
  display: grid;
  grid-template-columns: repeat(10, 17%);
}

.media-row img:hover {
  width: 105%;
  z-index: 2;
}

.row {
  display: flex;
}

.column {
  float: left;
  width: 50%;
  margin: 10px
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.column p{
  width: min(40ch, 90vw);
}

/* phone styling -------------------------------------------- */
@media only screen and (max-width: 680px) {
    html{
        width: 100vw;
        /* vw is a very handy unit that also, like most CSS, works great 99% of the time and then for 1 in 100 devices (iphones) breaks in an insane way that wrecks your site. ah well */
        overflow-x: hidden;
        /* this is a cheap trick to get rid of the horizontal scrollbar on narrow screens. of course this makes anything running off the page impossible to look at, so be careful*/
    }
    body {
        font-size: 16px;
        line-height: 1.6;
        width: 100vw;
    }
    /* some people will tell you to design your website "mobile-first" and then make the wide version second. i disagree but i hate designing for phones */

    header {
        padding: 1em;
        position: fixed;
        background: var(--sectionbg);
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.6);
    }
    /*header h1{
        display: none;
    }*/
    section{
        padding: 6em 1em 5em 1em;
    }
    nav{
        white-space: nowrap;
        font-size: 0.8;
    }
    nav a:not(:last-of-type) {
        margin-right: 0em;
    }
    footer{
        margin: -4.5em 1em 2em;
        /* by using a negative top margin the footer will appear inside the section even though it's not. note the generous bottom padding on the sections */
        width: 90vw;
    }
}
/* media rules basically let you write a whole extra set of CSS styles that kick in based on something about the user's device (screen size, orientation, etc). they include stuff like high-contrast and screen-reader use cases, so use them whenever possible */