@import "normalize.css";
@import "fonts.css";
@import "highlight-monokai.css";

/* nextDESIGN v9
 *
 * nextDESIGN is a personal web design for mmk2410.org.
 * The current version (v9) is focused in simplicity and minimalism.
 *
 * 2020-2022 © Marcel Kapfer <opensource@mmk2410.org>
 * Licensed under the MIT License
 */

/***************
 * Variables
 ***************/

:root {
	--c-bg: #fafafa;
	--c-bg-inv: #333;
	--c-bg-main: #fff;
	--c-bg-main-inv: #222;
	--c-primary: #4d3c9b;
	--c-bg-category: #4d3c9b;
	--c-primary-inv: #ad9bff;
	--c-bg-category-inv: #755bf0;
	--c-bg-tag: #8171c8;
	--c-bg-tag-inv: #a49ccc;
	--c-font: #333;
	--c-font-inv: #fafafa;
	--c-btn-font: var(--c-font);
	--c-btn-bg: var(--c-bg-category);
	--c-btn-shadow: #aaa;
	--c-btn-shadow-inv: #000;

	--s-content: 800px;
	--s-nav-title: 36px;
	--s-border: 2px;
	--s-border-radius: 2px;
	--s-comment-margin-top: 60px;
	--s-font-size: 18px;

	--p-box-shadow: 1px 1px 5px #888;
}

html {
    font-size: var(--s-font-size);
}

body {
    background-color: var(--c-bg);
    color: var(--c-font);
    font-family: "Raleway", sans-serif;
    line-height: 1.5;

    @media (prefers-color-scheme: dark) {
	background-color: var(--c-bg-inv);
	color: var(--c-font-inv);
    }
}

body > header {
    align-items: center;
    color: var(--c-font);
    display: flex;
    justify-content: space-between;
    padding: 20px 40px;

    #title {
        color: var(--c-font);
	font-size: var(--s-nav-title);
	font-weight: 700;
        text-decoration: underline;
        text-decoration-color: var(--c-primary);
        text-decoration-thickness: 5px;
    }

    & a {
	color: var(--c-primary);
	text-decoration: none;

	&:hover {
	    text-decoration: underline;
	}
    }

    & nav {
	    display: inline;

        & a {
            text-transform: capitalize;
            padding: 5px 6px;
            display: inline-block;

            &:hover {
                text-decoration: none;

                &:after {
                    width: 100%;
                    background: var(--c-primary);
                }
            }

            &:after {
                content: "";
                display: block;
                margin: auto;
                height: 2px;
                width: 0;
                background: 0 0;
                transition: width .25s ease, background-color .25s ease;
            }
        }

	& ul {
	        margin: 0;
	        padding: 0;
	        float: right;

	        & li {
		        display: inline;

		        &:last-child {
		            padding-right: 0;
		        }
	        }
	    }
    }

    .show-menu {
	    display: none;
	    margin-top: 10px;
	    padding: 10px;
	    text-align: center;
	    width: 100%;
        color: var(--c-primary);
        font-weight: bold;
        text-transform: uppercase;

        @media (prefers-color-scheme: dark) {
            color: var(--c-primary-inv);
        }
    }

    & input[type=checkbox] {
	display: none
    }

    @media screen and (max-width: 1100px) {
	border-radius: initial;
	flex-direction: column;
        background: var(--c-bg-main);
        padding-bottom: 0;

	    & nav {
	        display: none;
	        text-align: center;
	        width: 100%;

	        & ul {
		        float: unset;

		        & li {
		            display: block;
		            padding: 0;

		            & a {
			            display: block;
			padding: 10px 0;
		    }
		}
	    }
	}

	.show-menu {
	    display: block;
	}

	& input[type=checkbox]:checked ~ nav {
	    display: block;
	}
    }

    @media (prefers-color-scheme: dark) {
        background: var(--c-bg-inv);

        & a {
	    color: var(--c-primary-inv);
        }

        #title {
            color: var(--c-font-inv);
            text-decoration-color: var(--c-primary-inv);
        }

        & nav {
            & a {
                &:hover {
                    &:after {
                        background: var(--c-primary-inv);
                    }
                }
            }
        }
    }
}

