/* variables */

:root{
    --black: hsl(23, 37%, 19%);
    --brown: hsl(34, 29%, 40%);
    --white: hsl(0, 0%, 100%);
    --white2: hsl(49, 100%, 95%);
    --cream: hsl(51, 96%, 82%);
    --orange: hsl(43, 92%, 76%);
    --red: hsl(354, 41%, 54%);
    --body-font: "Kosugi Maru", Tahoma, sans-serif;
    --heading-font: "Darumadrop One", var(--body-font);
}

/* main styling */

body{
    background-color: var(--cream);
    background-image: url("./assets/bg.png");
        background-position: center bottom;
        background-attachment: fixed;
        background-size: 10vw;
    font-size: calc(0.5em + 0.66svw);
    font-family: var(--body-font);
    color: var(--black);
    text-shadow: 0.05em 0.05em hsla(23, 37%, 19%, 0.25);
}

/* links */

a{
    color: var(--red);
    text-decoration: none;
}

a:is(:hover, :focus){
  color: var(--black);
}

a, a:is(:hover, :focus){
  transition: color .3s ease;
}

/* text stroke outline */

h1, nav a, th{
    --stroke-width: 0.044em;
    --stroke-color: var(--white);
      text-shadow: calc(var(--stroke-width) * 1) calc(var(--stroke-width) * 0) 0
          var(--stroke-color),
        calc(var(--stroke-width) * 0.9239) calc(var(--stroke-width) * 0.3827) 0
          var(--stroke-color),
        calc(var(--stroke-width) * 0.7071) calc(var(--stroke-width) * 0.7071) 0
          var(--stroke-color),
        calc(var(--stroke-width) * 0.3827) calc(var(--stroke-width) * 0.9239) 0
          var(--stroke-color),
        calc(var(--stroke-width) * 0) calc(var(--stroke-width) * 1) 0
          var(--stroke-color),
        calc(var(--stroke-width) * -0.3827) calc(var(--stroke-width) * 0.9239) 0
          var(--stroke-color),
        calc(var(--stroke-width) * -0.7071) calc(var(--stroke-width) * 0.7071) 0
          var(--stroke-color),
        calc(var(--stroke-width) * -0.9239) calc(var(--stroke-width) * 0.3827) 0
          var(--stroke-color),
        calc(var(--stroke-width) * -1) calc(var(--stroke-width) * 0) 0
          var(--stroke-color),
        calc(var(--stroke-width) * -0.9239) calc(var(--stroke-width) * -0.3827) 0
          var(--stroke-color),
        calc(var(--stroke-width) * -0.7071) calc(var(--stroke-width) * -0.7071) 0
          var(--stroke-color),
        calc(var(--stroke-width) * -0.3827) calc(var(--stroke-width) * -0.9239) 0
          var(--stroke-color),
        calc(var(--stroke-width) * 0) calc(var(--stroke-width) * -1) 0
          var(--stroke-color),
        calc(var(--stroke-width) * 0.3827) calc(var(--stroke-width) * -0.9239) 0
          var(--stroke-color),
        calc(var(--stroke-width) * 0.7071) calc(var(--stroke-width) * -0.7071) 0
          var(--stroke-color),
        calc(var(--stroke-width) * 0.9239) calc(var(--stroke-width) * -0.3827) 0
          var(--stroke-color);
    filter: drop-shadow(0.077em 0.077em hsla(23, 37%, 19%, 0.3));
}

/* container */

#holdme{
    margin: 2.5vh auto 5vh auto;
    background: var(--white);
    width: 50rem;
    border-radius: 0.5rem;
    border: 0.125em solid var(--brown);
    outline: 0.25em solid var(--white2);
    box-shadow: 0 0 0 0.36em var(--black);
    filter: drop-shadow(1.5vh 1.5vh 0.5vh hsla(42, 60%, 38%, 0.22));

    display: grid;
        grid-template-areas: 'header header' 'nav main' 'footer footer';
        grid-template-columns: 10em 1fr;
}

/* header banner */

