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

	general variables: colors, shadows, etc

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

:root{

    /* text outlines */

	--text-shadow-white:
			calc(0.025em * 1) calc(0.025em * 0) 0
			var(--white2),
		calc(0.025em * 0.9239) calc(0.025em * 0.3827) 0
			var(--white2),
		calc(0.025em * 0.7071) calc(0.025em * 0.7071) 0
			var(--white2),
		calc(0.025em * 0.3827) calc(0.025em * 0.9239) 0
			var(--white2),
		calc(0.025em * 0) calc(0.025em * 1) 0
			var(--white2),
		calc(0.025em * -0.3827) calc(0.025em * 0.9239) 0
			var(--white2),
		calc(0.025em * -0.7071) calc(0.025em * 0.7071) 0
			var(--white2),
		calc(0.025em * -0.9239) calc(0.025em * 0.3827) 0
			var(--white2),
		calc(0.025em * -1) calc(0.025em * 0) 0
			var(--white2),
		calc(0.025em * -0.9239) calc(0.025em * -0.3827) 0
			var(--white2),
		calc(0.025em * -0.7071) calc(0.025em * -0.7071) 0
			var(--white2),
		calc(0.025em * -0.3827) calc(0.025em * -0.9239) 0
			var(--white2),
		calc(0.025em * 0) calc(0.025em * -1) 0
			var(--white2),
		calc(0.025em * 0.3827) calc(0.025em * -0.9239) 0
			var(--white2),
		calc(0.025em * 0.7071) calc(0.025em * -0.7071) 0
			var(--white2),
		calc(0.025em * 0.9239) calc(0.025em * -0.3827) 0
			var(--white2);

	--text-shadow-black:
		calc(0.025em * 1) calc(0.025em * 0) 0
			var(--black),
		calc(0.025em * 0.9239) calc(0.025em * 0.3827) 0
			var(--black),
		calc(0.025em * 0.7071) calc(0.025em * 0.7071) 0
			var(--black),
		calc(0.025em * 0.3827) calc(0.025em * 0.9239) 0
			var(--black),
		calc(0.025em * 0) calc(0.025em * 1) 0
			var(--black),
		calc(0.025em * -0.3827) calc(0.025em * 0.9239) 0
			var(--black),
		calc(0.025em * -0.7071) calc(0.025em * 0.7071) 0
			var(--black),
		calc(0.025em * -0.9239) calc(0.025em * 0.3827) 0
			var(--black),
		calc(0.025em * -1) calc(0.025em * 0) 0
			var(--black),
		calc(0.025em * -0.9239) calc(0.025em * -0.3827) 0
			var(--black),
		calc(0.025em * -0.7071) calc(0.025em * -0.7071) 0
			var(--black),
		calc(0.025em * -0.3827) calc(0.025em * -0.9239) 0
			var(--black),
		calc(0.025em * 0) calc(0.025em * -1) 0
			var(--black),
		calc(0.025em * 0.3827) calc(0.025em * -0.9239) 0
			var(--black),
		calc(0.025em * 0.7071) calc(0.025em * -0.7071) 0
			var(--black),
		calc(0.025em * 0.9239) calc(0.025em * -0.3827) 0
			var(--black);

	/* vibrant colours that pop!!!! */

	--red: hsl(352, 57%, 63%);
	--orange: hsl(19, 64%, 63%);
	--yellow: hsl(49, 84%, 60%);
	--green: hsl(79, 53%, 59%);
	--aqua: hsl(193, 46%, 69%);
	--blue: hsl(220, 54%, 67%);
	--purple: hsl(256, 68%, 74%);

	--red-link: hsl(352, 57%, 58%);
   --orange-link: hsl(20, 66%, 56%);
   --yellow-link: hsl(49, 91%, 47%);
	--green-link: hsl(79, 63%, 45%);
   --aqua-link: hsl(194, 52%, 60%);
	--blue-link: hsl(220, 55%, 62%);
	--purple-link: hsl(256, 55%, 63%);

	/* white to black to grey */

	--white: hsl(345, 22%, 96%);
	--white2: hsl(330, 33%, 99%);
	--white3: hsla(345, 22%, 96%, 0.55);
	--grey: hsl(348, 9%, 57%);
	--grey2: hsl(350, 12%, 37%); 
	--black: hsl(348, 8%, 26%); 
	--black2: hsl(0, 0%, 26%);
	--black2-rgb: 55, 53, 49;
	--brown: hsl(25, 50%, 30%);

	/* subtle background colours */

	--red-bg: hsl(353, 61%, 82%);
	--orange-bg: hsl(15, 79%, 81%);
	--yellow-bg: hsl(49, 100%, 86%);
	--green-bg: hsl(79, 69%, 85%);
	--aqua-bg: hsl(194, 47%, 87%);
	--blue-bg: hsl(216, 100%, 91%);
	--purple-bg: hsl(257, 55%, 87%);
	--brown-bg: hsl(25, 42%, 74%);

    /* fonts */

    --body-font: "mamemoji", small, sans-serif;
    --heading-font: "SilverLining", var(--body-font);
    --emoji-font: "EmojiFont", var(--body-font);
    --special-font: "Yurumoji", var(--body-font);

	/* shadow colours */
	
	--text-shadow-color: 348deg 55% 22%;
	--shadow-color: 208deg 32% 59%;

	/* this one is literally a text shadow for the text-shadow property */

	--literal-text-shadow: 
    1px 1px hsl(var(--text-shadow-color) / 0.5),
    2px 2px hsl(var(--text-shadow-color) / 0.33);

	--subtle-text-shadow: 
    1px 1px hsl(var(--text-shadow-color) / 0.25);
}

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

	basic styling

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

