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

		variables

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

:root{
    --bg-size: 260px;
    --holdme-height: 90svh;

    --body-font: "ProggyCleanTT", sans-serif;
    --heading-font: "Comic Sans Pixel", var(--body-font);
    --ja-font: 0.9em/1.25 "BestTen", var(--body-font);
    --h1-size: calc(2em + 0.8svw);

    --big-bad-corner: 2em;
    --another-corner: calc(var(--big-bad-corner) * 0.9);
    --nav-corner: calc(var(--another-corner) * 0.5);
    --mini-corner: 1.5rem;

    --border-size: 0.2svw;

    --black: hsl(224, 100%, 11%);
    --black2: hsla(214, 100%, 11%, 0.33);
    --black3: hsla(214, 100%, 11%, 0.2);
    --black4: hsla(214, 100%, 26%, 0.1);
    --white: hsl(210, 100%, 98%);
    --white2: hsl(180, 100%, 100%);
    --white3: hsla(208, 100%, 97%, 0.33);
    --grey: hsl(203, 83%, 94%);

    --blue1: hsl(186, 100%, 40%);
    --blue2: hsl(203, 100%, 31%);
    --blue3: hsl(214, 100%, 26%);
    --cyan: hsl(174, 79%, 59%);
    --yellow: hsl(60, 100%, 63%);


	--life-saving-drop-shadow:
        drop-shadow(2.8px 2.8px 2.2px rgba(0, 0, 0, 0.14))
        drop-shadow(6.7px 6.7px 5.3px rgba(0, 0, 0, 0.11))
        drop-shadow(12.5px 12.5px 10px rgba(0, 0, 0, 0.09));
}

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

		basic style

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

main{ scroll-behavior: smooth!important; }

body{
    background-color: var(--blue3);
    background-image: url("./assets/bg02.png"), url("./assets/bg01.png");
        background-position: left calc(100svh - var(--bg-size)), left top;
        background-repeat: repeat-x, repeat;
        background-size: auto var(--bg-size);
        background-attachment: fixed;
    overflow: hidden;
    display: flex;
        align-items: center;
        justify-content: center;
    margin-top: calc((100svh - var(--holdme-height)) / 2);
    filter: 
        drop-shadow(12.5px 12.5px 10px rgba(0, 0, 0, 0.26))
        drop-shadow(22.3px 22.3px 17.9px rgba(0, 0, 0, 0.18));
}


a{
    color: var(--blue1);
    text-decoration: none;
    position: relative;
    z-index: 2;
}

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

a:not(#home), a:not(#home):is(:hover, :focus){
    transition: color .1s linear;
}

[style*="float: right"]{
    margin-left: 1em;
    position: relative;
}

iframe{
    z-index: 6;
    position: relative;
}

iframe[src*=youtube]{
    outline: var(--border-size) var(--black) solid;
    border: var(--border-size) var(--white) solid;
}

iframe[src*=youtube][style*="float: right"]{
    margin: 0 -2ch 2ch 1em;
}

.wip{
    display: block;
    height: 5em;
    margin: 1em auto;
    text-align: center;
    image-rendering: pixelated;
}

.wip + p{
    font-size: 0.9em;
    text-align: center;
    margin: 1em auto;
}

blockquote, li, p{
    max-width: 77ch;
}

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

		text styling

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

body{
    font-size: calc(1rem + 0.3svw);
    font-family: var(--body-font);
    line-height: 1.25;
    word-spacing: -0.05ch;
    color: var(--black);
}

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

:is(h2, h3, h4, h5, h6) .ja{
    font: var(--ja-font);
    letter-spacing: normal;
}

h1, h2, h3, h4, h5, h6{
    font-family: var(--heading-font);
    word-spacing: 0.1ch;
}

:is(h1, h2, h3, h4, h5, h6) span{
    display: inline-block;
}

h2, h3, h4, h5, h6{
    letter-spacing: 0.05ch;
}

h4, h5, h6{
    letter-spacing: 0.12ch;
}

:is(h2, h3).double-stroke, :is(h2, h3) > .double-stroke{
    --inner-stroke: var(--white2);
    --outer-stroke: var(--blue2);
    -webkit-text-fill-color: var(--blue3);
    word-spacing: 0.3ch;
}

span.double-stroke:not(:last-child){
    margin-right: 0.5ch;
}

h4::before{
    content: url("/sans/assets/glowstar.gif");
    margin-right: 1ch;
}

h4::after{
    content: url("/sans/assets/glowstar.gif");
    margin-left: 1ch;
}

