:root{  /* fonts */

    --heading-font: "Perfect DOS VGA 437", var(--body-font), cursive;
    --body-font: "ProggyHeart", sans-serif;
    --subheading-font: "Pixel Script", var(--heading-font);
}

:root{  /* spacing */
	
	--gap: 21px;
	--one-fourth-gap: calc(var(--gap) * 0.25);
	--half-gap: calc(var(--gap) / 2);
	--two-third-gap: calc(var(--gap) * 0.66);
	--three-fourth-gap: calc(var(--gap) * 0.75);
	--one-and-half-gap: calc(var(--gap) * 1.5);
	--double-gap: calc(var(--gap) * 2);

	--full-height: calc(100vh - var(--double-gap));
	--full-width: calc(100vw - var(--double-gap));
}

:root{  /* colours */

    --black: hsl(35, 40%, 12%);
    --white: hsl(55, 20%, 92%);
    --white2: hsl(39, 38%, 90%);

    --brown: hsl(34, 29%, 51%);
    --brown2: hsl(34, 32%, 42%);
    --brown3: hsl(35, 35%, 33%);
    --brown4: hsl(37, 41%, 23%);
    --brown5: hsl(35, 53%, 15%);
    --cream: hsl(40, 56%, 75%);
    --mint: hsl(49, 28%, 69%);

    --fifty-white: hsla(55, 20%, 92%, 0.55);
    --thirty-white: hsla(55, 20%, 92%, 0.33);
    --fifty-white2: hsla(39, 38%, 90%, 0.55);
    --seventy-black: hsla(35, 40%, 12%, 0.77);
    --fifty-black: hsla(35, 40%, 12%, 0.55);
    --fifty-brown: hsla(34, 29%, 51%, 0.55);
    --fifty-brown2: hsla(34, 32%, 42%, 0.55);
    --fifty-brown3: hsla(35, 35%, 33%, 0.55);
    --fifty-cream: hsla(49, 28%, 69%, 0.55);
    --fifty-mint: hsla(49, 28%, 69%, 0.55);
    
	--text-shadow-color: 49deg 8% 22%;
	--heavy-text-shadow-color: 35deg 8% 5%;
}

:root{  /* shadows */

    --literal-text-shadow: 
        0.11ch 0.12ch 0.066ch hsl(var(--text-shadow-color) / 0.05),
        0.03ch 0.05ch 0.07ch hsl(var(--text-shadow-color) / 0.11),
        0.04ch 0.08ch 0.05ch hsl(var(--text-shadow-color) / 0.22);

    --heavy-text-shadow: 
        0.11ch 0.12ch 0.066ch hsl(var(--heavy-text-shadow-color) / 0.05),
        0.03ch 0.05ch 0.07ch hsl(var(--heavy-text-shadow-color) / 0.11),
        0.04ch 0.08ch 0.05ch hsl(var(--heavy-text-shadow-color) / 0.22),
        0.21ch 0.22ch 0.066ch hsl(var(--heavy-text-shadow-color) / 0.08),
        0.23ch 0.25ch 0.07ch hsl(var(--heavy-text-shadow-color) / 0.15),
        0.14ch 0.18ch 0.05ch hsl(var(--heavy-text-shadow-color) / 0.25);
}

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

	basic styling....

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

*{
    box-sizing: border-box;
}

html{
    scroll-padding-top: calc(78px + var(--double-gap));
    scroll-margin: var(--gap);
}

body{
    margin: 0 auto;
    padding: 0;
    color: var(--black);
    font-family: var(--body-font);
    font-size: 18px;
    background-image: url("/bg/01.png");
        background-size: cover;
        background-attachment: fixed;
        background-position: top center;
}

.big{
    font-size: larger;
}

.small{
    font-size: small;
}

span.symbol{
    display: inline-block;
    margin: 0 -3px;
}

dfn{
    font-style: normal;
    text-decoration: 2px dotted underline;
}

p{
    margin: 1em auto;
}

.body, p, li{
    line-height: 1.22;
}

p, li{
    max-width: 66ch;
}

ul, ol{
    margin: 1em auto;
    max-width: fit-content;
}

li{
    text-align: left;
}