body{
    background-color: var(--aqua-bg);
    background-image: url("/assets/0019.png"), url("/assets/gg15.png"), linear-gradient(to bottom, var(--aqua-bg), var(--green-bg));
       background-size: calc(288px / 2), auto;
       background-attachment: fixed;
    font-family: var(--body-font);
    font-size: x-large;
    color: var(--black);
    line-height: 1.22;
}

.emoji{
    font-family: var(--emoji-font);
    font-size: xx-large;
}

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

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

	links

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

a{
	color: var(--blue-link);
	--hover-color: var(--red-link);
}

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

a,
a:is(:hover, :focus){
	transition: color 0.2s ease-in-out;
}

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

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

	headings

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

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

h1{
    font-size: 250%;
}

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

	grid container holding hugging me yeayh!!!

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

#holdme{
    display: grid;
    grid-template-areas: "header nav" "main nav" "footer footer";
        grid-template-rows: minmax(min-content, 5.55em) 1fr min-content;
    width: 840px; 
    min-height: 600px;
    background: var(--white2);
    margin: 16px auto 32px auto;
    padding: 16px;
    gap: 16px;
    border-radius: 8px;
    box-shadow: 12px 12px hsl(var(--shadow-color) / 0.22);
}

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

	header

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

header, h1{
    display: flex;
        justify-content: center;
        align-items: center;
}

header{
    grid-area: header;
    text-align: center;
    background: linear-gradient(to top, var(--aqua-bg), var(--green-bg));
    padding: 8px;
    padding-bottom: 0;
    border-radius: 6px;

    h1{
        gap: 8px;
        margin: 0;
        text-shadow: var(--text-shadow-white);
        filter: drop-shadow(2px 2px hsl(var(--text-shadow-color) / 0.22));
    }
}

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

	nav sidebar!!! cooool!!!!!

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

nav{
    grid-area: nav;
    text-align: center;
    align-self: flex-start;
    position: sticky;
    top: 10px;

    h2{
        margin: 0 auto;
        text-shadow: var(--subtle-text-shadow);
    }

    a{
        --link-width: 148px;
        box-sizing: border-box;
        display: block;
        background: var(--mint);
        background: linear-gradient(var(--mint), var(--mint-link));
        border: outset 4px var(--mint); 
        padding: 4px 8px 8px 8px;
        width: var(--link-width);
        margin: 16px 0;
        list-style: none;
        border-radius: 4px;
        text-decoration: none;
        color: var(--white);
        --hover-color: var(--white);
    }

    a:first-of-type{
        margin-top: 8px;
    }
    
    a span{
        display: inline-block;
        /* text-transform: lowercase; */
        text-shadow: var(--literal-text-shadow);
        /*
        font-size: x-large;
        font-family: var(--special-font);
        */
    }

    /* shiny button shine */

    a::before{
        display: block;
        width: calc(var(--link-width));
        height: 2px;
        background: linear-gradient(to right, transparent, var(--white2), transparent);
        content: "";
        position: absolute;
        transform: translate(-24px, -7px);
        opacity: 0.33;
        pointer-events: none;
    }
    
	--melon: hsl(177, 37%, 63%);
	--melon-link: hsl(177, 40%, 59%);
    
	--mint: hsl(144, 36%, 67%);
	--mint-link: hsl(144, 39%, 62%);
    
	--spring: hsl(88, 44%, 67%);
	--spring-link: hsl(88, 48%, 62%);

    a:is(:nth-of-type(7n + 1), :nth-of-type(7n)){
        background: linear-gradient(var(--aqua), var(--aqua-link));
        border-color: var(--aqua);
    }

    a:is(:nth-of-type(7n + 2), :nth-of-type(7n + 6)){
        background: linear-gradient(var(--melon), var(--melon-link));
        border-color: var(--melon);
    }

    a:nth-of-type(7n + 4){
        background: linear-gradient(var(--spring), var(--spring-link));
        border-color: var(--spring);
    }

    a:is(:nth-of-type(7n + 3), :nth-of-type(7n + 5)){
        background: linear-gradient(var(--mint), var(--mint-link));
        border-color: var(--mint);
    }
}

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

	main content

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

main{
    padding: 0 8px;
    grid-area: main;
    margin: 0 auto;
    text-shadow: 0.5px 0.5px hsl(var(--text-shadow-color) / 0.22);

    *:first-child{
        margin-top: 0;
    }
}

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

	footer yes the bottom okay

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

footer{
    grid-area: footer;
    font-size: x-large;
    text-align: center;
    background: hsl(98, 47%, 87%);
    border-radius: 6px;
    padding: 6px;
    padding-bottom: 8px;
    text-shadow: 0.5px 0.5px var(--green);
}

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

	font face rules

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

@font-face {
    font-family: 'Yurumoji';
    src: url('/fonts/Yurumoji.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Cherish';
    src: url('/fonts/Cherish.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SilverLining';
    src: url('/fonts/SilverLining.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'mamemoji';
    src: url('/fonts/mamemoji.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'EmojiFont';
    src: url('/fonts/EmojiFont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}