h3{
    font-size: 1.34em;
}

h4{
    font-size: 1.2em;
}

h5{
    font-size: 1.1em;
    margin: 0.5em 0;
}

:is(h4, ul) + h5{
    margin-left: calc(1em + 0.25ch);
}

:is(main, footer, table, .toc > menu) > *, .toc menu::before{
    filter: drop-shadow(0.06em 0.06em var(--black4));
}

em, i, cite{
    display: inline-block;
    margin-right: 0.5ch;
}

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

		fanlist cta

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

.join{
    display: block;
    position: relative;
    z-index: 8;
    margin: 1em auto;
    width: max-content;
    padding: var(--border-size);
    background: var(--black);

    --corner: var(--mini-corner);
    clip-path: 
    polygon(
        var(--corner) 0%, calc(100% - var(--corner)) 0%, 
        100% var(--corner), 100% 100%, 
        0 100%, 0 var(--corner));
    
    > div{
        padding: var(--border-size);
        background: var(--white);
        --corner: calc(var(--mini-corner) * 0.95);
        clip-path: 
        polygon(
            var(--corner) 0%, calc(100% - var(--corner)) 0%, 
            100% var(--corner), 100% 100%, 
            0 100%, 0 var(--corner));

    }

    a{
        display: block;
        font-weight: bold;
        color: var(--black);
        font-size: 1.3em;
        font-family: var(--heading-font);
        letter-spacing: 0.1ch;
        text-shadow: 
            1px 1px var(--white), -1px -1px var(--white), 1px -1px var(--white), -1px 1px var(--white),
            2px 1px 1px var(--blue3);

        --corner: calc(var(--mini-corner) * 0.9);
        clip-path:
                polygon(
                    var(--corner) 0%, calc(100% - var(--corner)) 0%, 
                    100% var(--corner), 100% 100%, 
                    0 100%, 0 var(--corner));
    }

    span{
        display: inline-block;
        padding: 1ch 2ch;
        padding-top: 1.25ch;
        background: var(--blue1);
    }

    a:is(:hover, :focus) span{
        background: var(--cyan);
    }

    span, a:is(:hover, :focus) span{
        transition: background .1s linear;
    }
}

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

		scroll to top

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

button{
    font-family: var(--body-font);
    font-size: 0.9em;
    padding: 1ch 2ch;
}

button.scrollup{
    margin: 1em auto;
    display: block;
}

button.scrollup + :is(h2, h3, h4, h5){
    margin-top: 2rem;
}

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

		containers

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

#holdme{
    position: relative;
    box-sizing: border-box;
    height: var(--holdme-height);
    min-width: 55svw;
    width: 100ch;
    max-width: 80svw;
    background-color: var(--white);
    padding: calc(var(--big-bad-corner) * 0.15);

    --corner: var(--big-bad-corner);
    clip-path: 
            polygon(var(--corner) 0%, calc(100% - var(--corner)) 0%,
            100% 0, 100% calc(100% - var(--corner)),
            calc(100% - var(--corner)) 100%, 0 100%,
            0% 100%, 0% var(--corner));

    > div{
        box-sizing: border-box;
        height: 100%;
        width: 100%;
        background-color: var(--black);
        padding: calc(var(--another-corner) * 0.15);
        --corner: var(--another-corner);
        clip-path: 
                polygon(var(--corner) 0%, calc(100% - var(--corner)) 0%,
                100% 0, 100% calc(100% - var(--corner)),
                calc(100% - var(--corner)) 100%, 0 100%,
                0% 100%, 0% var(--corner));
    }
    
    #container{
        background-color: var(--white);
        height: 100%;
        width: 100%;
        display: flex;
            flex-direction: column;
        --corner: calc(var(--another-corner) * 0.95);
        clip-path: 
                polygon(var(--corner) 0%, calc(100% - var(--corner)) 0%,
                100% 0, 100% calc(100% - var(--corner)),
                calc(100% - var(--corner)) 100%, 0 100%,
                0% 100%, 0% var(--corner));
    }
}

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

		header

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

