/*copied from the Uploaded - don't touch (/
    /* BASIC TEXT FILE */
    
    /* GOAL: to get up a text-based blogpost asap, with an elegant and traditional look */
    
    * {
        box-sizing: border-box;
      }
    
      body {
        line-height: 1.5;
      }
    
      article {
        max-width: 90ch;
        margin-left: auto;
        margin-right: auto;
        padding:15px;
      }
    
      section {
        padding-bottom: 1.5em;
      }
    
      p {
        padding-inline: 1em;
        text-align: justify;
        text-indent: 1em;
      }
    
      /* TEXT TYPES */
    
      h3, h4, h5, h6 {
        font-family: "Headland One", Times, serif;
        font-weight: normal;
      }
    
      section h1, h1 {
        font-size: 3em;
      }
    
      h2 {
        text-align: center;
        display: block;
        margin-bottom: 1.5em;
        
      }

      summary {
        cursor: pointer;
      }
    
      h4 {
        font-size: 1.25em;
        font-variant-caps: small-caps;
      }
    
      ul {
        list-style-type: '◆ ';
      }
    
      li {
        margin-bottom: 8px;
      }
    
    
      img, figure {
        max-width:60ch;
        margin-left: auto;
        margin-right: auto;
    
      }
    
      img {
        display: block;
      }
    
      a {
        font-variant-caps: small-caps;
        color: inherit;
      }
    
      dl {
          max-width:60ch;
          margin-left: auto;
          margin-right: auto;
      }
    
      /* album grid */

      .smol-css-grid {
        --min: 20ch;
        --gap: 1rem;
      
        display: grid;
        grid-gap: var(--gap);
        /* min() with 100% prevents overflow
        in extra narrow spaces */
        grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));

        max-width: 70ch;
        margin: auto auto;
      }

      .smol-css-grid *:hover {
        transform: scale(1.1);
      }
      /* Blockquotes */
    
      blockquote {
        text-align: center;
        text-wrap: balance  ;
      }
    
      blockquote cite {
        font-weight: bold;
        text-align: right;
        margin-top: 0.5em;
      }
    
      blockquote, ul, ol {
        margin: 2.5em;
      }
    
    
      /* FANCY QUOTES */
    
      blockquote {
        border:none;
      }
    
      blockquote:before{
          content: ""; /* This is necessary for the pseudo element to work. */
          display: block; /* This will put the pseudo element on its own line. */
          margin: 0 auto; /* This will center the border. */
          width: 50%; /* Change this to whatever width you want. */
          margin-bottom: 1em;
          border-bottom: 5px double black;
      }
    
      blockquote:after {
          content: "";
          display: block;
          margin: 0 auto;
          width: 50%;
          padding-top: 1em;
          border-bottom: 5px double black;
      }
    
      /* Attractive Quotes */
    
      q::before, q-t::before {
        content: "‘"
      }
    
      q::after, q-t::after {
        content: "’"
      }
    
      q {
        font-style: italic;
      }
    
        /* Title of a book or film */
    
      cite,d-t {
        font-family: "Rokkitt";
        font-weight: bold;
        font-variant-caps: small-caps;
      }
    
    
        /* FIGURES */
        figure {
          margin-left:auto;
          margin-right:auto;
          max-width:100%;
        }
    
        figure img {
          max-height:90vh;
    
        }
    
        figcaption {
          text-align:center;
          font-style:italic;
          padding:0.5em;
        }
    
    
        img {
          display:block;
          margin-left:auto;
          margin-right:auto;
          max-width:100%;
        }
      /* Admonitions */
    
      /* from http://boundedinfinity.github.io/2017/09/admonitions-in-css/ */
    
      ad-monition {
        display: block;
        padding: 15px;
        margin-bottom: 21px;
        border-left: 10px solid transparent;
      }
    
      ad-monition h4 {
        margin: 0;
        text-transform: uppercase;
        padding-left: 3px;
        border: 1px solid;
        border-style: hidden hidden solid;
      }
    
      ad-monition p {
        padding-left: .75em;
        padding-right: .75em;
        padding-top: 0.5em;
        margin-left: 0;
        border-left: 0;
        border-top: 0;
        min-height: 0;
      }
    
      .hint {
        border-color: olive;
        background-color: #f6fffe;
      }
    
      .hint h4 {
        color: olive;
        border-color: olive;
      }
    
      .note {
        border-color: orangered;
        background-color: #fffeec;
      }
    
      .note h4 {
        color: orangered;
        border-color: orangered;
      }
    
      /*
      .tip {
        border-color: blue;
        background-color: #f6fcff;
      }
    
      .tip .title {
        color: blue;
        border-color: blue;
      }
    
    
      .important {
        border-color: red;
        background-color: #fffbfb;
      }
    
      .important .title {
        color: red;
        border-color: red;
      }
      */
    
.go-forth {
  max-width: fit-content;
  margin-inline: auto;
  font-size: 2rem;
}

