* {
    margin: 0;
    cursor: url("/graphics/cursor/letter_wings.png"), auto;
  }

  alagard {
    font-family: "CustomFont";
    src: url("https://lostletters.neocities.org/fonts/alagard.woff") format("wofff");
  }
  
  ol {
    list-style: decimal inside;
    margin: 0.2em 0 0px -0.5em;
  }
  
  ul {
    list-style: square inside;
    margin: 0 0 0 -1em;
  }

  ol {
    margin: 0 0 0 -1em;
  }
  
  p {
    display: block;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    margin-bottom: 5px;
  }

  #webmentions img {
    max-height: 1.2em; 
    margin-right: -1ex; 
  }
  
  /* ------- Text Customization ------- */
  h1 {
    font-family: 'alagard', Arial, sans-serif;
    font-weight:normal;
    font-style:normal;
    padding: 9px 0 13px 0;
  }

  .welcome {
    font-weight: normal;
  }
  
  h2{
    font: 1.5em 'Spectral', sans-serif;
    text-shadow: -1px 0 #9c5a3c, 0 1px #9c5a3c, 1px 0 #9c5a3c, 0 -1px #9c5a3c, -2px 1px 2px #ffdfe3, -2px 1px 2px #fff9bd;
    text-transform: lowercase;
    padding-bottom: 0.4em;
  }
  
  strong, b {
      color: #a47074;
      font-weight: bold;
  }
  
  a {
      color: #c09dba;
      font-weight: bold;
      text-decoration: none;
      cursor: pointer;
  }
  
  a:hover {
      color: #9C5A3C;
      background-image: url(graphics/layout/v1_laceletter/twinkle.gif);
      font-weight: bold;
      text-decoration: none;
  }
  
  /* ------- Body stuff ------- */
  body {
    background: url('graphics/layout/v1_laceletter/bg.gif');
    background-color: #ffffff;
    color: #c49dba;
    font: .9em 'Spectral', sans-serif;
    line-height: 2em;
  }
  
  .banner {
    height: 110px; 
    opacity:1.0;
    background: url('graphics/layout/v1_laceletter/topfrill.gif') repeat-x left top; 
    width:100%;
    position:fixed;
    z-index:9999}
  
  /**
   * credit to https://foollovers.com/mat/t-frame17.html
   * @media queries for responsive layout
   */
  .box17 {
    margin: 1em 0;
    position: relative;
  }
  @media (max-width: 430px) {
    .box17 {
      width: 332px;
    }
  }
  @media (min-width: 431px) and (max-width: 628px) {
    .box17 {
      width: 431px;
    }
  }
  @media (min-width: 629px) {
    .box17 { 
      width: 629px;
    }
  }

  .u01 { 
    background: url(graphics/layout/v1_laceletter/f-ue.gif) repeat-x; 
    height: 67px ;
    margin: 0 67px } 
  
  .s01 { 
    background: url(graphics/layout/v1_laceletter/f-sita.gif) repeat-x; 
    height: 67px ; 
    margin: 0 67px } 
  
  .box-top { 
    background-image: url(graphics/layout/v1_laceletter/f-kado1.gif), url(graphics/layout/v1_laceletter/f-kado2.gif); 
    background-position: top left, top right;
    background-repeat: no-repeat; 
    height: 67px } 
  
  .box-center { 
    background-image: url(graphics/layout/v1_laceletter/f-migi.gif), url(graphics/layout/v1_laceletter/f-hidari.gif); 
    background-position: top right, top left;
    background-repeat: repeat-y;
    padding: 0 67px; }
  
  .box-inner{ 
    background: #ffffff;
    padding: 0 10px;}
  
  .box-bottom { 
    background-image: url(graphics/layout/v1_laceletter/f-kado3.gif), url(graphics/layout/v1_laceletter/f-kado4.gif); 
    background-position: top left, top right;
    background-repeat: no-repeat; 
    height : 67px } 

/* navigation j's version
.nav {
  position: fixed;
  right: 20px;
  top: 120px;
  padding: 1em 1em 1.25em 1.5em;
  background: #102700;
  border-radius: 6px;
  max-height: calc(100% - 3em);
  overflow-y: auto;
  width: 162px;
}
*/

/* navigation W3School version*/
.navbar {
  overflow: hidden;
  cursor: pointer;
}

.dropbtn { 
  border: none;
  outline: none;
  color: #c09dba;
  font-size: 1em;
  padding: 6px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  cursor: pointer;
}

.navbar a:hover, .dropbtn:hover {
  background-color: #fce6e8;
  border-radius: 12px;
}

.dropdown-content {
  display: none;
  background-color: #fbf4f5;
  border-radius: 12px;
}

.dropdown-content a {
  font-weight: normal;
  padding: 3px 7px;
  text-decoration: none;
  white-space: nowrap;
  display: inline-block;
}

.dropdown-content a:hover {
  background-color: #fce6e8;
  display: inline-block;
}

.fa-caret-down:before {
  content: "▾";
}

.show {
  display: block;
  padding: 5px;
}

iframe {
  border: 0;
  display: block;
}

.hatchery {
  background-color: #fbd6da;
  border-radius: 10px;
  padding: 20px 0;
}

.hatchery-status {
  color: black;
  font-weight: bold;
}

.quilt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.quilt img {
  display: block;
}

.quilt-link {
  position: absolute;
  top: 53px;
  left: 65px;
  animation: bobbing 2s ease-in-out infinite;
  animation-direction: alternate;
}
@keyframes bobbing {
  0% {
      transform: translateY(7px);
  }
  100% {
      transform: translateY(-7px);
  }
}

/* a11y */

a.skip-main {
  left:-999px;
  position:absolute;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
  z-index:-999;
}
a.skip-main:focus, a.skip-main:active {
  color: #fff;
  background-color:#000;
  left: auto;
  top: auto;
  width: 30%;
  height: auto;
  overflow:auto;
  margin: 10px 35%;
  padding:5px;
  border-radius: 15px;
  border:4px solid yellow;
  text-align:center;
  font-size:1.2em;
  z-index:999;
}

/* themed scrollbar: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar */

::-webkit-scrollbar {
  height: 50px;
  width: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 2ex;
  -webkit-box-shadow: inset 0 0 0px rgba(100, 84, 94, 1); 
  background:rgba(100, 84, 94, 1); 
  background: linear-gradient(180deg, rgba(231, 170, 145, 1) 0%, rgba(164, 112, 116, 1)  100%);
  border: 2px solid white;
} 

/* To avoid a horizontal scrollbar from appearing due to the cursor sparkles */

html, body {
  overflow-x: hidden;
  overflow-y: overlay;
}