@font-face {
  font-family: Baskervville;
  src: url("/fonts/Baskervville-Regular.woff2") format("woff2");
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Baskervville;
  src: url("/fonts/Baskervville-Italic.woff2") format("woff2");
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: plex;
  src: url("/fonts/IBMPlexSans-Light-Latin1.woff2") format("woff2");
  font-style: normal;
  font-display: swap;
}

body {
  background: url("/img/background-02.jpg");
  background-attachment: fixed;
  object-fit: cover;
}

img {
  background: transparent;
}

a {
  text-decoration: none;
  padding: 0 0.1em 0.1em 0;
}

a:hover {
  color: #fc3e22;
}

a:link {
  color: #39ff25;
}

a:visited {
  color: #8b1699;
}

@media (min-width: 481px) {
    .reader {
        position: absolute;
        /* background-color: #f33; */
        background: transparent;
        /* background-color: rgba(0, 0, 0, 0); */
        text-align: right;
        opacity: 0.75;
        top: 15%;
        left: 60%;
    }
}


@media (hover: hover) {
    .reader:hover {
        /* z-index: 50; */
        opacity: 0.95;
        cursor: move;
        cursor: -moz-move;
        cursor: -webkit-move;
    }
}

.inactive {
  opacity: 0.55;
  top: 13%;
  left: 65%;
}

@media (hover: hover) {
    .inactive:hover {
        /* z-index: 50; */
        opacity: 0.5;
        filter: grayscale(90%);
    }
}

.reader .caption {
  /* position: relative; */
  font-family: baskervville, sans-serif;
  font-style: italic;
  font-size: 2rem;
  /* background-color: rgba(0, 250, 0, 0.1); */
  white-space: nowrap;
  background-color: #7095b2;
}


#info-2 {
  position: sticky;
  padding: 0.5rem;
  padding-left: 1.5rem;
  z-index: 0;
  max-width: 23rem;
  font-family: plex, sans-serif;
  font-style: normal;
  font-size: 0.9em;
  line-height: 1.1;
  rotate: -1deg;
}

h1 {
  font-family: baskervville, sans-serif;
  font-style: italic;
  font-size: 6.5rem;
  rotate: -1deg;
}

h2 {
  font-family: baskervville, sans-serif;
  font-style: italic;
  font-size: 2.5rem;
  line-height: 1.5;
  rotate: 2deg;
}