header{
    border-radius: 0.33rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    grid-area: header;
    height: 34.57rem;
    background-image: url("./assets/banner.jpg");
      background-size: contain;
      background-position: center top;
    border-bottom: 0.125em solid var(--brown);
    display: flex;
        justify-background-image: flex-start;
        align-items: center;
        flex-flow: column;
    
    p{
        margin: 0 auto;
        filter: drop-shadow(0.05em 0.05em hsla(34, 58%, 29%, 0.3));
    }

    h1{
        font-size: 3.33em;
        margin: 0.125em auto;
        filter: drop-shadow(0.1em 0.1em 0.05em hsla(34, 58%, 29%, 0.3));
    }
}

/* headings */

h1, h2, h3, h4, nav, th{
  font-family: var(--heading-font);
}

h2{
  font-size: 1.75em;
  margin: 0.5em auto;
}

/* where the text goes!!! */

main{
    grid-area: main;
    padding: 1em 2em;
    background-image: url("./assets/bg02.gif");
    line-height: 1.4;
}

img{
  max-width: 100%;
}

/* codes */

#fifty img{
  margin-left: 1ch;
}

/* gallery */

#gallery{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1ch;
  flex-flow: row wrap;

  a{
    display: inline-block;
    max-width: calc(25% - 1ch);
  }

  img{
  }
}

/* statistics table thing */

#stats{
  padding: 0.5em 1em;
  /* margin: 1em auto; */
  background-color: hsla(51, 96%, 82%, 0.5);
  border-radius: 0.5em;
  text-align: center;
  float: right;
  margin-left: 1em;
  margin-bottom: 1em;
  margin-top: -3em;

  th{
    font-size: 1.11em;
  }
}

#stats, nav{
  border: 0.125em dashed var(--brown);
}

/* navigation links */

nav{
    grid-area: nav;
    background-color: var(--orange);
    background-image: url("./assets/bg03.png");
    padding: 1em;
    padding-right: 1.5em;
    background-position: center;
    line-height: 1.66;
    border-left: 0;
    border-top: 0;
    border-bottom: 0;

    img{
      margin: 1em auto 0.5em auto;
      filter: drop-shadow(0.1em 0.1em hsla(34, 58%, 29%, 0.3));
    }

    a{
        color: var(--black);
        display: block;
        font-size: 1.44em;
        font-weight: bold;
        font-variant: small-caps;
    }

    a:is(:hover, :focus){
      color: var(--red);
    }

    a::before{
        height: 1em;
        width: 1em;
        content: "";
        background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
        display: inline-block;
        margin-right: 0.75ch;
        transform: translateY(0.25ch);
        image-rendering: pixelated;
    }

    a:nth-child(6n + 1):before{
        background-image: url("./assets/a07.gif");
    }

    a:nth-child(6n + 2):before{
        background-image: url("./assets/a03.gif");
    }

    a:nth-child(6n + 3):before{
        background-image: url("./assets/a06.gif");
    }

    a:nth-child(6n + 4):before{
        background-image: url("./assets/a10.gif");
    }

    a:nth-child(6n + 5):before{
        background-image: url("./assets/a09.gif");
    }

    a:nth-child(6n):before{
        background-image: url("./assets/a05.gif");
    }
}

/* members list */

ul#members{
  list-style: none;
  padding-left: 0;

  li{
      margin-bottom: 1em;

      b{
          font-size: 1.1em;
          margin-left: -0.5ch;
          display: inline-block;
      }
  }

  li::before{
      content: "";
      height: 2em;
      width: 2em;
      display: inline-block;
      background-image: url("./assets/cat03x-w.gif");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
      transform: translate(-0.5ch, 2ch);
  }

  li:nth-of-type(5n + 1)::before{
      background-image: url("./assets/cat03x-m.gif");
  }

  li:nth-of-type(5n + 2)::before{
    background-image: url("./assets/cat03x-s.gif");
  }

  li:nth-of-type(5n + 3)::before{
      background-image: url("./assets/cat03x-b.gif");
  }

  li:nth-of-type(5n + 4)::before{
    background-image: url("./assets/cat03x-ow1.gif");
  }

  li div, li div + span{
      margin-left: 4.5ch;
  }

  li div{

      >*:not(:last-child)::after{
          content: " \2022 ";
          color: var(--black)!important;
      }
  }
}

/* footer */

footer{
    grid-area: footer;
    text-align: center;
    padding: 0.5em;
    font-size: 0.88em;
    background-color: var(--cream);
    border-top: 0.125em solid var(--brown);
    border-radius: 0.33rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}