@import url(https://fonts.bunny.net/css?family=bellefair:400);
@import url('https://fonts.cdnfonts.com/css/east-bouvent');

:root{
    --body-font: 'Bellefair', serif;
    --heading-font: 'East Bouvent', var(--body-font);
    --unown-font: 'Unown', var(--body-font);
    --blue: hsl(229, 49%, 47%);
    --red: hsl(5, 51%, 44%);
    --green: hsl(187, 75%, 24%);
    --black2: hsl(221, 56%, 9%);
    --black: hsl(221, 48%, 16%);
    --white: hsl(226, 18%, 82%);
}

body{
    background-image: url("./assets/entei.png"), url("./assets/moon02.png");
        background-position: bottom left;
        background-attachment: fixed;
        background-repeat: no-repeat, repeat;
        background-size: auto 90vh, auto;
        background-color: var(--black2);
    font-family: var(--body-font);
    font-size: calc(0.77vw + 0.5em);
    color: var(--black2);
    text-align: center;
    line-height: 1.2;
  cursor: url("./assets/cur/entei_normal.png"), auto;
}

a, button{
  cursor: url("./assets/cur/entei_link.png"), auto;
}

ul, ol{
  margin: 1em auto;
  max-width: 44ch;
}

li{
  text-align: left;
  margin-top: 0.33em;
  margin-bottom: 0.66em;
}

.unown{
  font-family: var(--unown-font);
  text-transform: uppercase;
  word-spacing: 1rem;
  font-size: 1.5em;
  text-shadow: 
    0.02em 0.02em hsla(242, 36%, 19%, 0.7), 
    -0.55em -0.22em hsla(242, 36%, 19%, 0.33),
    1.22em 0.44em hsla(242, 36%, 19%, 0.36);
}

.unown:is(:hover, :focus){
  font-family: var(--body-font);
  cursor: grab;
}

header .unown{
  opacity: 0.66;
}

nav{
  margin: 2em auto 1em auto;
  text-shadow: 1px 1px 1px rgba(62, 83, 179, 0.5);
  font-size: 1.1em;
  font-variant: small-caps;
  font-weight: bold;
  display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: row wrap;
    gap: 1rem;
}

h1, h2, h3, h4, th{
    color: var(--black);
    font-family: var(--heading-font);
    --stroke-width: 0.02em;
    --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.03em 0.05em 0.015em hsla(242, 36%, 19%, 0.5));
}

:is(h2, h3, h4){
  width: fit-content;
  margin: 1em auto;
}

:is(h2, h3, h4):hover{
  font-family: var(--unown-font);
  /* font-variant: small-caps; */
  cursor: grab;
}

:is(h3, h4):not(.not):hover{
  text-transform: uppercase;
}

h1{
    font-size: 5em;
    margin: 0.5em auto 0 auto;
}

h2{
    font-size: 2em;
}

h3{
    font-size: 1.55em;
}

#holdme{
    display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        flex-flow: column;
    padding: 1em;
    @media (orientation: portrait) {
      align-items: center;;
      justify-content: center;
    }
}

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

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

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

.rune{
  margin-bottom: 1em;
  align-self: center;
}

.rune:last-child{
  margin: 2em 0 0 0;
}

.rune{ 
  img{
    width: calc(100svw / 35);
    animation: float 1.8s ease-in-out infinite alternate;
  }

  img:nth-of-type(6n + 2){
    animation-name: float3;
    animation-duration: 1.9s;
  }

  img:nth-of-type(2){
    animation-direction: alternate-reverse;
    animation-duration: 1.75s;
    animation-name: float4;
  }

  img:nth-of-type(4n + 1){
    animation-direction: alternate-reverse;
  }

  img:nth-of-type(5n), img:nth-of-type(2n + 1){
    animation-duration: 2s;
  }

  img:nth-of-type(3n), span:is(:nth-of-type(2),:nth-of-type(4)) img:nth-of-type(2){
    animation-name: float2;
    animation-duration: 1.95s;
  }

  span:is(:nth-of-type(2n)) img:first-child{
    animation-direction: alternate;
    animation-duration: 2.22s;
  }
}

@keyframes float {
  from{transform: translateY(-0.55rem);}

  to{transform: translateY(0.6rem);}
}

@keyframes float2 {
  from{transform: translateY(-0.6rem);}

  to{transform: translateY(0.55rem);}
}

@keyframes float3 {
  from{transform: translateY(-0.55rem);}

  to{transform: translateY(0.5rem);}
}

@keyframes float4 {
  from{transform: translateY(-0.45rem);}

  to{transform: translateY(0.5rem);}
}

.rune :is(img, span){
  display: inline-block;
}

.rune span{
  margin-right: 2ch;
}

main{
  mask-image: url("./assets/mask.png");
  mask-repeat: no-repeat;
  mask-size: 100% 99%;
    background-color: hsla(221, 48%, 89%, 0.88);
    background-image: url("./assets/moonwhite.png");
    padding: 1em 5.5em 2em 5em;
    text-shadow: 0 0 2px rgba(62, 83, 179, 0.5);
    width: 60svw;
    @media (orientation: portrait) {
      <p>"You better be as funny as the legends told." <span class="quote">&mdash;&emsp; A friend of a friend, upon meeting me for the first time</span></p>
      width: 90svw;
    }
    box-sizing: border-box;

    > *:not(h1, h2, h3, h4, nav){
        filter: drop-shadow(0.044em 0.077em hsla(242, 36%, 19%, 0.5));
    }
}

/* codes */

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

footer{
  font-size: 0.88em;
    margin: 2em auto 5em auto;
}

#stats{
  line-height: 2;
  margin: 1em auto;

  tbody{
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
  }

  th{
    font-family: var(--unown-font);
    font-size: 1.5em;
    padding: 0 1rem;
    transform: translateY(-0.25rem);
    text-transform: uppercase;
    letter-spacing: 0.1rem;
  }

  th:is(:hover, :focus){
    font-family: var(--heading-font);
    letter-spacing: 0.25rem;
    cursor: grab;
    text-transform: none;
    padding: 0 2.5rem;
  }

  td{
    padding-right: 1ch;
  }
}

/* members list */

ul#members{
    list-style: none;
    line-height: 1.6;

    li{

        b{
            font-size: 1.1em;
        }
    }

    li::before{
        content: "";
        height: 2em;
        width: 2em;
        display: inline-block;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-image: url("./assets/230.png");
        transform: translateY(1ch);
    }

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

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

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

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

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

    li div{

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