/* Padding on mobile is good 
   padding around paragraphs could be a little more  */
  
  
   
a {
    font-variant-caps: normal;
  }
  
  h3 {
    text-align: center;
    font-variant-caps: small-caps;
    font-weight: bold;
  }
  
  .landcraft article section h2 {
    border-bottom-color: red;
  }
  
  section {
    margin-bottom: 2em;
  }
  
  figure {
    padding-bottom: 3em;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }
  
  img {
    max-height: 90vh;
  }
  
  figcaption {
    text-align: center;
  }
  
  
  /* BASIC TEXT FILE */
  
  /* GOAL: to get up a text-based blogpost asap, with an elegant and traditional look */
  
  * {
    box-sizing: border-box;
  }
  
  body {
    background-image: url(./colorful-disco-dance-floor-with-disco-floor-lights_835690-169-1486063391.jpg);
    background-attachment: fixed;
    background-size: cover;
    font-family: "Baskervville", serif;
    line-height: 1.5;
    font-size: 1rem;
  }
  
  article {
  
    max-width: 90ch;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3rem;
    ;
    padding-bottom: 1rem;
  }
  
  section {
      padding: 1.5rem;
      background-color:#d3cba3;
      padding-bottom: 1.5em;
  }
  
  section:last-of-type {
    padding-bottom: 0;
    margin-bottom: 0;
  }
  
  
  /* TEXT TYPES */
  
  
  section h1, article h1 {
    font-size: 3rem;
    font-family: "Orelega One", serif;
    text-wrap:balance;
    line-height: 2.5rem;
    text-align: center;
  }
  
  h1, h2 {
    color: #1c1b1b;
  }
  h2, h3 {
    font-size: 1.5em;
    text-align: center;
    display: block;
    margin-bottom: 1.5em;
    border-bottom: double purple 0.5rem;
    font-family: "Orelega One", serif;
  }
  
  h3 {
    border-bottom: double rgb(255, 106, 0) 0.5rem;
  }

  blockquote {
    font-family: monospace;
  }

  ul {
    list-style-type: '◆ ';
  }
  
  li {
    margin-bottom: 8px;
  }
  
  
  img {
    max-width:100%;
  }
  
  
  a {
    color: rgb(0, 86, 0);
    text-decoration: underline dotted; 
  }
  
  
  /* Blockquotes */
  
  blockquote p {
    font-family: 'Libre Baskerville';
    font-size: 0.8em;
  }
  
  blockquote cite {
    font-weight: bold;
    text-align: right;
    margin-top: 0.5em;
  }
  
  blockquote, ul, ol {
    margin: 2.5em;
  }
  
  /* Attractive Quotes */
  
  q::before {
    content: "‘"
  }
  
  q::after {
    content: "’"
  }
  
  q {
    font-style: italic;
  }
  
    /* Title of a book or film */
  
  q-t, cite {
    font-variant-caps: small-caps;
  }
  
  p {
    text-indent: 1em;
  }
  
  
  .doms {
    display: block;
    font-style: normal;
    font-size: 2rem;
    text-align: center;
  }
  
  /* 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;
  }
  */
  
  
  
  /* Admonitions */
  
  /* from http://boundedinfinity.github.io/2017/09/admonitions-in-css/ */
  
  aside {
    display: block;
    padding: 15px;
    margin: 2em;
    border-left: 10px solid transparent;
  }
  
  aside h4 {
    margin: 0;
    text-transform: uppercase;
    padding-left: 3px;
    border: 1px solid;
    border-style: hidden hidden solid;
  }
  
  aside 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;
  }
  */
  
  
  
  img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 90vh;
    width: auto;
    }
  
    figcaption {
    text-align: center;
    }
  
  
    .redact {
      display: none;
    }
  
    .listen {
      display: block;
      text-align: center;
      font-size: 1.8rem;
      font-weight: bold;
      font-family: "Lobster";
      text-decoration: none;
    } 

    .listen, .listen:visited {
      color: rgb(107, 36, 10);
    }

    .listen:before {
      content: "🎵 "
    }

    .listen:after {
      content: " 🎵"
    }

  /*wikipedia style nav boxes */
  
    .nav {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      border-top: double black 5px;
      list-style: upper-roman;   
      margin: 0;
      margin-top: 3rem;
      padding-top: 1rem;
    }
  
    .nav li {
      margin-inline: 1.2rem;
    }
  
  
    .nav a, .nav a:visited {
      color: black;
    }
  
  
    .walking {
      background-color: rgb(30, 126, 30);
    }
  
  
    .disco {
      background-color: black;
    }
  
    
  
    .disco h2 {
      border-bottom: black dotted 5px; 
    }
  
    .links {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding-inline: 3rem;
      font-size: 1.9rem;
    }
  
    a.go-back {
      display: block;
      text-align: center;
      font-size: 3rem;
      font-family: "Lobster";
      color: purple;
      text-decoration: none ;
    }
  
    .divider {
	content:"";
	border-bottom: 1rem purple double;
	width: 80%;
	margin-inline: auto;
  }
    
  n-q::before {
    content: "‘"
  }
  
  n-q::after {
    content: "’"
  }
  
      .em {
          font-weight: bold;
      }


sub {
  display: block;
  text-indent: 1rem;
}

/* ALBUM DISPLAY */
.grid {
--min: 25ch;
--gap: 1rem;

display: grid;
margin-left: auto;
margin-right: auto;
font-family: 'Crete Round';

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

.grid h2 {
background-color: rgb(231, 228, 224);
width: 100%;
margin: 0;
padding: 0;
padding-left: 0.2rem;
}

.grid a, .grid a:visited {
text-decoration: none;
color: inherit
}

.card {
--img-ratio: 1/1;
max-width: 30;
display: flex;
flex-direction: column;
/* Supported for flexbox in modern browsers since April 2021 */
aspect-ratio: 1/1;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
border-radius: 0.5rem;
background-size: cover;
position: relative;
}

.card h2 {
position: absolute;
max-width: fit-content;
padding-right: 0.2rem;
z-index: 1;
}

.card img {
aspect-ratio: 1/1;
position: relative;
width: 100%;
}

.card:hover {
cursor: grab; 
transform: scale(1.2);
z-index: 2;
}

  .card ol {
    padding: 0;
    margin-top: 0;
    margin-left: 1rem;
    margin-right: 0;
    line-height: 1rem;
  }

  .index:hover {
    transform: none;
  }

  .index {
    box-shadow: none;
  }

  dt {
    font-family: "Orelega One", serif;
    padding-bottom: 0.5rem;
  }

  dd {
    padding-bottom: 0.8rem;
  }

  .n {
    font-family: "Orelega One", serif;
  }