/* diamond list

ul {
    list-style: none;
    margin: 2em;
    padding: 0;
    
    li {
      margin: 0;
      margin-bottom: 1em;
      padding-left: 1.22em;
      position: relative;
      
      &:after {
        content: '';
        height: .5em;
        width: .5em;
        background: var(--brown5);
        display: block;
        position: absolute;
        transform: rotate(45deg) translate(0.25ch);
        top: .25em;
        left: 0;
      }
    }
}

*/

blockquote{
    border-left: 2px solid var(--brown3);
    text-align: left;
    padding-left: 1em;
    width: fit-content;
    max-width: 55ch;
    margin: 1em auto;
    font-style: italic;

    p{
        margin: 1em 0;
    }
}

header, main, footer, .ishgardbox{
    margin: var(--gap) auto;
}

a{
    color: var(--fifty-black);
    text-decoration-style: dotted;
    position: relative;
    z-index: 9;
}

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

a.hiddenlink,
a.hiddenlink:is(:hover, :focus){
	background: inherit;
	color: inherit;
	text-decoration: inherit;
	text-shadow: inherit;
	font-weight: inherit;
	padding: inherit;
	transform: inherit;
}

img{
    max-width: 100%;
    object-fit: contain;
}

img:is([src*="divider.png"], [data-src*="divider.png"]){
    margin: 1em auto;
}

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

		headings

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

h1, h2, h3, h4, h5, h6{
	--heading-size: calc(2em + 1svw);
    font-family: var(--heading-font);
    text-align: center;
}

h1{
    font-size: var(--heading-size);
}

h2{
    font-size: calc(var(--heading-size) / 1.75);
}

h3{
    font-size: calc(var(--heading-size) / 2);
}

h4{
    font-size: calc(var(--heading-size) / 2.25);
}

h5{
    font-size: calc(var(--heading-size) / 2.5);
}

h6{
    font-size: calc(var(--heading-size) / 2.75);
}

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

	playing with borders

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

.ishgardbox{
    display: block;
    width: 960px;
    text-align: center;
    text-shadow: var(--literal-text-shadow);

    > div{
        background-position: 0 0;
        padding-left: calc(21px + 1em);
        padding-right: calc(21px + 1em);
    }

    > div:first-child{
        --height: 78px;
        background-image: url("/assets/box/top.png");
        background-repeat: no-repeat;
        height: var(--height);
        text-align: center;
        padding-top: calc(var(--height) / 2);
        line-height: 1;
        box-sizing: border-box;
    }

    > div:nth-child(2){
        background-image: url("/assets/box/middle.png");
        background-repeat: repeat-y;
        min-height: 118px;
        height: max-content;
        overflow: auto;
    }

    > div:last-child{
        background-image: url("/assets/box/bottom.png");
        background-repeat: no-repeat;
        height: 90px;

        h2.sidebar{
            text-align: right;
            margin-top: 0.44em;
        }

        p.body{
            text-align: left;
            width: 100%;
            transform: translate(-0.5em, -0.5em);
        }

        p:only-child{
            margin-top: 0;
        }
    }
}

.ishgardbox.transparent{

    > div:first-child{
        background-image: url("/assets/box/top_p.png");
    }

    > div:nth-child(2){
        background-image: url("/assets/box/middle_p.png");
    }

    > div:last-child{
        background-image: url("/assets/box/bottom_p.png");
    }

}

.ishgardbox.dark{

    color: var(--white);
    text-shadow: var(--heavy-text-shadow);

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

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

    > div:first-child{
        background-image: url("/assets/box/top_d.png");
    }

    > div:nth-child(2){
        background-image: url("/assets/box/middle_d.png");
    }

    > div:last-child{
        background-image: url("/assets/box/bottom_d.png");
    }

}

.ishgardbox.mini{

    > div:first-child{
        padding-top: calc(var(--height) / 4);
        height: calc(var(--height) - 1px);
    }
}

::-webkit-scrollbar{
    width: 0.77em;
    height: 0.77em;
}

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

.ishgardbox :is(div, section)::-webkit-scrollbar-track{
    background-color: var(--fifty-black);
}

::-webkit-scrollbar-thumb{
    padding: 0.5ch 2.5ch!important;
    color: var(--white2)!important;
    background: var(--brown4)!important;
    border: 2px outset var(--brown3)!important;
}

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

	floating sidebars with nonopupu YAY

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

