@import url('https://fonts.cdnfonts.com/css/surprisedmonkey');

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

   variables!!!!!!!!!

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

:root{
    --body-font: sans-serif;
    --heading-font: "Surprisedmonkey", var(--body-font);
    --grey: hsl(0, 0%, 80%);
    --black: #252525;  
    --white: #F9F8F5;
    --shadow-color: 45deg 33% 45%;
}

body{
    font-family: var(--body-font);
    color: var(--white);
    background-color: var(--black);
    background-image: url("./assets/bg.png");
    background-size: 22vmax;
    background-position: 0 -15%;
    background-attachment: fixed;
    line-height: 1.3;
}

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

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

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

p{
    max-width: 66ch;
    margin: 1em auto;
}

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

h1{
    font-size: 3.33em;
}

h2{
    font-size: 2em;
}

h3{
    font-size: 1.66em;
}

section img{
    margin-right: 1ch;
}

ol, ul{
    text-align: left;
    width: fit-content;
    /* padding: 0; */
    margin: 1em auto;
}

main{
    text-align: center;
    margin: 1em auto;
    max-width: 88ch;
    filter: 
        drop-shadow(0.1em 0.1em var(--black))
        drop-shadow(0.15em 0.15em var(--black))
        ;
}

#stats{
    width: fit-content;
    margin: 1em auto;

    th{
        font-family: var(--heading-font);
        padding: 1ch;
        font-size: 1.11em;
    }
}



/* members list */

ul#members{
    list-style: none;
    padding-left: 0;
  
    li{
        /* margin-bottom: 1em; */

        a{
            text-decoration: none;
        }
  
        b{
            font-size: 1.1em;
            margin-left: -0.5ch;
            display: inline-block;
            font-family: var(--heading-font);
        }
    }
  
    li::before{
        content: "";
        height: 3.33em;
        width: 2em;
        display: inline-block;
        background-image: url("./assets/sanspixel.gif");
          background-repeat: no-repeat;
          background-position: center bottom;
          background-size: 2em auto;
        transform: translate(-0.75ch, 2ch);
    }
  
    li:nth-of-type(even)::before{
        background-image: url("./assets/papspixel.gif");
    }
  
    li div, li div + span{
        margin-left: 3.5ch;
    }
  
    li div{
  
        >*:not(:last-child)::after{
            content: " \2022 ";
            color: var(--white)!important;
        }
    }
  }