@import "https://fonts.googleapis.com/css2?family=Anek+Malayalam:wght@400&family=Quicksand:wght@400..700&family=Fira+Code&display=swap";

:root {
	--primary: #7acdb9;
	--secondary: #60e294;
	--accent: #bd92d8;
	--background: #fcfffa;
	--bg-variant-a: #f5f7fa;
	--bg-variant-b: #e9f6f2;
	--text: #171a26;
}
@media (prefers-color-scheme: dark) {
	:root {
		--primary: #60e294;
		--secondary: #7acdb9;
		--background: #171a26;
		--bg-variant-a: #23262f;
		--bg-variant-b: #1b1e27;
		--text: #fcfffa;
	}
}

html {
	background-color: var(--background);
	@media (max-width: 800px) {
        &:has(.menu-toggle:checked) {
            overflow: hidden;
        }
	}
}

body {
	margin: 0;
	min-height: 100dvh;
}

h1 {
	font-size: 2.25rem;
	font-family: "Anek Malayalam", sans-serif;
	font-style: normal;
	color: var(--text);
}

h2 {
	font-size: 1.5rem;
	font-family: "Anek Malayalam", sans-serif;
	font-style: normal;
	color: var(--text);
}

h3 {
	font-size: 1.125rem;
	font-family: "Anek Malayalam", sans-serif;
	font-style: normal;
	color: var(--text);
}

h4 {
	font-size: 1rem;
	font-family: "Anek Malayalam", sans-serif;
	font-style: normal;
	color: var(--text);
}

h5 {
	font-size: 0.875rem;
	font-family: "Anek Malayalam", sans-serif;
	font-style: normal;
	color: var(--text);
}

p {
	font-size: 1rem;
	font-family: "Quicksand", sans-serif;
	font-style: normal;
	color: var(--text);

}
a {
    font-family: "Quicksand", sans-serif;
	color: var(--primary);
	&:hover {
		color: var(--secondary);
	}
	&:has(strong){
	    color: var(--accent);
	}

	&[href^="http://"]:not(:has(svg)),
	&[href^="https://"]:not([href^="https://www.theanaverwaerde.dev"]):not(:has(svg)) {
    	&::after{
            content: "";
            display: inline-block;
            width: 1.2rem;
            height: 1.2rem;
            margin-bottom: -0.3rem;
            margin-right: 3px;

            background-color: var(--primary);

            mask-image: url("/icons/external-link.svg");
            mask-size: 1.2rem 1.2rem;
            mask-repeat: no-repeat;
	    }
		&:hover::after {
			background-color: var(--secondary);
		}
		&:has(strong)::after{
		    background-color: var(--accent);
		}
	}
}

li {
	font-size: 1rem;
	font-family: "Quicksand", sans-serif;
	font-style: normal;
	color: var(--text);
	a {
		color: var(--primary);
		&:hover {
			color: var(--secondary);
		}
	}
}

:not(a) > strong {
	color: var(--accent);
}

header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: 60px;
	max-width: 800px;
	margin: 0 auto;
	padding: 0 20px;
	background-color: var(--background);

	#header-left {
		a {
			display: flex;
			flex-direction: row;
			align-items: center;
			text-decoration: none;
			gap: 20px;
		}
	}

	#logo {
		width: 50px;
		fill: var(--text);
	}

	span#header-title {
		font-size: 1.125rem;
		font-family: "Quicksand", sans-serif;
		font-style: normal;
		font-weight: 700;
		text-align: center;
		color: var(--text);
	}

	#header-right {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 20px;
	}

	.navigation {
		font-size: 0.875rem;
		font-family: "Quicksand", sans-serif;
		font-style: normal;
		text-decoration: none;
		color: var(--text);
		margin-right: 20px;

		&:hover {
			color: var(--text);
			text-decoration: underline;
		}

	}

	.social-media-icon {
		fill: var(--text);
		width: 20px;
		height: 20px;

		&:hover {
			fill: var(--text);
			width: 20px;
			height: 20px;
		}
	}

	.menu-toggle, .burger {
        display: none;
	}

	@media (max-width: 800px) {
		.burger {
            cursor: pointer;

            width: 24px;
            height: 18px;

            display: flex;
            flex-direction: column;
            justify-content: space-between;

            span {
                display: block;
                height: 3px;
                background: var(--text);
            }
		}

        #header-right {
            display: none;

            flex: 1;
            flex-wrap: wrap;
            align-content: center;
            justify-content: center;

            .navigation {
                flex: 0 0 100%;
                text-align: center;
                margin: 0;

                font-size: 1.125rem;
            }

            .navigation + .navigation {
                margin-top: 24px;
            }

            .social-media-icon {
                flex: 0 0 auto;
                width: 30px;
                height: 30px;
                margin-top: 48px;
            }
        }

        &:has(.menu-toggle:checked) {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
           	height: unset;
            flex-direction: column;
            padding: 48px 0;
            z-index: 100;

            #header-right {
                display: flex;
            }

            .burger {
                width: 35px;
                height: 24px;

                span{
                    &:nth-child(1) {
                        transform: translateY(10.5px) rotate(45deg);
                    }
                    &:nth-child(2) {
                        opacity: 0;
                    }
                    &:nth-child(3) {
                        transform: translateY(-10.5px) rotate(-45deg);
                    }
                }
            }
        }
    }
}

#content {
    display: flow-root;
	max-width: 800px;
	margin: 0 auto;
	min-height: calc(100dvh - 60px - 60px); /* minus header and footer height */
    @media (max-width: 800px) {
        padding: 0 16px;
    }
}


footer {
	max-width: 800px;
	margin: auto auto 0 auto;
	display: flex;
	flex-direction: column;
	height: 60px;
	nav {
		align-self: center;

		ul {
			gap: 20px;
			list-style-type: none;
			display: flex;
			flex-direction: row;
			margin: 0;
			padding: 10px;

			li {
				a {
					font-size: 0.75rem;
					font-style: normal;
					text-decoration: none;
					color: var(--text);

					&:hover {
						color: var(--text);
						text-decoration: underline;
					}
				}
			}
		}
	}

	span#copyright {
		font-size: 0.625rem;
		font-family: "Quicksand", sans-serif;
		font-style: normal;
		color: var(--text);

		@media (max-width: 800px) {
            padding: 0 8px;
        }
	}
}