.seaofclouds{
    margin: var(--gap) auto;
    text-align: center;
    text-shadow: var(--literal-text-shadow);
    display: flex;
        justify-content: center;
        gap: var(--gap);

    .sidebar{
        width: 359px;
        height: fit-content;
        max-height: var(--full-height);
        position: sticky;
        top: var(--gap);
        align-self: start;

        > *{
            max-height: var(--full-height);
        }
    }

    .body{
        display: block;
        width: 359px;
    
        > div{
            background-position: 0 0;
            padding-left: calc(21px + 1em);
            padding-right: calc(22px + 1em);

            > *{
                max-width: 100%;
            }
        }
    
        > div:first-child{
            --height: 78px;
            background-image: url("/assets/box/top_xs.png");
            background-repeat: no-repeat;
            height: var(--height);
            padding-top: calc(var(--height) / 2);
            line-height: 1;
        }
    
        > div:nth-child(2){
            background-image: url("/assets/box/middle_xs.png");
            background-repeat: repeat-y;
            min-height: 118px;
            height: max-content;
            overflow: auto;
        }
    
        > div:last-child{
            background-image: url("/assets/box/bottom_xs.png");
            background-repeat: no-repeat;
            height: 90px;

            p:only-child{
                margin-top: 0;
            }
        }
    }

    .body.mini > div:first-child{
        padding-top: calc(var(--height) / 4);
        height: calc(var(--height) - 1px);

        > p:only-child{
            transform: translateY(calc(var(--height) / 4.44));
        }
    }

    .body:not(:first-child){
        margin-top: var(--gap);
    }

}

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

	main content box god help me

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

main.ishgardbox, .column.ishgardbox{

    > div{
        display: grid;
        grid-template-areas: "sidebar body";
        grid-template-columns: calc(25% + var(--gap)) 1fr;
        gap: var(--gap);
        align-items: start;
    
        .sidebar{
            grid-area: sidebar;

            > *:last-child{
                margin-bottom: 0;
            }
        }

        .sidebar.arrow:not(h2){
            background-image: url("/assets/divider_v.png");
            background-repeat: no-repeat;
            background-position: right center;
            padding-right: var(--gap);
            margin-right: var(--one-fourth-gap);
            min-height: calc(872px + var(--double-gap));
        }

        h2.arrow{
            padding-right: var(--gap);
        }

        .sidebar:not(h2){
            font-size: 0.95em;
            align-self: start;
            height: fit-content;
            position: sticky;
            top: var(--gap);
            align-self: start;
        }

        nav, .nested{
            display: flex;
                flex-flow: column nowrap;
                justify-content: center;
                align-items: stretch;
                gap: var(--half-gap);
            width: fit-content;
            margin: auto;
        }

       .nested{         
            align-self: flex-end;
            align-items: flex-end;
            width: min-content;
            margin: 0;

            div{
                width: 100%;
            }
        
            a{
                /* width: 70%; */
                /* background: var(--brown3)!important; */
                /* border: 2px outset var(--brown2)!important; */
                padding-left: 1ch!important;
                padding-right: 1ch!important;

                &:is(:hover, :focus){
                    /* background: var(--brown4)!important; */
                    /* border: 2px outset var(--brown3)!important; */
                }
            }
        }
    
        .body{
            grid-area: body;
        }
    }

    > div:first-child h2.sidebar{
        margin-top: 0;
        padding-top: 0.44em;
    }

    > div:first-child h2.body{
        margin-top: 0.5em;
        font-size: calc(var(--heading-size) / 1.33);
    }

    > div:nth-child(2){
        padding-top: 1em;
    }

    > div > section.body{
        padding-top: 1em;
        padding-right: var(--half-gap);
    }
}

/* navigation and buttons */

nav a, .btn, button{
    display: block;
    padding: 0.5ch 2.5ch!important;
    color: var(--white2)!important;
    background: var(--brown4)!important;
    border: 2px outset var(--brown3)!important;
    text-shadow: var(--heavy-text-shadow)!important;
    text-decoration: none;
}

:is(nav a, .btn, button):is(:hover, :focus){
    background: var(--brown2)!important;
    border-color: var(--brown)!important;
    color: var(--white)!important;
}