main {
    background-color: var(--c-bg-main);
    border: solid var(--s-border) var(--c-primary);
    border-radius: 25px;
    box-shadow: var(--p-box-shadow);
    margin: 50px auto 100px;
    max-width: var(--s-content);
    padding: 20px 60px 80px;

    @media (prefers-color-scheme: dark) {
	    background-color: var(--c-bg-main-inv);
	    box-shadow: none;
    }

    & article {
	    margin: 40px 0;
    }

    & h1, & h2 {
	    font-size: 3rem;
	    margin: 20px 0 0;
	    padding: 0;
	    text-decoration: underline;
	    text-decoration-color: var(--c-primary);
	    text-decoration-thickness: 4px;

	    @media (prefers-color-scheme: dark) {
	        text-decoration-color: var(--c-primary-inv);
	    }
    }

    & h2 {
	    font-size: 2rem;
	    margin: 40px 0 0;
	    text-decoration-thickness: 3px;

	    & a {
	        color: var(--c-font);
	        text-decoration-color: var(--c-primary);

	        @media (prefers-color-scheme: dark) {
		        color: var(--c-font-inv);
		        text-decoration-color: var(--c-primary-inv);
	        }

	        &:hover {
		        text-decoration: none;
	        }
	    }
    }

    & h3 {
        font-size: 1.3rem;
    }

    & h4 {
        font-size: 1.1rem;
    }

    & .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
    }

    & figure {
	    margin: 0;

	    & img {
	        width: 100%;
            border-radius: 20px;
	    }
    }

    & p {
        text-align: justify;
    }

    & a {
	    color: var(--c-primary);

	    @media (prefers-color-scheme: dark) {
	        color: var(--c-primary-inv);
	    }

	    &:hover {
	        text-decoration: underline;
	    }
    }

    & code {
	    font-family: "JetBrains Mono", monospace;
    }

    .btn {
	    border: 1px solid var(--c-primary);
	    padding: 8px 12px;
	    border-radius: 20px;
	    line-height: 3;
	    white-space: nowrap;
        transition: all 0.15s;
        margin-right: 5px;
        text-decoration: none;

        &:hover {
            box-shadow: var(--c-btn-shadow) 1px 2px 6px;
            text-decoration: none;

	        @media (prefers-color-scheme: dark) {
	            box-shadow: var(--c-btn-shadow-inv) 1px 2px 6px;
	        }
        }

        @media (prefers-color-scheme: dark) {
            border-color: var(--c-primary-inv);
        }
    }

    pre {
      overflow-y: auto;
    }

    pre.hljs {
	    border-radius: 20px;
	    overflow-y: auto;
	    padding: 20px;
    }

    .pagination {
	    text-align: center;
    }

    .page-item {
	    display: inline;
	    padding-right: 10px;

	    &:last-child {
	        padding-right: 0;
	    }
    }

    .comment {
        margin-top: var(--s-comment-margin-top);
        text-align: center;

        & a {
            font-size: 1.1rem;
        }

        & p {
            font-size: 0.95rem;
            text-align: center;
        }
    }

    #tags > a, #categories > a {
	    font-size: 0.9rem;
	    color: #fff;
	    padding: 4px 8px;
	    border-radius: 20px;
	    white-space: nowrap;
        transition: all 0.15s;
        text-decoration: none;

        &:hover {
            box-shadow: var(--c-btn-shadow) 1px 1px 4px;
            text-decoration: none;

	        @media (prefers-color-scheme: dark) {
	            box-shadow: var(--c-btn-shadow-inv) 1px 1px 4px;
	        }
        }
    }

    #tags > a {
        color: var(--c-bg-tag);
        border: 1px solid var(--c-bg-tag);

        @media (prefers-color-scheme: dark) {
            color: var(--c-bg-tag-inv);
            border-color: var(--c-bg-tag-inv);
        }
    }

    #categories > a {
        color: var(--c-primary);
        border: 1px solid var(--c-primary);
        margin-right: 3px;

	    @media (prefers-color-scheme: dark) {
	        color: var(--c-primary-inv);
            border: 1px solid var(--c-primary-inv);
	    }
    }

    @media screen and (max-width: 1100px) {
	    border: none;
	    box-shadow: none;
	    margin: 0 auto;
        padding: 0 20px 80px;

        .tagories {
            text-align: left;
        }

        #tags a, #categories a {
            line-height: 35px;
        }
    }
}

footer {
    background-color: var(--c-font);
    color: var(--c-font-inv);
    padding: 40px;
    text-align: center;

    & a {
	  color: var(--c-font-inv);
	  text-decoration: none;

	  &:hover {
	    text-decoration: underline;
	  }
    }
}