.album-cover {
  display: block;
  margin-inline: auto;
  max-width: 40%;
  box-shadow: 3px 3px black;
}

.album-cover:hover {
  transform: scale(1.1);
  cursor: grab;
}

nav {
  display: flex;
  justify-content: space-between;
  padding: 2rem;
}

/* INDEX */

body.index {
  height: 100vh;
  margin: 1rem;
  background-image: url(house.jpg);
  background-size: cover;
  display: flex;
}

      /* VALJEAN */

      body.valjean {
        background-color:#313131;
        /*background-image: url("united-states-in-1950-the-prisoners-of-the-phillips-state-prison-in-buford-having-dinners-3199115898.jpg");*/
        background-image: url(0_GettyImages-3090529.avif);
        background-attachment: fixed;
        font-family: "Univers Regular";
        background-size: contain;

      }

      body.valjean h1 {  
        font-family: "Univers Bold", serif;
        font-weight: 400;
        font-style: normal;
        text-align: center;
      }

      body.valjean section {
        background-color: #d6d6d6;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
      }

      body.valjean h2 {
        font-family: "Rokkitt";
      }

      body.valjean d-t, body.valjean cite {
        font-family: "Univers Bold";
      }

      body.valjean blockquote { 
        font-family: 'Univers Condensed';
      }

      body.valjean .go-forth {
        font-family: "Univers Bold";
        font-style: italic;
        font-size: 2rem;
      }

      /* FANTINE */

      body.fantine-one {
        background-color:#313131;
        background-image: url("F.jpg");
        background-attachment: fixed;
        background-repeat: repeat;
        background-size: contain;
        font-family: monospace; 
      }

      body.fantine-one section {
        background-color: #316afb;
        border-radius: 10px;
        font-size: 1.1rem;
      }

      body.fantine-one h1, body.fantine-one h2 {
        font-family: 'Harlow Solid Italic';
        color: #fb31bd;
        text-shadow: 2px 2px black;
        text-align: center;
      }

      body.fantine-one h1 {
        padding-top: 1rem;
      }

      body.fantine-one h2 {
        font-size: 2rem;
      }

      body.fantine-one cite, body.fantine-two cite, body.fantine-one d-t {
        font-family: 'Outfit';
      }

      body.fantine-one cite, body.fantine-one d-t {
        color: white;
      }

      body.fantine-one .go-forth {
        font-family: 'Harlow Solid Italic';
        color: #fb31bd;
        text-shadow: 2px 2px black;
        font-size: 2rem;
      }

      /*FANTINE TWO */

      body.fantine-two {
        background-image: url('fantine\ wallpaper.png');
        background-attachment: fixed;
        background-size: contain;
        background-position: 110%;
        font-family: "Crimson Text";
        font-size: 1.2rem;
      }

      body.fantine-two h1 {
        text-align: center;
        font-family: "Crimson Text";
      }

    body.fantine-two section {
      box-shadow: unset;
      border-radius: 20px;
      background-color: #f8eee9;
    }


    body.fantine-two cite {
      font-style: normal;
    }

    
    body.fantine-two .go-forth {
      font-style: italic;
      font-size: 2rem;
    }
      /* MARIUS */

      body.marius {
         background-image: url("marius wallpaper.png");
         background-attachment: fixed;
         background-size: contain;

         font-family: 'Nunito', Arial, Helvetica, sans-serif;
      }

    body.marius article {
      max-width: 70ch;
    }

    body.marius section {
      box-shadow: unset;
      border-radius: 20px;
      background-color: #f8eee9;
    }

    body.marius h1, body.marius h2 {
      font-family: 'Jura';
      text-align: center;
    }

    body.marius cite, body.marius blockquote, body.marius d-t {
      font-style: unset;
      font-weight: bold;
      font-family: 'Monda';
    }
     
    body.marius .go-forth {
      font-family: 'Monda';
      font-size: 2rem;
    }

    /* PARIS */

    body.paris {
      background-image: url('paris 1996 wallpaper.png');
    }

    body.paris h1 {
      font-family: Arial, Helvetica, sans-serif;text-transform:uppercase; 
      font-weight: 700;
      font-size: 6rem;
    }
    
    body.paris sub {
      font-size: 2rem;
      padding: 0;
    }

    body.paris h2, body.paris .go-forth {
      font-family: Arial, Helvetica, sans-serif;text-transform:uppercase; 
      margin-top: 2.5rem;
    }

    /*preface */

    body.preface {
    background-image: url(house.jpg);
    background-size: cover;
      font-family: 'Univers Regular';
      color: rgb(221, 173, 27);
    }

    body.preface article {
      background-color: #ab3916eb
    }

    body.preface h1 {
      font-family: 'Homemade Apple';
      text-align: center;
    }

    .runtime::marker {
      content: ''
    } 

    .discs span {
      padding-left: 2rem;
    }

    .discs a {
      color: palegoldenrod;
    }