@media (min-width: 481px) {

    #info {
        position: sticky;
        padding: 0.5rem;
        z-index: 0;
    }

    #info-2 {
        margin-block-end: 0;
    }

    h1,
    h2 {
        margin-inline: 0;
    }

    #d1 {
        max-width: 175px;
        height: 124px;
        rotate: 3deg;
        z-index: 1;
        -webkit-box-shadow: 0 0 11px 20px rgba(100, 30, 90, 0.1);
        box-shadow: 0 0 11px 20px rgba(100, 30, 90, 0.1);
        background-color: transparent;
    }

    #d2 {
        width: 175px;
        height: 124px;
        rotate: 1deg;
        z-index: 2;
        -webkit-box-shadow: 50px 50px 50px 50px;
        /* rgba(255, 111, 33, 0.5); */
        box-shadow: 50px 50px 50px 50px;
        /* rgba(255, 111, 33, 0.5); */
        background-color: transparent;
    }

    #d3 {
        width: 175px;
        height: 124px;
        rotate: -1deg;
        z-index: 3;
        -webkit-box-shadow: 20px 20px 45px 11px rgba(132, 154, 197, 0.5);
        box-shadow: 20px 20px 45px 11px rgba(132, 154, 197, 0.5);
        background-color: transparent;
    }

    #d4 {
        width: 175px;
        height: 124px;
        rotate: -3deg;
        z-index: 4;
        text-align: right;
        /* -webkit-box-shadow: 2px 2px 5px 11px #666; */
        /* box-shadow: 2px 2px 5px 11px #666; */
        background-color: transparent;
    }

    #d5 {
        width: 175px;
        height: 124px;
        rotate: -2deg;
        z-index: 5;
        /* box-shadow: 10px 10px 5px 20px rgba(90, 80, 30, 0.5); */
        background-color: transparent;
    }

    #d6 {
        width: 175px;
        height: 124px;
        rotate: -2deg;
        z-index: 5;
        /* box-shadow: 10px 10px 5px 20px rgba(90, 80, 30, 0.5); */
        background-color: transparent;
    }

    #d7 {
        width: 175px;
        height: 124px;
        rotate: -2deg;
        z-index: 5;
        /* box-shadow: 10px 10px 5px 20px rgba(90, 80, 30, 0.5); */
        background-color: transparent;
    }

    #d8 {
        width: 175px;
        height: 124px;
        rotate: -2deg;
        z-index: 5;
        /* box-shadow: 10px 10px 5px 20px rgba(90, 80, 30, 0.5); */
        background-color: transparent;
    }

    #d9 {
        width: 175px;
        height: 124px;
        rotate: -2deg;
        z-index: 9;
        /* box-shadow: 10px 10px 5px 20px rgba(90, 80, 30, 0.5); */
        background-color: transparent;
    }

    #d10 {
        width: 175px;
        height: 124px;
        rotate: 3deg;
        z-index: 10;
        /* -webkit-box-shadow: 0px 0px 11px 20px rgba(100, 30, 90, 0.1); */
        /* box-shadow: 0px 0px 11px 20px rgba(100, 30, 90, 0.1); */
        background-color: transparent;
    }

    #d11 {
        width: 175px;
        height: 124px;
        rotate: -2deg;
        z-index: 11;
        /* -webkit-box-shadow: 0px 0px 11px 20px rgba(100, 30, 90, 0.1); */
        /* box-shadow: 0px 0px 11px 20px rgba(100, 30, 90, 0.1); */
        background-color: transparent;
    }

    #d12 {
        width: 175px;
        height: 124px;
        rotate: -1deg;
        z-index: 12;
        /* -webkit-box-shadow: 0px 0px 11px 20px rgba(100, 30, 90, 0.1); */
        /* box-shadow: 0px 0px 11px 20px rgba(100, 30, 90, 0.1); */
        background-color: transparent;
    }

    #d13 {
        width: 175px;
        height: 124px;
        rotate: 2deg;
        z-index: 13;
        /* -webkit-box-shadow: 0px 0px 11px 20px rgba(100, 30, 90, 0.1); */
        /* box-shadow: 0px 0px 11px 20px rgba(100, 30, 90, 0.1); */
        background-color: transparent;
    }

    #d14 {
        width: 175px;
        height: 124px;
        rotate: 1deg;
        z-index: 14;
        /* -webkit-box-shadow: 0px 0px 11px 20px rgba(100, 30, 90, 0.1); */
        /* box-shadow: 0px 0px 11px 20px rgba(100, 30, 90, 0.1); */
        background-color: transparent;
    }

    #d15 {
        width: 175px;
        height: 124px;
        rotate: 2deg;
        z-index: 15;
        /* -webkit-box-shadow: 0px 0px 11px 20px rgba(100, 30, 90, 0.1); */
        /* box-shadow: 0px 0px 11px 20px rgba(100, 30, 90, 0.1); */
        background-color: transparent;
    }

    #d16 {
        width: 175px;
        height: 124px;
        rotate: -1deg;
        z-index: 16;
        /* -webkit-box-shadow: 0px 0px 11px 20px rgba(100, 30, 90, 0.1); */
        /* box-shadow: 0px 0px 11px 20px rgba(100, 30, 90, 0.1); */
        background-color: transparent;
    }

    #d17 {
        width: 175px;
        height: 124px;
        rotate: 3deg;
        z-index: 17;
        /* -webkit-box-shadow: 0px 0px 11px 20px rgba(100, 30, 90, 0.1); */
        /* box-shadow: 0px 0px 11px 20px rgba(100, 30, 90, 0.1); */
        background-color: transparent;
    }

    #d18 {
        width: 175px;
        height: 124px;
        rotate: -1deg;
        z-index: 18;
        /* -webkit-box-shadow: 0px 0px 11px 20px rgba(100, 30, 90, 0.4); */
        /* box-shadow: 0px 0px 11px 20px rgba(100, 30, 90, 0.4); */
        background-color: transparent;
    }

    #d19 {
        width: 175px;
        height: 124px;
        rotate: -2deg;
        z-index: 19;
        /* -webkit-box-shadow: 0px 0px 11px 20px rgba(100, 30, 90, 0.1); */
        /* box-shadow: 0px 0px 11px 20px rgba(100, 30, 90, 0.1); */
        background-color: transparent;
    }

    #d20 {
        width: 175px;
        height: 124px;
        rotate: -2deg;
        z-index: 19;
        /* -webkit-box-shadow: 0px 0px 11px 20px rgba(100, 30, 90, 0.1); */
        /* box-shadow: 0px 0px 11px 20px rgba(100, 30, 90, 0.1); */
        background-color: transparent;
    }

    #d21 {
        width: 175px;
        height: 124px;
        rotate: -2deg;
        z-index: 19;
        /* -webkit-box-shadow: 0px 0px 11px 20px rgba(100, 30, 90, 0.1); */
        /* box-shadow: 0px 0px 11px 20px rgba(100, 30, 90, 0.1); */
        background-color: transparent;
    }

    #d22 {
        width: 175px;
        height: 124px;
        rotate: -2deg;
        z-index: 19;
        /* -webkit-box-shadow: 0px 0px 11px 20px rgba(100, 30, 90, 0.1); */
        /* box-shadow: 0px 0px 11px 20px rgba(100, 30, 90, 0.1); */
        background-color: transparent;
    }


}