/* the font-family descriptor takes a single family name - a fallback
 * list here is invalid & makes the browser drop the whole @font-face
 * rule. the fallback belongs on the body rule below. */
@font-face {
    font-family: "Gidole";
    src: url('/static/font/Gidole-Regular-5faa0c05f946.otf');
}

html {
    /* chota sets 62.5% (so 1rem = 10px). gidole renders a little smaller
     * than the previous font at the same size, so scale the root up here -
     * every rem/em based size below follows, no need to touch them. */
    font-size: 67%;
    height: 100%;
    margin-top: 5vh;
    margin-bottom: 5vh;
    margin-right: 2vw;
    padding: 0;
}

body {
    margin: 0;
    font-family: "Gidole", sans-serif;
    font-weight: 400;
    font-style: normal;
    height: 100%;
}

a {
    text-decoration: underline dotted;
    /*color: #4b4b4f;*/
    /*background-color: black;
    color: white;*/
    color: black;
}
a:visited { text-decoration: none; }
a:active { text-decoration: none; }

/* not necessary to invert colours as it's
 * already clear from the position that this
 * is a link (& here the inverted colours look
 * ugly) */
.nava {
    color: black;
    background-color: white;
    text-decoration: none;
}

audio {
  max-height: 100%;
  width: 100%;
  max-width: 1000px;
  min-width: 150px;
  margin: auto;
  object-fit: contain;
}

/* doesn't work for all browsers (e.g. not for firefox), but at least style some of them */
audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-panel {
  background-color: white;
  color: white;
}

/* add extra styling support for firefox */
@supports (-moz-appearance:none) {
  audio {
    filter: grayscale(100%) invert(100%) contrast(200%);
  }
}

h1 {
  font-size: 6.5rem;
}

/* the head of a page: the breadcrumb, and - on the page of a work - the
 * year & category of that work at the other end of the same line. the
 * two ends of one line, the way the portfolio sets the head of a work.
 *
 * the two are aligned on their baseline rather than on their centre or
 * their box: the facts are set at a quarter of the size of the
 * breadcrumb, and at that difference anything but a shared baseline
 * reads as a misprint. */
.pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 2rem;
}

p {
  font-size: 2.2rem;
  text-align: justify;
  text-justify: newspaper;
  text-align-last: left;
  -ms-text-align-last: left;
  -moz-text-align-last: left;
}

img {
  margin: auto;
  display: block;
  /* every img carries its intrinsic width/height, so the browser can
   * reserve space for it before it loads. these two keep that reserved
   * box responsive instead of pinning it to the attribute pixels. */
  max-width: 100%;
  height: auto;
}

/* a documentation picture takes the measure of the text column, whatever
 * the picture it was made from happened to be.
 *
 * 'max-width' alone only ever shrinks: a source that is smaller than the
 * column (a video still, a screenshot) then stands at its own pixel
 * width & sits visibly narrower than the pictures around it - on a wide
 * display only, since on a phone the column is narrower than the picture
 * anyway, which is why this only shows there. the widths that
 * 'render/web.lua' generates are unaffected, they never upscale a source
 * & the browser still picks the sharpest one it has.
 *
 * '.img-w-25/50/75' stay in charge of the pictures they are put on: a
 * class outweighs this rule. */
figure img {
  width: 100%;
}

.img-w-75 {
    width: 75%;
}

.img-w-50 {
    width: 50%;
}

.img-w-25 {
    width: 25%;
}

.psmall, .pimgcaption, .pheadfacts, .pworkfacts, .pquotesource, blockquote p, #footnotes p {
  font-size: 1.5rem;
}

/* year & category of a work, at the right end of its breadcrumb.
 *
 * 'margin-left: auto' rather than a 'justify-content' on the head: it
 * puts the facts at the right end of the line they are on, which is the
 * breadcrumb's line while both fit, and a line of their own once the
 * column gets too narrow for the two together. a 'space-between' would
 * drop them back to the left edge in that second case, under the
 * breadcrumb, which is the arrangement this is getting away from. */
.pheadfacts {
  margin-left: auto;
  color: #5f5f5f;
}

iframe {
    width: 100%;
}