header{
    box-sizing: border-box;
    height: 20ch;
    padding: 0.5em 0.75em 0.25em 1em;
    background-color: var(--cyan);
    background-image: url("./assets/bwah2.png"), url("./assets/bg04.png");
        background-size: auto calc(100% + var(--border-size) + 1px), auto 50%;
        background-position: 0, center;
    border-bottom: var(--border-size) solid var(--white3);
    display: flex;
        justify-content: flex-end;
        align-items: flex-end;
    
    > div{
        display: flex;
        align-items: flex-end;
        gap: 0.75ch;
        font-size: var(--h1-size);
    }

    h1{
        font-size: 1em;
        --inner-stroke: var(--white2);
        --outer-stroke: var(--black);
        -webkit-text-fill-color: var(--black);
        margin: 0;
        display: block;
        filter: var(--life-saving-drop-shadow);
        /* mix-blend-mode: screen; 
        --outer-stroke: var(--blue2); */
    }

    .save{
        --size: 1.15em;
        content: "";
        display: block;
        height: calc(var(--size) * (74 / 60));
        width: var(--size);
        background-image: url("/sans/assets/ketchup.webp");
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
    }
}

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

		navigation

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

nav{
    z-index: 9;
    background-color: var(--black);
    /* border-bottom: var(--border-size) solid var(--blue1); */

    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: var(--border-size) 0 calc(var(--border-size) + 1px) 0;

    a, button{
        padding: 1ch 2ch;
        color: var(--white2);
        text-decoration: none;
        text-shadow: 1px 1px var(--blue2);
    }

    button{
        height: min-content;
        background: inherit;
        border: inherit;
        font: inherit;
    }

    #navFanlist{
        width: 13.5ch;
        
        a{
            padding-right: 1ch;
        }
    }

    #navAbout a{
        padding-right: 2.75ch;
    }

    #navGames a{
        padding-right: 2.5ch;
    }
}

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

	dropdown menus

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

.dropdown {
    overflow: hidden;
  }
  
  nav a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
    color: var(--black);
    background-color: var(--cyan);
  }

  nav a:hover{
    text-shadow: 1px 1px var(--blue2), 1px 1px 1px var(--blue3);
  }
  
  .dropdown-content {
    display: none;
    min-width: min-content;
    box-sizing: border-box;
    border: calc(var(--border-size) * 1) solid var(--black);
    position: absolute;
        transform: translate(calc(var(--border-size) * -0.5), calc(var(--border-size) * 0.25));
    color: var(--white);
    background-color: var(--black);
    box-shadow: 0px 8px 16px 0px var(--black4);
    z-index: 8;
    --corner: var(--nav-corner);
    clip-path: 
        polygon(
            0 0, 
            100% 0, 
            /* corner start */
            100% calc(100% - var(--corner)), 
            calc(100% - var(--corner)) 100%,
            /* corner end */ 
            0 100%
        );
  }

  .dropdown-content a:last-child{
    --corner: calc(var(--nav-corner) * 0.95);
    clip-path: 
        polygon(
            0 0, 
            100% 0, 
            /* corner start */
            100% calc(100% - var(--corner)), 
            calc(100% - var(--corner)) 100%,
            /* corner end */ 
            0 100%
        );
  }
  
  .dropdown-content a {
    float: none;
    color: var(--white2);
    padding: 1ch 2ch;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  .dropdown-content a::before{
    content: "* ";
  }
  
  .dropdown-content a:hover {
    background-color: var(--blue1);
    color: var(--white2);
  }
  
  .show {
    display: block;
  }

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

		main

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

main{
    height: 100%;
    padding: 0 2em;
    box-sizing: border-box;
    overflow-y: auto;
    background-image: url("./assets/bg05.png");
    --bg-size: calc(var(--border-size) * 5);
    --bg-offset: 0.5em;
        background-position: var(--bg-offset) 0;
        background-repeat: repeat-y;
        background-size: var(--bg-size);
        background-attachment: local;
    padding-left: calc(var(--bg-size) + var(--bg-offset) * 2 + 0.75em);
    border-bottom: var(--border-size) solid var(--black);

    img{
        max-width: calc(100% - 2em);
    }

    .cheers{
        float: right;
        max-width: 36%;
        shape-outside: url("./gallery/assets/vector/um1.png");
        shape-margin: 0.25em;
    }

    #updates{
        display: block;
        width: 50%;
        padding-right: 1em;
        height: 20ch;
        margin: 1em auto;
        overflow-y: scroll;
        background-color: var(--blue3);
        color: var(--white);
        text-align: left!important;
        text-shadow: 1px 1px var(--black);
        outline: var(--border-size) var(--black) solid;
        border: var(--border-size) var(--white) solid;

        a{
            color: var(--yellow);
            text-decoration: underline;
        }

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

    #updates::before{
        position: absolute;
        transform: translate(calc((1em + var(--border-size) * 2 + 15px) * -1), 111%);
        content: url("./assets/incidentalmusic.gif");
    }

    .columns{
        display: flex;
            justify-content: center;
            gap: 0.25em;
            flex-wrap: wrap;
        margin: 1em auto;

        > div{
            width: max-content;
            max-width: 32%;
        }

        ul{
            li{
                min-width: 15ch;
                width: auto;
                max-width: 30ch;
                margin-bottom: 0.5em;
            }
        }
    }

    .highlight{
        background-color: var(--yellow);
    }

    .toc{
        z-index: 5;
        position: relative;
        float: right;
        clear: both;
        margin: 1em 1em;
        margin-right: -2ch;
        max-width: 24ch;
        color: var(--blue3);
        background-color: var(--blue2);

        padding: calc(var(--nav-corner) * 0.2);
        --corner: var(--nav-corner);
        clip-path: 
            polygon(0% var(--corner), var(--corner) 0%,
            100% 0, 100% 100%,
            var(--corner) 100%, 0 calc(100% - var(--corner)));
        
        a{
            color: var(--blue2);
        }

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

        > menu::before{
            content: "- Quick Links -";
            display: block;
            text-align: center;
            font-family: var(--heading-font);
            margin-bottom: 0.5em;
            transform: translateX(-0.5ch);
        }

        > menu{
            background-color: var(--grey);
            padding: 0.5em 1.25em;
            padding-right: 0.75em;
            margin: 0;
            --corner: calc(var(--nav-corner) * 0.9);
            clip-path: 
                polygon(0% var(--corner), var(--corner) 0%,
                100% 0, 100% 100%,
                var(--corner) 100%, 0 calc(100% - var(--corner)));
            
            menu{
                margin: 0;
                margin-left: -0.66em;
                font-size: 0.95em;

                ::marker{
                    text-indent: -0.25rem!important;
                }
            }
        }
    }

    .gallery{
        --gap: 1rem;
        margin: 1em auto;
        display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
        gap: var(--gap);
        
        a{
            text-align: center;

            img{
                max-width: 100%;
            }
        }
    }
}

