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

   variables!!!!!!!!!

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

:root{
    --body-font: "JustPlayin", serif;
    --heading-font: "BE Marker Serif", var(--body-font);
    --red: hsl(357, 61%, 45%);
    --red2: hsl(0, 77%, 31%);
    --black: #312826;  
    --shadow-color: 45deg 33% 45%;
}

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

   basic styling

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

body{
    font-family: var(--body-font);
    font-size: calc(0.66em + 0.5vmax);
    background-image: url("./assets/bg2.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    color: var(--black);
}

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

   headings

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

h1, h2, th, #stats strong{
    font-family: var(--heading-font);
}

h2:not(.gwah){
    font-size: 2em;
    margin-top: 0;
}

h2:not(.hmph)::before{
    content: url("./assets/painting.png");
    display: inline-block;
    margin-right: 0.25ch;
    transform: translateY(0.05ch);
}

h2.gwah::before{
    transform: translateY(0.125ch);
}

h3{
    font-size: 1.5em;
    text-align: center;
}

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

   linkies!!!!!!!

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

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

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

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

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

   bigggg container coolio

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

#holdme{
    float: right;
    margin-bottom: 1em;
    width: 80em;
    text-align: right;
    filter: 
        drop-shadow(0.3px 0.5px hsl(var(--shadow-color) / 0.36))
        drop-shadow(0.8px 1.6px 0.5px hsl(var(--shadow-color) / 0.36))
        drop-shadow(1.1px 3.1px 1px hsl(var(--shadow-color) / 0.22));
}

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

   CUTE PAPYRUS VECTOR!!!

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

#papichan{
    float: right;
    shape-outside: url("./assets/paps.png");
    shape-margin: 0.77em;
    height: calc(95vh - 1.5em);
    margin-right: 1em;
    position: sticky;
    top: 1em;
}

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

   header + nav bonestuff

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

header{
    display: flex;
    justify-content: flex-end;
    text-align: right;
}

nav a, header h1{
    display: block;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: auto 100%;
}

:is(nav a, header h1):is(:hover, :focus){
    background-position: top right;
}

h1{
    height: 2.5em;
    aspect-ratio: 932 / 119;
    background-image: url("./assets/cooldudeclub.png");
    cursor: pointer;
}

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

   navigation heheheheeee

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

nav{
    float: left;
    margin-top: 1rem;
    margin-left: 4em;
    margin-right: 1em;
    position: sticky;
    z-index: 99;
    top: 1em;
    display: flex;
        flex-flow: column nowrap;
        align-items: flex-end;
        gap: 0.5em;

    a{
        height: 3em;
    }

    a[href*="about"]{
        aspect-ratio: 932 / 295;
        background-image: url("./assets/about.png");
    }

    a[href*="members"]{
        aspect-ratio: 933 / 209;
        background-image: url("./assets/members.png");
    }

    a[href*="join"]{
        aspect-ratio: 932 / 423;
        background-image: url("./assets/join.png");
    }

    a[href*="codes"]{
        aspect-ratio: 933 / 306;
        background-image: url("./assets/codes.png");
    }

    a[href*="links"]{
        aspect-ratio: 932 / 336;
        background-image: url("./assets/links.png");
    }
}

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

   main content goes here!!

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

main{

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

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

   codes section

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

#fifty{
    margin: 2em auto;
    text-align: center;
    width: 50%;

    img{
        margin-right: 1ch;
    }
}

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

   footer yayyy

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

footer{
    /* text-align: center; */
    clear: both;
    margin: 1em auto 0 auto;
    font-size: 0.88em;
    transform: translateY(1em);
}

footer::before, footer::after{
    content: url("./assets/bonebox.png");
    margin: 0 1ch;
    transform: translateY(0.5ch);
    display: inline-block;
}

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

   fanlisting index table

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

#stats{
    float: left;
    margin: 1em;
    margin-top: -1em;
    text-align: center;

    table{
        border-spacing: 0.5em;
    }

    th, strong{
        font-size: 1.22em;
        text-transform: lowercase;
    }

    :is(th, strong)::first-letter, .first{
        font-size: 1.44em;
    }

    p{
        margin-top: 0em;
        line-height: 2em;
    }

    > img{
        float: right;
        height: 7rem;
        margin-left: 0.5em;
        margin-top: 2rem;
        shape-outside: url("./assets/wave.png");
    }
}

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

   lists... any list at all...

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

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

    li{
        margin-bottom: 0.5em;
    }
}

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

    but especially the members list!!!

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

ul#members{
    display: block;
    width: 33ch;
    padding-left: 5em;
    list-style: none;
    padding-left: 0;
  
    li{
        margin-bottom: 1em;
        margin-left: 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/lonebone.png");
        transform: translate(-0.5ch, 1.5ch);
    }
  
    li div, li div + span{
        margin-left: 2.88ch;
    }
  
    li div{
  
        >*:not(:last-child)::after{
            content: " \2022 ";
            color: var(--black)!important;
        }
    }
}

#pose{
    float: left;    
    height: 7rem;
    margin: 0.5em;
    margin-left: 18ch;
    shape-outside: url("./assets/pose.png");
}