/* swapping sidebar sides */

.ishgardbox.reverse > div{
    grid-template-areas: "body sidebar";
    grid-template-columns: 1fr calc(25% - var(--half-gap));
}

.ishgardbox.full > div{
    display: block;

    nav{
        padding-top: 2.5em;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--gap);
    }
}

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

	updates and rss boxes

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

#updates, #rss{
    padding: 1em;
    width: 77%;
    margin: auto;
}

.arrow :is(#updates, #rss){
    width: 88%;
}

#updates{
    background: var(--fifty-brown);
    margin-top: calc(-1 * var(--two-third-gap));
    border: 2px inset var(--brown3);

    ul{
        padding: 0;
        margin: 0 auto;
        list-style: none;
    }

    li {
       white-space: pre-line;
       list-style: none;
       text-align: center;
    }
 
    li::first-line {
       font-weight: bold;
    }
 
    li:not(:last-child) {
       margin-bottom: 1em;
    }
}

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

		rss feed

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

#rss{
    background: var(--fifty-white);
    border: 2px inset var(--brown);
    display:flex; 
    gap: 0.5em; 
    align-items: center; 
    justify-content:center;
    margin: 1em auto;
}

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

	footer

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

footer{
    text-align: center;
    line-height: 1;
    font-size: 0.88em;
    
    p{
        margin: 0.66em auto;
        max-width: none;
    }

    p:first-child{
        margin-top: 1em;
    }
}

/* breadcrumb navi */

p#breadcrumb{
	text-transform: capitalize;
	font-size: 0.95em;

	a:last-of-type{
		display: contents;
		color: inherit;
		pointer-events: none;
	}
}

p#breadcrumb::after{
	content: "-";
}

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

	finishing touches!!!

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

		spoiler text

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

.spoiler{
    display: inline-block;
    background-color: var(--black);
    padding: 0.1ch;
}

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

		buttons

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

#buttons{
    figure{
        display: inline-block;
        margin: 0;

        img[data-src*="32"]{
            margin-top: 1ch;
        }
    }
}

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

		textareas...

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

textarea{
    background-color: var(--fifty-white);
    border: 2px inset var(--mint);
    min-width: 44%;
    font-size: 0.88em;
    font-family: var(--body-font);
    padding: 0.5ch;
    text-shadow: var(--literal-text-shadow);
    line-height: 1.22;
    color: var(--fifty-black)!important;
}

textarea::placeholder{
    text-shadow: var(--literal-text-shadow);
    color: var(--fifty-black);
}

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

    nice table...!!!

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

table.nice{
    width: fit-content;
    margin: 1em auto;
    background-color: var(--thirty-white);
    border: 2px inset var(--mint);
    --cell-border: 2px dashed var(--fifty-brown3);

    th{
        font-size: 1.11em;
        border-right: var(--cell-border);
        color: var(--brown4);
        background-color: var(--fifty-brown);
        text-align: right;
    }

    th::first-letter{
        font-size: larger;
        letter-spacing: 1px;
    }

    th, td{
        padding: 0 1ch;
    }

    tr:not(:last-child) :is(th, td){
        border-bottom: var(--cell-border);
    }

    td{
        text-align: left;
    }
}

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

		cursors

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

html, .fancybox__caption{
	cursor:url("/assets/cursor.cur") 27 11, auto;
}

a, button, details summary, dfn, *[popovertarget], 
[class^="text-hover-image"], input[type="submit"],
#HCB_comment_form_box button, input#hcb_submit.submit.btn,
[onclick], #readonly, .readonly{
	cursor: url("/assets/pointer.cur") 13 5, pointer;
}

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

	style my freaking tooltip!!

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

/* style-my-tootltips plugin, tooltip styling */
#s-m-t-tooltip{
	/* basic */
	max-width:44ch;
	z-index:9999;
	margin:-1.33em 0 0 1.33em;
	/* style and design */
	background:var(--black); /* fallback if rgba not supported */
	background:var(--seventy-black);
	color: var(--white);
    text-shadow: var(--heavy-text-shadow);
    padding: 0.5ch 1ch;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	/* font */
	font-family: var(--body-font);
	font-size:0.88em;
	line-height: 1;
    text-align: center;
}