/*..........................

		fonts and colours

..........................*/

:root{
    --body-font: "Setia Hati", sans-serif;
    --heading-font: "SolidMarker", var(--body-font);
    --table-font: "Danish Marker", var(--body-font);

    --black: hsl(300, 13%, 29%);
    --black2: hsl(300, 18%, 36%);
    --pink: hsl(343, 82%, 87%);
    --pink2: hsl(343, 82%, 83%);
    --pink3: #F491B0;
    --pink4: hsl(341, 77%, 66%);
    --blue: hsl(202, 84%, 80%);
    --aqua: #52BEEC;
    --green: hsl(113, 42%, 58%);
    --yellow: hsl(50, 100%, 65%);
    --orange: hsl(34, 96%, 60%);
    --purple: hsl(262, 55%, 72%);
    --white: #fff;
    --cream: hsl(55, 86%, 92%);
}

/*..........................

		fancy looking text!!

..........................*/

.text-outline, h1, h2, h3, h4, nav, th{
    color: var(--black2);
    --stroke-width: 0.044em;
    --stroke-color: var(--cream);
    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.075em 0.075em var(--pink2)) 
        drop-shadow(0.09em 0.09em var(--pink3));
    font-family: var(--heading-font);
    text-transform: uppercase;
}

/*..........................

		basic styling...

..........................*/

body{
    background-color: var(--pink);
    background-image: url("./assets/bg2.png");
    background-attachment: fixed;
    font-family: var(--body-font);
    font-size: calc(0.5em + 0.5vmax);
    color: var(--black);
    margin: 0;
    text-shadow: 
        0.033em 0.033em var(--pink3);
    text-align: center;
    /* cursor: url('./cursor.cur'), auto; */
}

/*..........................

		big container that barely does anything

..........................*/

#holdme{
    /* height: 100svh; */
    /* width: 100svw; */
    margin: 1em auto;
}

/*..........................

		headings!!!

..........................*/

h1, h2, h3, h4{
    letter-spacing: 0.11ch;
    margin: 0.25em auto;
    width: fit-content;
    text-align: center;
    font-weight: normal;
}

h1{
    margin: 0em auto 0.44em auto;
    padding-right: 1.33em;
    font-size: 5.55em;
    line-height: 0.75;
    color: var(--purple);
    --stroke-color: var(--black);
    --stroke-width: 0.066em;

    /* colours each letter */

    div:first-child{
        span:nth-of-type(6n + 1){
            color: var(--aqua);
        }
    
        span:nth-of-type(6n + 2){
            color: var(--yellow);
        }
    
        span:nth-of-type(6n + 3){
            color: var(--pink3);
        }
    
        span:nth-of-type(6n + 4){
            color: var(--orange);
        }
    
        span:nth-of-type(6n + 5){
            color: var(--green);
        }
    
        span:nth-of-type(6n){
            color: var(--purple);
        }
    }

    div:last-child{
        span:nth-of-type(6n + 1){
            color: var(--purple);
        }
    
        span:nth-of-type(6n + 2){
            color: var(--orange);
        }
    
        span:nth-of-type(6n + 3){
            color: var(--aqua);
        }
    
        span:nth-of-type(6n + 4){
            color: var(--yellow);
        }
    
        span:nth-of-type(6n + 5){
            color: var(--pink3);
        }
    
        span:nth-of-type(6n){
            color: var(--green);
        }
    }
}

h2{
    font-size: 2.77em;
}

h3{
    font-size: 2em;
    margin: 0.25em auto 1em auto;
}

/*..........................

		LINKIES LINKY LINKS!!!

..........................*/

a{
    color: var(--pink4);
    text-decoration: none;
    z-index: 99;
}

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

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

/*..........................

		navigational thingg

..........................*/

nav{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1em;
    margin: 0.5em auto 1em auto;
    font-size: 2em;
    padding-left: 0.5em;

    a{
        color: var(--black2);
    }

    a:is(:hover, :focus){
        font-family: var(--table-font);
    }

    a:nth-child(4n + 1):is(:hover, :focus){
        color: var(--green);
    }

    a:nth-child(4n + 2):is(:hover, :focus){
        color: var(--purple);
    }

    a:nth-child(4n + 3):is(:hover, :focus){
        color: var(--aqua);
    }

    a:nth-child(4n):is(:hover, :focus){
        color: var(--orange);
    }

    a, a:is(:hover, :focus){
        transition: none;
        /* transition: color 0.3s ease, font-size 0.3s ease; */
    }
}

/*..........................

		main page content!! yay!

..........................*/

main{
    margin: auto;
    width: 80em;

    p{
        max-width: 88ch;
        margin: 1em auto;
        line-height: 1.4;
    }
}

/*..........................

		code buttons yayayayay

..........................*/

#fifty{ 
    margin: auto;

    img{
        margin-right: 1ch;
    }
}

/*..........................

	cute images scattered about~

..........................*/

#birdies, #hanachan, #bottom{
    shape-margin: 1em;
    pointer-events: none;
}

#birdies{
    margin-top: 1em;
    height: 15em;
    float: left;
    shape-outside: url("./assets/G03.png");
}

#hanachan{
    height: 40em;
    margin-top: 1em;
    float: right;
    shape-outside: url("./assets/G01.png");
}