/* the measure of a quotation: how far it steps in from the text around
 * it & how wide it then is. named, because the line that says where a
 * quotation comes from has to take the very same measure - see
 * '.pquotesource' below. the indent is what the browser gives a
 * blockquote by itself & chota does not reset; stating it here only
 * makes it something both rules can reach. */
:root {
    --quote-indent: 40px;
    --quote-width: 50%;
}

blockquote {
    background-color: white;
    margin-left: var(--quote-indent);
    width: var(--quote-width);
}

/* the line that names the source of a quotation - "(excerpt from tiny
 * manifesto)" & the like. it belongs to the quotation above it rather
 * than to the page, so it stands in the measure of the quotation and
 * centres itself in that. centred across the whole column instead it
 * would sit well to the right of the quotation it names, since a
 * quotation is indented & only half as wide.
 *
 * a block, although djot writes it as a span: 'text-align' has nothing
 * to act on until the line is one. */
.pquotesource {
    display: block;
    margin-left: var(--quote-indent);
    width: var(--quote-width);
    text-align: center;
    /* the 'p' rule sets the last line of a paragraph flush left, which
     * is right for a text & wrong for a line that is nothing but its own
     * last line. */
    text-align-last: center;
}

.pimgcaption {
  text-align: center;
  text-align-last: auto;
}

.pfooter {
  font-size: 1.75rem;
  text-align: center;
  text-align-last: auto;
}

@media screen and (max-width: 599px) {
    p {
        font-size: 1.5rem;
    }

    h1 {
        font-size: 4.25rem;
    }

    .psmall, .pimgcaption, .pheadfacts, .pworkfacts, .pquotesource, blockquote p, #footnotes p {
        font-size: 1.1rem
    }

    .pfooter , pimgcaption {
        font-size: 1.6rem
    }
}

/* figure must not change its content width/padding/margin */
figure {
    max-width: 100%;
    min-width: 100%;
    padding: 0%;
    margin-left: 0%;
    margin-right: 0%;
    margin-bottom: 5rem;
    margin-top: 5rem;
}

/* prevent overlap of button and caption */
.audiodiv figcaption {
  margin-top: 2rem;
}

#main {
  max-width: 40%;
  margin: auto;
}

/* responsive for smaller displays */
@media only screen and (max-width: 700px) {
    #main {
      max-width: 97%;
    }

    #indexcontainer {
      max-width: 70%;
      margin: auto;
    }
}

@media only screen and (max-width: 860px) and (min-width: 700px) {
    #main {
      max-width: 70%;
    }
}

.workdiv {
    margin: 0%;
}

.resizable-image, .cover-image-work {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overlaycontainer_work {
  position: relative;
}

.overlaytext_work {
  color: white;
  font-size: 2.7em;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  /* a box as wide as the cover rather than as wide as its longest line:
   * the category of a work can be a handful of words & would otherwise
   * run out over both edges of the picture. */
  width: 90%;
}

/* which means the lines have to centre themselves, since the box no
 * longer shrinks around them. the 'p' rule of this sheet justifies &
 * sets the last line flush left, which is right for a text & wrong for
 * a label written across a picture. */
.overlaytext_work p {
  text-align: center;
  text-align-last: center;
  margin: 0;
}

/* year & category under the name of a work in the grid of covers. it
 * says what the work is, which the name alone does not - but the name
 * is what is being pointed at, so it stays a line of its own, smaller &
 * closer than a paragraph would be. */
.overlaytext_work p + .pworkfacts {
  margin-top: 0.5rem;
}

.overlay_work {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
}

.overlaycontainer_copyright {
  position: relative;
}

.overlaytext_copyright {
  color: white;
  font-size: 1.5em;
  position: absolute;
  top: 0%;
  left: 2%;
  text-align: left;
}

.overlay_copyright {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
}

/* hover doesn't work on touchscreen based devices e.g.
 * smartphones - therefore test if hover is supported.
 * XXX This is currently not properly fixed.
 */

/*
@media (hover: hover) { 
*/

    a:hover {
        color: grey;
    }

    .overlay_work {
      background-color: grey;
    }

    .overlaycontainer_work:hover .overlay_work {
      opacity: 0.85;
    }

    .overlaycontainer_copyright:hover .overlay_copyright {
      opacity: 1;
    }

/*
}
*/

/*
@media (hover: none) {
}
*/