@import url(https://fonts.bunny.net/css?family=m-plus-1:300);

:root{
    --black: hsl(251, 60%, 24%);

    --aqua: #62bfde;
    --indigo: #6B72E1;
    --violet: #7459B0;
    --pink: #CE7BBA;
    --red: #D06386;
    --gold: #FFCC73;
    --green: #7fd565;

    --pale-pink: #ebc7e3;
    --pale-indigo: #9ea4f0;

    --dark-aqua: hsl(195, 61%, 44%);
    --dark-indigo: hsl(236, 50%, 48%);
    --dark-violet: hsl(259, 50%, 45%);
    --dark-pink: hsl(314, 55%, 47%);

    --body-font: "MonaKo", sans-serif;
    --title-font: 'Bluesky', curisve;
    --heading-font: 'Dhaksinarga', var(--body-font);
    --ja-font: 'M PLUS 1', sans-serif;

	--text-shadow-white:
        calc(0.05em * 1) calc(0.05em * 0) 0
            #fff,
        calc(0.05em * 0.9239) calc(0.05em * 0.3827) 0
            #fff,
        calc(0.05em * 0.7071) calc(0.05em * 0.7071) 0
            #fff,
        calc(0.05em * 0.3827) calc(0.05em * 0.9239) 0
            #fff,
        calc(0.05em * 0) calc(0.05em * 1) 0
            #fff,
        calc(0.05em * -0.3827) calc(0.05em * 0.9239) 0
            #fff,
        calc(0.05em * -0.7071) calc(0.05em * 0.7071) 0
            #fff,
        calc(0.05em * -0.9239) calc(0.05em * 0.3827) 0
            #fff,
        calc(0.05em * -1) calc(0.05em * 0) 0
            #fff,
        calc(0.05em * -0.9239) calc(0.05em * -0.3827) 0
            #fff,
        calc(0.05em * -0.7071) calc(0.05em * -0.7071) 0
            #fff,
        calc(0.05em * -0.3827) calc(0.05em * -0.9239) 0
            #fff,
        calc(0.05em * 0) calc(0.05em * -1) 0
            #fff,
        calc(0.05em * 0.3827) calc(0.05em * -0.9239) 0
            #fff,
        calc(0.05em * 0.7071) calc(0.05em * -0.7071) 0
            #fff,
        calc(0.05em * 0.9239) calc(0.05em * -0.3827) 0
            #fff;
    --filter-shadow-white:
        drop-shadow(calc(0.05em * 1) calc(0.05em * 0) 0
            #fff)
        drop-shadow(calc(0.05em * 0) calc(0.05em * 1) 0
            #fff)
        drop-shadow(calc(0.05em * -1) calc(0.05em * 0) 0
            #fff)
        drop-shadow(calc(0.05em * 0) calc(0.05em * -1) 0
            #fff);
    
    --size: 95vh;
}

body{
    color: var(--black);
    font-family: var(--body-font);
    background-color: var(--black);
    background-image: url("./assets/bg/1.jpg");
        background-size: cover;
        background-attachment: fixed;
    font-size: calc(1em + var(--size) * 0.005);
    margin: 0;
    padding: 0;
}

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

	cute cute scrollbar 

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

/* Gradient Scroll Bar */

/* width */
::-webkit-scrollbar {
    width: 0.5em;
    height: 0.5em;
    filter: blur(0.1em);
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    border-radius: 100vmax;
    background: transparent;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    border-radius: 100vmax;
    background: linear-gradient(var(--violet), var(--pale-indigo), var(--pink), var(--pale-pink), var(--gold));
  }
  ::-webkit-scrollbar-thumb:horizontal{
    background: linear-gradient(to left, var(--violet), var(--pale-indigo), var(--pink), var(--pale-pink), var(--gold));
  }

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

		fonts yayyyy

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

.ja{
    font-family: var(--ja-font);
}

h1{
    font-family: var(--title-font);
}

h2, h3, h4{
    color: var(--violet);
    font-family: var(--heading-font);
    text-shadow: var(--text-shadow-white);
    opacity: 0.95;
}

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

		subheading!!!!!!

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

h2{
    text-shadow: none;
    background: var(--pink);
    background: linear-gradient(to bottom, var(--indigo) 22%, var(--pink) 60%);
    filter: var(--filter-shadow-white);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.9;
}

h2::before, h2::after{
    content: "✦";
    display: inline-block;
    background: var(--aqua);
    background: linear-gradient(to top, var(--indigo) 50%, var(--aqua) 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

h2::before{
    margin-right: 0.75ch;
}

h2::after{
    margin-left: 0.5ch;
}

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

		big container!!!

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

#holdme, #holdme > div, main{
    box-sizing: border-box;
}

#holdme{
    height: calc(var(--size) + 5vh);
    max-height: 96svh;
    width: calc(var(--size) * 1.9);
    background-image: url("./assets/bg_01.png");
        background-size: cover;
        background-position: top;
    margin: auto;
    /* margin: calc(var(--size) * 0.025) auto; */
    margin-bottom: 0;
    border-radius: 2em;
    box-shadow: 0 0 0.77em 0.22em var(--black);  
    mask: 
        linear-gradient(
            to top,  transparent 0%, #fff 10% 90%, transparent 94%),
        linear-gradient(
            to bottom,  transparent 0%, #fff 10% 90%, transparent 96%),
        linear-gradient(
            to right,  transparent 0%, #fff 10% 90%, transparent 96%),
        linear-gradient(
            to left, transparent 0%, #fff 10% 90%, transparent 96%);
        mask-size: 110% 110%;
        mask-position: center;
        mask-repeat:no-repeat;
        mask-composite: intersect;
    /* outline: 0.25em solid; */
}

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

		inner container

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

#holdme > div{
    display: grid;
        grid-template-areas: 'sidea main sideb';
        grid-template-columns: 12.5% 1fr 12.5%;
    box-shadow: 0 0 0.5em 2em rgba(255,255,255,0.88) inset;
    padding: 1.5em calc(1.5em + calc(var(--size) * 0.066));
    border-radius: 2em;
    height: 100%;
    text-align: center;
}

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

		the title yayayayay

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

header{
    font-size: calc(1em + var(--size) * 0.05);
    /* --inner-stroke: var(--black); */
    /* --outer-stroke: #fff; */
    filter: drop-shadow(0.066em 0.066em 0.022em var(--violet));
    line-height: 1;

    h1{
        margin: 0.25em auto;
        text-shadow: none;
    }

    a{
        text-decoration: none;
        color: #fff;
        filter: var(--filter-shadow-white);
        opacity: 0.93;

        span{
            background: var(--pink);
            background: linear-gradient(to bottom, var(--indigo) 0%, var(--pink) 48%, var(--gold) 93%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }
}

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

		main content box!!

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

main::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.33);
}

main{
    grid-area: main;
    overflow-y: auto;
    text-shadow: 
        0.025em 0.025em var(--violet),
        0.035em 0.035em var(--pink);
    margin: 1em calc(var(--size) * 0.125 / 2);
    line-height: 1.4;
    
    :is(a, h2):is(:hover, :focus) {
        opacity: 1;
    }

    :is(a, h2), :is(a, h2):is(:hover, :focus){
        transition: opacity 0.33s ease;
    }

    p, #stats > section, footer, .codegal, ol, ul{
        background: rgba(255,255,255,0.5);
        box-shadow: 0 0 0.5em 1em rgba(255,255,255,0.5);
        backdrop-filter: blur(0.1em);
        margin: auto;
    }

    p{
        max-width: calc(100% - 3em);
        width: 50ch;
        margin: 3em auto;
    }

    p:first-child, :is(h2, h3, h4) + p{
        margin-top: 1em;
    }

    ol, ul{
        width: 40ch;
        text-align: left;
        margin: 2em auto;
        padding-right: 1em;
        line-height: 1.3;

        li:not(:last-child, :only-child){
            margin-bottom: 0.77em;
        }

        ol, ul{
            background: none;
            box-shadow: none;
            backdrop-filter: none;
            margin: 1em 0;
        }
    }
}

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

	gallery for lil codes

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

.codegal{
    max-width: 50%;
    margin: 4em auto;

    img{
        margin-right: 1ch;
    }
}

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

	about each character!!

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

#about{

    p{
        overflow: auto;
        border-top-right-radius: 5em;
        border-bottom-right-radius: 5em;
        text-align: right;
    }

    .portrait{
        float: right;
        max-width: 33%;
        -webkit-mask-image: 
            radial-gradient(rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 70%);
        mask-image: 
            radial-gradient(rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 70%); 
        shape-outside: circle(50%);
    }

    section:nth-of-type(even) p{ 
        border-radius: 0;
        border-top-left-radius: 5em;
        border-bottom-left-radius: 5em;
        text-align: left;
        
        .portrait{
            float: left;
        }
    }
}

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

	    linkies....

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

main a:not(header a){
    color: var(--dark-pink);
    text-shadow:0 0 0.1em var(--dark-pink),  0 0 0.125em var(--dark-pink), 0.033em 0.033em var(--black);
    font-weight: bold;
    text-decoration: none;
    letter-spacing: 0.25ch;
    animation: linkies 5s linear infinite alternate;
}

main a:not(:is(header, footer) a){
    font-size: 0.9em;
    display: inline-block;
    margin-left: 0.25ch;

}

main a:not(header  a):is(:hover, :focus){
    color: #fff;
    text-shadow:0 0 0.1em #fff,  0 0 0.125em #fff, 0.033em 0.033em var(--black);
    animation: pulse .5s ease-in-out;
}

@keyframes linkies{
    0% {
        text-shadow:0 0 0.1em var(--dark-pink),  0 0 0.125em var(--dark-pink), 0.033em 0.033em var(--black);
        color: var(--dark-pink);
    }
    25% {
        text-shadow: 0 0 0.1em var(--dark-violet),  0 0 0.125em var(--dark-violet), 0.033em 0.033em var(--black);
        color: var(--dark-violet);
    }
    75% {
        text-shadow:0 0 0.1em var(--dark-indigo), 0 0 0.125em var(--dark-indigo),  0.033em 0.033em var(--black);
        color: var(--dark-indigo);
    }
    100% {
        text-shadow:0 0 0.1em var(--dark-aqua), 0 0 0.125em var(--dark-aqua),  0.033em 0.033em var(--black);
        color: var(--dark-aqua);
    }
}

@pulse{
    from{
        text-shadow:0 0 0.1em #fff,  0 0 0.125em #fff, 0.033em 0.033em var(--black);
    }
    to{
        text-shadow:0 0 0.1em #fff,  0 0 0.125em #fff, 0 0 0.15em #fff, 0.033em 0.033em var(--black);
    }
}

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

		guuu stats table

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

#stats{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin: auto;

    section{
        width: 55%;
        position: relative;
    }

    table{
        margin: auto;

        th{
            text-align: right;
        }

        td::before{
            content: " ⟡ ";
            font-size: 0.88em;
            margin: 0 0.5ch;
            transform: translateY(-0.25ch);
            display: inline-block;
        }

        td{
            text-align: left;
            /* padding-left: 1ch; */
        }
    }

    .sticker{
        content: "";
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        height: 9em;
        width: 7em;
        display: block;
        scale: 1.55;
        position: relative;
        z-index: 9;
    }

    /* move sticker on hover??? cute idea but kinda boring rn 

    .sticker:hover{
        scale: 1.66;
    }

    */

    .sticker:first-child{
        transform: translateX(33%);
        background-position-x: left;
    }

    .sticker:last-child{
        transform: translateX(-33%);
        background-position-x: right;
    }

    #emoemo{
        background-image: url("./assets/chibi_yuina.png");
    }

    #poccha{
        background-image: url("./assets/chibi_azu.png");
    }

    #chocoharo{
        background-image: url("./assets/chibi_choco.png");
    }
}

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

		members list!!!

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

ul#members{
    list-style: none;

    li{
        margin-bottom: 1em;

        b{
            font-size: 1.22em;
        }
    }

    li::before{
        content: "";
        height: 2.22em;
        width: 2.22em;
        display: inline-block;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-image: url("./assets/pixel/choco.gif");
        transform: translate(-1ch, 2ch);
    }

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

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

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

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

    li.choco::before{
        background-image: url("./assets/pixel/choco.gif");
    }

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

    li div{

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

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

		sidebar navis

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

#sidea, #sideb{
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly;
    align-items: center;
    padding-bottom: 22%;
    /* gap: calc(var(--size) * 0.1); */

    a{
        --link: calc(var(--size) * 0.2);
        display: flex;
            justify-content: center;
            align-items: flex-end;
        height: var(--link);
        width: var(--link);
        border-radius: 100%; 
        background-image: url("./assets/avi_01.jpg");
            background-size: cover;
            background-position: center;
        filter: brightness(1.05) saturate(0.88) opacity(0.95);
        text-align: center;
        text-decoration: none;
        overflow: hidden;
        -webkit-mask-image: 
            radial-gradient(rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 70%);
        mask-image: 
            radial-gradient(rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 70%); 
        
        div{
            width: 100%;
            background-image: linear-gradient(hsla(252, 92%, 15%, 0.44), hsla(287, 90%, 20%, 0.44), hsla(307, 79%, 11%, 0.44));
            box-shadow: 0 -0.25em 0.25em 0.125em hsla(252, 92%, 15%, 0.44);
            backdrop-filter: blur(1px);
            opacity: 0;
    
            span{
                color: #fff;
                opacity: 0.88;
                filter: blur(0.25px);
                text-shadow: 1px 1px var(--black);
            }
        }
    }

    a:is(:hover, :focus) div{
        opacity: 1;
        padding: 0.125em 0 1.125em 0;
    }

    a:is(:hover, :focus) div, a div{
        transition: opacity 0.33s ease, padding 0.33s ease, font-size 0.33s ease;
    }
}

#sidea{
    grid-area: sidea;

    a:nth-of-type(1){
        background-image: url("./assets/avi_01.jpg");
    }

    a:nth-of-type(2){
        background-image: url("./assets/avi_05.jpg");
    }

    a:nth-of-type(3){
        background-image: url("./assets/avi_03.jpg");
    }
}

#sideb{
    grid-area: sideb;

    a:nth-of-type(1){
        background-image: url("./assets/avi_04.jpg");
    }

    a:nth-of-type(2){
        background-image: url("./assets/avi_02.jpg");
    }

    a:nth-of-type(3){
        background-image: url("./assets/avi_full.jpg");
    }
}

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

		footer

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

footer{
    margin-top: 5em!important;
    margin-bottom: 2em!important;
    padding: 0 0.5em;
    max-width: max-content;
    line-height: 2;
    font-size: 0.88em;
}

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

		double stroke

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

/* prepare the selectors to add a stroke to */
.stroke-single,
.double-stroke {
  position: relative;
  background: transparent;
  z-index: 0;
}
/* add a single stroke */
.stroke-single:before,
.double-stroke:before {
  content: attr(alt);
  position: absolute;
  -webkit-text-stroke: 0.11em var(--inner-stroke); 
  
  left: 0;
  z-index: -1;
}
/* add a double stroke */
.double-stroke:after {
  content: attr(alt);
  position: absolute;
  -webkit-text-stroke: 0.25em var(--outer-stroke);
  left: 0;
  z-index: -2;
}