@import "https://www.nerdfonts.com/assets/css/webfont.css";

:root {
    --dark-main-color: #333;
    --light-main-color: #EEE;
    --main-accent-color: #553399;
    --selection-color: #AA77FF;

    --category-color-0: #3B82F6;
    --category-color-1: #EC4899;
    --category-color-2: #A855F7;
    --category-color-3: #10B981;
    --category-color-4: #F97316;
    --category-color-5: #06B6D4;
    --category-color-6: #F43F5E;
    --category-color-7: #8B5CF6;
    --category-color-8: #14B8A6;
    --category-color-9: #F59E0B;

    --title-highlight-color: purple;

    --logo-main: url(/img/logo/logo-dark.png);
}

body.dark {
    --dark-main-color: #EEE;
    --light-main-color: #333;

    --logo-main: url(/img/logo/logo-light.png);

    header {
	nav {
	    .wrapper {
		.menu.list {
		    ul {
			.option.mode {
			    .nf.nf-oct-moon {
				opacity: 0;
			    }

			    .nf.nf-oct-sun {
				opacity: 1;
			    }
			}
		    }
		}
	    }
	}
    }
}

html,
body {
    height: 100%;
    margin: 0;
}

body {
    font-size: 14px;
    background-color: var(--light-main-color);
    color: var(--dark-main-color);
    font-family: "AtkynsonMono", serif;
}

header {
    display: flex;
    flex-direction: row;
    height: 70px;
    justify-content: space-between;
    max-width: 1300px;
    margin: auto;
    padding: 0 40px;
    user-select: none;

    .easter.egg {
	position: absolute;
	left: 0;
	top: 0;
    }

    .logo.small {
	height: 40px;
	background-image: var(--logo-main);
	background-size: contain;
	background-position: left;
	background-repeat: no-repeat;
	flex: 1 1 0;
	margin: auto;
    }

    nav {
	height: 100%;
	flex: 1 1 0;
	
	.close.menu {
	    display: none;
	}

	.wrapper {
	    height: 100%;
	    align-content: center;
	    
	    .nf.menu {
		display: none;
	    }

	    ul {
		display: flex;
		margin: 0;
		list-style: none;
		height: 100%;
		align-items: center;
		justify-content: flex-end;

		.option {
		    font-size: 1.2rem;
		    margin: 0 0.7em;
		    cursor: pointer;

		    a:hover {
			opacity: 0.8;
		    }

		    &.mode {
			display: flex;
		    }

		    .nf-oct-sun {
			position: absolute;
			opacity: 0;
		    }
		}
	    }
	}
    }
}

main.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 40px;
    max-width: 1300px;
    margin: auto;
}

footer {
    text-align: center;
    font-size: 1.1em;
    padding-bottom: 10px;

    .info {
	margin: 0.5rem 0;
    }

    .nf.nf-linux-neovim {
	color: #02b951;
    }

    .nf.nf-fa-earth_americas {
	color: #1d87da;
    }

    .separator {
	opacity: 0.5;
    }
}

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

@media screen and (max-width: 780px) {
    header {
	padding: 0 4vw;

	.easter.egg {
	    display: none;
	}

	.logo.small {
	    background-size: 50vw;
	}

	nav {
	    display: flex;
	    justify-content: end;
	    flex: 0 0 auto;

	    .close.menu {
		text-align: right;
		display: none;
		align-items: center;
		justify-content: end;

		.nf.nf-fa-close {
		    padding: 3px;
		    font-size: 1.4em;
		}
	    }

	    .wrapper {
		text-align: right;
		display: flex;
		align-items: center;
		justify-content: end;
		width: fit-content;

		.nf.nf-fa-navicon {
		    display: block;
		    position: absolute;
		    padding: 3px;
		    font-size: 1.6em;

		    &:hover {
			opacity: 0.8;
		    }
		}

		.menu.list {
		    display: none;
		    position: absolute;
		    right: 4vw;
		    top: calc(35px + 0.8em);
		    background-color: var(--light-main-color);
		    opacity: 0.98;
		    z-index: 1;
		    width: 92vw;
		    border-radius: 15px;

		    ul {
			flex-direction: column;
			align-items: baseline;
			padding: 10px 20px;

			.option {
			    margin: 0.2em 0;
			    font-size: 1.8em;
			}
		    }
		}

		&:focus-within {
		    .menu.list {
			display: block;
		    }
		}
	    }

	    &:focus-within {
		.close.menu {
		    display: flex;
		}

		.nf-fa-navicon.menu {
		    display: none;
		}
	    }
	}
    }

    footer {
	font-size: 1em;
    }
}