#bottom{
    height: 10em;
    float: left;
    shape-outside: url("./assets/G02.png");
    margin-bottom: 1em;
}


#hanachan, #birdies, #bottom, #stats{
  filter: 
      drop-shadow(0.33em 0.33em var(--pink2));
}

/*..........................

	THE FRONT PAGE TABLE!!!!

..........................*/

#stats{
    width: fit-content;
    margin: 2em 1em;
    margin-top: 0;
    float: left;

    th{
        padding: 0 3ch;
        font-family: var(--table-font);
        /* font-size: 1.5em; */
    }

    td{
        text-shadow: 
            0.033em 0.033em var(--purple);
    }
}

/*..........................

	CUTEST SCALLOP EDGE WAHHHH!!!

..........................*/

.scallop{
    --r: 1.25em; /* radius of circles */
    height: calc(320px / 1.25);
    aspect-ratio: 1;
    padding: calc(1.5*var(--r));
    background: var(--cream);
    mask: 
        linear-gradient(#000 0 0) no-repeat
        50%/calc(100% - 2*var(--r)) calc(100% - 2*var(--r)), 
        radial-gradient(farthest-side,#000 97%,#0000) 
        0 0/calc(2*var(--r)) calc(2*var(--r)) round;
    
    div{
        text-shadow: 
        0.033em 0.033em var(--orange);
    }
}

/*..........................

	    basic lists 

..........................*/

ul, ol{
    text-align: left;
    margin: 1em auto;
    width: fit-content;
    line-height: 1.33;
}

/*..........................

    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: 1.5em;
        width: 1.5em;
        display: inline-block;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-image: url("./assets/usahana-9.gif");
        transform: translate(-1ch, 2ch);
    }

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

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

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

    li:nth-of-type(5n + 4)::before{
      background-image: url("./assets/usahana-7.gif");
    }
  
    li div, li div + span{
        margin-left: 2.5ch;
    }
  
    li div{
  
        >*:not(:last-child)::after{
            content: " * ";
            color: var(--black2)!important;
        }
    }
}

/*..........................

	FINALLY! THE FOOTER!!!

..........................*/

footer{
    margin: 2em auto;
    text-align: right;
    width: 40ch;
    line-height: 1.77;

    a[href*=fanlisting]{
        float: right;
        display: block;
        margin: 1em;
    }
}

/*..........................

    double stroke TEXT SHADOW VERSION!!!

..........................*/

.double-stroke-new, h1{
    letter-spacing: 0.44ch;
    filter: 
        drop-shadow(0.055em 0.055em var(--pink2));

--stroke-width: 0.044em;
--stroke-color: var(--cream);
--stroke-color-two: var(--pink3);
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),
    
     calc(var(--stroke-width) * 1 * 2.5) calc(var(--stroke-width) * 0 * 2.5) 0
        var(--stroke-color-two),
      calc(var(--stroke-width) * 0.9239 * 2.5) calc(var(--stroke-width) * 0.3827 * 2.5) 0
        var(--stroke-color-two),
      calc(var(--stroke-width) * 0.7071 * 2.5) calc(var(--stroke-width) * 0.7071 * 2.5) 0
        var(--stroke-color-two),
      calc(var(--stroke-width) * 0.3827 * 2.5) calc(var(--stroke-width) * 0.9239 * 2.5) 0
        var(--stroke-color-two),
      calc(var(--stroke-width) * 0 * 2.5) calc(var(--stroke-width) * 1 * 2.5) 0
        var(--stroke-color-two),
      calc(var(--stroke-width) * -0.3827 * 2.5) calc(var(--stroke-width) * 0.9239 * 2.5) 0
        var(--stroke-color-two),
      calc(var(--stroke-width) * -0.7071 * 2.5) calc(var(--stroke-width) * 0.7071 * 2.5) 0
        var(--stroke-color-two),
      calc(var(--stroke-width) * -0.9239 * 2.5) calc(var(--stroke-width) * 0.3827 * 2.5) 0
        var(--stroke-color-two),
      calc(var(--stroke-width) * -1 * 2.5) calc(var(--stroke-width) * 0 * 2.5) 0
        var(--stroke-color-two),
      calc(var(--stroke-width) * -0.9239 * 2.5) calc(var(--stroke-width) * -0.3827 * 2.5) 0
        var(--stroke-color-two),
      calc(var(--stroke-width) * -0.7071 * 2.5) calc(var(--stroke-width) * -0.7071 * 2.5) 0
        var(--stroke-color-two),
      calc(var(--stroke-width) * -0.3827 * 2.5) calc(var(--stroke-width) * -0.9239 * 2.5) 0
        var(--stroke-color-two),
      calc(var(--stroke-width) * 0 * 2.5) calc(var(--stroke-width) * -1 * 2.5) 0
        var(--stroke-color-two),
      calc(var(--stroke-width) * 0.3827 * 2.5) calc(var(--stroke-width) * -0.9239 * 2.5) 0
        var(--stroke-color-two),
      calc(var(--stroke-width) * 0.7071 * 2.5) calc(var(--stroke-width) * -0.7071 * 2.5) 0
        var(--stroke-color-two),
      calc(var(--stroke-width) * 0.9239 * 2.5) calc(var(--stroke-width) * -0.3827 * 2.5) 0
        var(--stroke-color-two);
}