@import url('https://fonts.cdnfonts.com/css/jetskisinsummer');
@import url('https://fonts.cdnfonts.com/css/blush');
@import url('https://fonts.cdnfonts.com/css/mf-soul-meets-body');
@import url('https://fonts.cdnfonts.com/css/rich-burger');
@import url('https://fonts.cdnfonts.com/css/super-renewables');

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

		fonts and colours

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

:root{
    --body-font: 'Super Renewables', sans-serif;
    --heading-font: 'Blush', var(--body-font);
    --table-font: 'Jet Skis In Summer', var(--body-font);

    --black: #33344D;
    --pink: hsl(335, 100%, 89%);
    --blue: hsl(229, 100%, 85%);
    --navy: hsl(230, 70%, 65%);
    --navy2:hsl(230, 52%, 54%);
    --aqua: hsl(203, 100%, 91%);
    --green: hsl(169, 80%, 79%);
    --yellow: hsl(50, 100%, 87%);
    --purple: hsl(264, 95%, 85%);
    --lilac: hsl(263, 100%, 93%);
    --white: #fff;
}

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

		basic styling...

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

.text-outline, nav a span, h1{
    color: var(--white);
    --stroke-width: 0.1em;
    --stroke-width-two: 0.066em;
    --stroke-color: var(--navy);
    --stroke-color-two: var(--blue);
    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-two) * 1 * 2.5) calc(var(--stroke-width-two) * 0 * 2.5) 0
        var(--stroke-color-two),
      calc(var(--stroke-width-two) * 0.9239 * 2.5) calc(var(--stroke-width-two) * 0.3827 * 2.5) 0
        var(--stroke-color-two),
      calc(var(--stroke-width-two) * 0.7071 * 2.5) calc(var(--stroke-width-two) * 0.7071 * 2.5) 0
        var(--stroke-color-two),
      calc(var(--stroke-width-two) * 0.3827 * 2.5) calc(var(--stroke-width-two) * 0.9239 * 2.5) 0
        var(--stroke-color-two),
      calc(var(--stroke-width-two) * 0 * 2.5) calc(var(--stroke-width-two) * 1 * 2.5) 0
        var(--stroke-color-two),
      calc(var(--stroke-width-two) * -0.3827 * 2.5) calc(var(--stroke-width-two) * 0.9239 * 2.5) 0
        var(--stroke-color-two),
      calc(var(--stroke-width-two) * -0.7071 * 2.5) calc(var(--stroke-width-two) * 0.7071 * 2.5) 0
        var(--stroke-color-two),
      calc(var(--stroke-width-two) * -0.9239 * 2.5) calc(var(--stroke-width-two) * 0.3827 * 2.5) 0
        var(--stroke-color-two),
      calc(var(--stroke-width-two) * -1 * 2.5) calc(var(--stroke-width-two) * 0 * 2.5) 0
        var(--stroke-color-two),
      calc(var(--stroke-width-two) * -0.9239 * 2.5) calc(var(--stroke-width-two) * -0.3827 * 2.5) 0
        var(--stroke-color-two),
      calc(var(--stroke-width-two) * -0.7071 * 2.5) calc(var(--stroke-width-two) * -0.7071 * 2.5) 0
        var(--stroke-color-two),
      calc(var(--stroke-width-two) * -0.3827 * 2.5) calc(var(--stroke-width-two) * -0.9239 * 2.5) 0
        var(--stroke-color-two),
      calc(var(--stroke-width-two) * 0 * 2.5) calc(var(--stroke-width-two) * -1 * 2.5) 0
        var(--stroke-color-two),
      calc(var(--stroke-width-two) * 0.3827 * 2.5) calc(var(--stroke-width-two) * -0.9239 * 2.5) 0
        var(--stroke-color-two),
      calc(var(--stroke-width-two) * 0.7071 * 2.5) calc(var(--stroke-width-two) * -0.7071 * 2.5) 0
        var(--stroke-color-two),
      calc(var(--stroke-width-two) * 0.9239 * 2.5) calc(var(--stroke-width-two) * -0.3827 * 2.5) 0
        var(--stroke-color-two);
}

body{
    background-color: var(--lilac);
    background-image: url("./assets/bg3.png");
    background-size: 2.5vmax;
    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);
}

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

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

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

main{
    width: 99ch;
    aspect-ratio: 1:1.25;
    margin: 1em auto;
    filter: drop-shadow(0.1em 0.1em var(--purple));

    > p{
        text-align:center;
        max-width: 80%;
        margin: 1em 0 1em 25%;
    }

    p, table{
        line-height: 1.33;
    }
}

header{
    filter: drop-shadow(0.1em 0.1em var(--purple));
}

footer{
    text-align: center;
}

#vector{
    height: 77ch;
    max-height: calc(95vh - 1em);
    float: left;
    position: sticky;
      top: 1em;
    shape-outside: url("./assets/hihi.png");
    shape-margin: 1em;
    filter: drop-shadow(3px 3px var(--purple));
}

nav{
    float: right;
    display: flex;
        flex-flow: column nowrap;
    margin: 1em;
    margin-top: 0;
    position: sticky;
      top: 1em;
    gap: 1em;
    text-align: center;
    filter: drop-shadow(0.1em 0.1em var(--purple));

    a{
        display: block;
        background-color: var(--white);
        background-image: url("./assets/bg2.png");
        padding: 0.5em 2em;
        border: 2px solid var(--purple);
        outline: 3px solid var(--white);
        border-radius: 2em;
        /* font-weight: bold; */
        font-family: var(--table-font);
        font-size: 1.1em;
    }

    a:nth-child(odd){
        background-image: url("./assets/bg.png");
        border: 2px solid var(--blue);
    }

    a:is(:hover, :focus){
        transform: translateX(1.5em);
    }

    a, a:is(:hover, :focus){
        transition: transform .2s ease-in-out;
    }
}

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

h1{
  font-size: 3em;
}

h1:is(:hover, :focus){
  color: var(--blue);
}

h1, .left{
  text-align: left;
}

#stats{
    margin: 1em auto;
    text-align: center;

    th{
      padding: 0 2ch;
    }
}

ol, ul{
  margin: 1em;
  margin-left: 30%;
  padding: 0;
  width: fit-content;

  li{
    margin-bottom: 1em;
  }
}

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

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

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

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

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

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

  li div{

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

#gallery{
  display: flex;
    flex-flow: row wrap;
    gap: 1em;
    justify-content: space-evenly;
    align-items: start;
  
  
  > div{
    background: var(--white);
    width: calc(50% - 1em);
    border: 2px solid var(--purple);
    outline: 3px solid var(--white);
    border-radius: 2em;

    img{
      max-width: 100%;
      border-top-right-radius: 1.85em;
      border-top-left-radius: 1.85em;
    }
  }

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