:root { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
    :root { font-family: 'Inter var', sans-serif; }
}
/*Used to style all pages*/
body {
    background-color: #eaeaea;
    color: #000000;
    margin:0;
    overflow-x: hidden;
    display: inline-grid;
    gap: 0;
    grid-auto-flow: column;
    grid-template-columns: auto auto;
}
a {
    color: #000000;
}
a:hover {
    color: #989898;
}
.dull {
    color: #989898;
}

/*The newspaper clippings*/
.grid-header {
    grid-row: 1;  /* SHOULD be compatible with all grid layouts where header is used*/
    grid-column-start: 1;
    grid-column-end: 3;
    margin-left:auto;
    margin-right:auto;
}
.grid-header img {
    padding: 0;
    height: var(--grid-heading-height);
    margin: 0 auto;
}
.header img {
    padding: 0;
    height: 11em;
    max-height: 18vw; /*95*(imgh/imgw)=17.84*/
    margin: 0 auto;
}

/*main page styles #info*/
#info {
    position:relative;
    margin: 0 1vh 0 1vh;
    width: fit-content;
}

h1{
    font-weight: 750;
    font-size: 500%;
    margin: 0;
}
h3{
    font-size: 170%;
    margin: 0;
}
h4{
    font-size: 100%;
    margin: 0 0 0 2.6em;
    font-weight: 400;
}
hr{
    margin: 1em 0 1em 0;
}

/*Things from photography section:*/
:root{
    --grid-gap: 2vmin;
    --grid-gap-half: 1vmin;
    --grid-font: 4vmin;
    --grid-heading-height: 12.5vmin;
}
/*Auto-wrapping feature*/
.auto-wrap {
    margin: 0 0 var(--grid-gap) 0;
    display: grid;
    gap: 0 0;
    width: fit-content;
    height: fit-content;

    /*border: dashed;*/
}
.auto-wrap-one {
    grid-row: 1;
    grid-column: 1;
    margin: 0;
    display: grid;
    gap: var(--grid-gap) var(--grid-gap);
    width: fit-content;
    height: fit-content;

    /*border: dashed red;*/
}
.auto-wrap-two {
    grid-row: 1;
    grid-column: 2;
    margin: 0;
    display: grid;
    gap: var(--grid-gap) var(--grid-gap);
    width: fit-content;
    height: fit-content;

    /*border: dashed blue;*/
}
.centre-within-auto-wrap {
    width: auto;
}
/*designed to be used with auto-wrap for when the grid should have spacing (anything but heading)*/
.spacing {
    gap: var(--grid-gap) var(--grid-gap);
}
/*for section annotations on photography main page*/
.onimage h2{
    position: absolute;
    bottom: 1vmin;
    left: 1vmin;
    margin: 0;
    padding: 0;
    color: white;
    font-size: var(--grid-font);
    font-family: Century,  serif;
}
.onimage a{
    position: relative;
}

/*allow for centering within divs*/
.centre-flex {
    display:flex;
    justify-content: center;
}
.centre-fill { /*for outer centre-flex only, without it, the div isn't going to centre anything on the screen!!*/
    width: 100vw;
}


/*for photography category pages*/
.images-area img{
    padding: var(--grid-gap-half);
}
.images-area div{
    /*basically, centre-flex:*/
    display:flex;
    justify-content: center;
}