/* 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;
}

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;
}

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

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

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

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

iframe {
    width: 100%;
}

blockquote {
    background-color: white;
    width: 50%;
}

.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, 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;
}

.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) {
}
*/