:is(.gallery a img, a img[style*=float]):hover{
    filter: opacity(0.8) saturate(1.1);
} 

.gallery a img, a img[style*=float],
:is(.gallery a img, a img[style*=float]):hover{
    transition: filter .3s ease;
}

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

		scrollbar

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

main {
    --sb-size: 1ch;
    --sb-track-color: transparent;
    --sb-thumb-color: var(--black3);
  }

#updates {
    --sb-size: 0.75ch;
    --sb-track-color: var(--blue3);
    --sb-thumb-color: var(--blue1);
}
  
    ::-webkit-scrollbar {
    width: var(--sb-size);
    }

    ::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    }

    ::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    }

    @supports not selector(::-webkit-scrollbar) {
    main, #updates {
        scrollbar-color: var(--sb-thumb-color)
                        var(--sb-track-color);
    }
}   

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

		footer

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

footer{
    z-index: 50;
    text-align: center;
    line-height: var(--big-bad-corner);
    padding: 0 1em;
    padding-right: calc(25px + 2em);
    background-image: url("./assets/sleep.gif");
        background-position: calc(100% - 1.75em) bottom;
        background-repeat: no-repeat;
        background-size: auto;

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

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

    a:visited{
        color: var(--blue2);
    }

    img{
        transform: translateY(1px);
    }
}

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

		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;
}

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

		cursors

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

body, html{
    cursor: url("./assets/cursor/Normal_Select.cur"), auto;
}

a, select, button, [onclick],input[type="button"]{
    cursor: url("./assets/cursor/Link_Select.cur"), pointer;
}

textarea,input[type="text"]{
    cursor: url("./assets/cursor/Text_Select.ani"), text;
}


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

	style my tooltip

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

#s-m-t-tooltip{
	/* basic */
	max-width:44ch;
	z-index: 99;
	margin:-70px 14px 7px 12px;
	/* style and design */
	padding:8px;
	background:#222; /* fallback if rgba not supported */
	background:rgba(0,0,0,0.8);
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	-moz-box-shadow:2px 2px 0 rgba(0,0,0,0.15),-1px -1px 0 rgba(255,255,255,0.3);
	-webkit-box-shadow:2px 2px 0 rgba(0,0,0,0.15),-1px -1px 0 rgba(255,255,255,0.3);
	box-shadow:2px 2px 0 rgba(0,0,0,0.15),-1px -1px 0 rgba(255,255,255,0.3);
	/* font */
	font-family: var(--body-font);
	font-size:0.8em;
	line-height:1em;
	color:var(--white);
}