@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@300..700&family=Syne:wght@400..800&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@1&display=swap');

body, 
#mb__slug *,
#mb__slug *::after,
#mb__slug *::before {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

#mb__slug {
	--fs:               clamp(1.1074rem, 1.0673rem + 0.2141vw, 1.26rem);
	--fw:               400;
	--clr:              gainsboro;
    --ff-inter:         "Inter", sans-serif;
	--ff-clash:         "Clash Display", sans-serif;
    
    max-width:          100%;
    padding:            1rem 0 1.3rem;
    display:            grid;
    row-gap:            0.33rem;
    grid-template-rows: 1.1rem 1.1rem 1.1rem;
    align-items:        end;

	/* for testing */
	/* background-color: #121212; */

    @media (min-width: 300px) {
        grid-template-rows: 2dvh 2dvh;
        grid-template-columns: max-content max-content;
    }
    @media (min-width: 550px) {
        grid-template-rows: 2dvh;
        grid-template-columns: max-content max-content 1fr;
    }
    
	.mb__copyright {
		font-family: var(--ff-inter);
		color: var(--clr);
		font-size: var(--fs);
		font-weight: var(--fw);
        /* setting lh to known height of 
        container evens out spacing issues 
        with p tags next to anchor tags */
        line-height: 2dvh;
        span {
            display: none;
        }
        svg { /* copyright logo */
			transform: scale(0.466);
			margin: 0 -6px -8px -6px;
            fill:var(--clr);
		}
        @media (min-width: 300px) {
            grid-column: 1 / -1;
            grid-row: 1;
        }
        @media (min-width: 550px) {
            grid-column: 1;
            grid-row: 1;
            span {
                display: inline;
                color: var(--clr);
                padding-inline: 0.33rem;
            }
        }
	}
	
	.mb__links {
		font-family: var(--ff-inter);
		font-size: var(--fs);
		font-weight: var(--fw);
        /* setting lh to known height of 
        container evens out spacing issues 
        with p tags next to anchor tags */
        line-height: 2dvh;
        a {
            color: var(--clr);
            text-decoration: none;
        }
        span {
            color: var(--clr);
            padding-inline: 0.33rem;
        }
        @media (min-width: 300px) {
            grid-column: 1;
            grid-row: 2;
        }
        @media (min-width: 550px) {
            grid-column: 2;
            grid-row: 1;
        }
    }
    
	.mb__mightybit {
		display: inline;
		font-family: var(--ff-inter);
		color: var(--clr);
		font-size: var(--fs);
		font-weight: var(--fw);
        /* setting lh to known height of 
        container evens out spacing issues 
        with p tags next to anchor tags */
        line-height: 2dvh;
        span {
            display: none;
        }
        a {  /* mightybit */
            text-decoration: none;
            font-family: var(--ff-clash);
            font-weight: 550;
            font-size: calc(var(--fs) * 1.1);
            color: var(--clr);
            /* setting lh to known height of 
            container evens out spacing issues 
            with p tags next to anchor tags */
            line-height: 2dvh;
            svg { /* arrow */
                transform: scale(0.85);
                margin-bottom: -4px;
                transition: rotate 300ms cubic-bezier(0.83, 0, 0.17, 1);
                fill: var(--clr);
            }
            &:hover svg { /* when hovering parent anchor, target this svg */
                rotate: -45deg;
                transition: rotate 300ms cubic-bezier(0.83, 0, 0.17, 1);
            }
        
		}
        @media (min-width: 300px) {
            grid-row: 2;
            grid-column: 2;
            span {
                display: inline;
                color: var(--clr);
                padding-inline: 0.33rem;
            }
        }
        @media (min-width: 550px) {
            grid-row: 1;
            grid-column: 3;
            justify-self: end;
            span {
                display: none;
            }
        }
	}
	
	.link-effect {
		position: relative;
		&::before {
			content: '';
			position: absolute;
			width: 100%;
			height: 1px;
			border-radius: 1px;
			background-color: var(--clr);
			bottom: -3px;
			left: 0;
			transform-origin: right;
			transform: scaleX(0);
			transition: transform 200ms ease-in-out;
		}
		&:hover::before,
		&:focus::before {
			transform-origin: left;
			transform: scaleX(1);
		}
	}
}