@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

/* basic rules for whole site. the asterisk selects all elements */
* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*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: #000000;
    --pagebg: #ffffff;
    --sectionbg: #ffffff;
    --links: #666666;
    --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);
} */
/* 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: 20px;
    /* defining a font size here determines the size of an em (see "bonus") */
    font-family: "Public Sans", "Inter", sans-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: 0;
    margin-top: -1em;
    /* 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! */
    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 */
    background: url(img/bg.png) no-repeat center right fixed;
    background-size: cover;
}

header {
    padding: 3em 2em 1em 2em;
    /* when you do padding or margin in one line like this it goes top-right-bottom-left */
    display: flex;
    align-items: center;
    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 gates! */
}

a {
    /* "a" is for links which is wack imo */
    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 */
}

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: 6em 2em 5em;
    /* the reason for padding instead of margin here is because anchor links automatically scroll to the top edge of the target. padding = inside, margin = outside */

    /* the next six lines are really important. but maybe see what happens if you change them anyway */
    display: none;
    top: 0;
    width: 100%;
    /* "vh" and "vw" are useful units that equal one percent of the "viewport" width or height. so 100vh is 100% as tall as the screen. like most css, this works most of the time on most devices and then will break in an insane way 1 in 100 times */
}

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);
    margin: -1em 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: 50%;
    display: flex;
    align-items: center;
    height: 64px;
}
/* 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-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: .5em;
    letter-spacing: -0.03 em;
}
/* 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;
    max-width: 70ch;
    /*this limits the line length of paragraphs to 60 characters long. paragraphs on the web are generally too wide for comfortable reading. this is about the maximum i would go */
    margin-bottom: 1em;
}

p a{
    text-decoration-color: var(--links);
}
/* "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: auto;
    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 */

.turbine {
    transform-origin: center;
    z-index: -99;
    width:  40px;
    height: 40px;
    animation: rotation 10s infinite linear;
    margin-right: 1em;
}

/* .project {
    margin-bottom: 1em;
}
    */

.project p {
    margin-bottom: 0;
}

.project-thumb {
    width: 100%;
    max-height: 60px;
    cursor: pointer;
    object-fit: cover;
    border-radius: 3px;
    filter: saturate(0%) invert(1);
    transition: 0.2s;
    transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
    border: 1px solid white;
}

.project-thumb:hover {
    filter: none;
    border: 1px solid transparent;
    transition: 0.2s;
    transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

.project-gallery {
    display: flex;
    gap: 0.5em;
}

.project-divider {
    /* border-top: 1px solid rgb(204, 204, 204);  */
    margin-top: 1.5em; 
    margin-bottom: 1.5em;
}

/* phone styling -------------------------------------------- */
@media only screen and (max-width: 680px) {
    body {
        font-size: 16px;
        line-height: 1.6;
    }
    /* 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 1em 1em;
    }
    nav{
        white-space: nowrap;
        font-size: 0.8;
    }
    nav a:not(:last-of-type) {
        margin-right: 0em;
    }
}
/* 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 */