@font-face {
	font-family: 'Paper Mono';
	src: url('fonts/PaperMono-Regular.woff2');
}

@font-face {
	font-family: 'Garet';
	src: url('fonts/Garet-Book.woff2');
}

@view-transition { navigation: auto; }

@media (min-width: 400px) {
	:root {
		--page-width: 50%;
	}

	nav {
		width: var(--page-width);
		border-radius: 0;
		border-bottom: 0.15em solid;
	}
}

@media (max-width: 399px) {
	:root {
		--page-width: 90%;
	}
	nav {
		width: 100%;
		border-radius: 0;
		border: 0;
		border-bottom: 0.15em solid;
	}
}
	
:root {
    --default-margin: 1.2em;
    --small-margin: 1.2em;
    --page-bg: #cacce3;
    --post-bg: #fefcff;
    --text-color: #622a73;
}

body {
    color: var(--text-color);
    background-color: var(--page-bg);
    margin: 0;
    font-family: Garet;
}

code {
    font-family: "Paper Mono";
}

pre {
    font-family: "Paper Mono";
    background-color: var(--page-bg);
    overflow: auto;
    width: 100%;
}

h1 {
	overflow-wrap: break-word;
}

.post {
    align: center;
    margin: 0 auto var(--default-margin) auto;
    border-color: #4b8123;
    background-color: #fefcff;
    padding-top: 0;
}


.content {
    margin: var(--default-margin);
}


hr {border-color: #4b8123;}


main {
    width: 100%;
    margin-top: var(--small-margin); 
}

a { color: #4b8123; }
a:visited { color: #723a83; }

ul { list-style-type: none; }

#navbar {
    top: 0;
    width: 100%;
}

nav {
    border-top: 0;
    align: center;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    border-color: #4b8123;
    background-color: #fefcff;
    top: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

nav a {  color: #4b8123; flex: 1 1; border-left: 0.15em solid; text-align: center; }
nav a:visited { color: #4b8123; }
nav a:first-child { border-left: none !important;};
article content { margin: 0; }
article h1{ margin: 0; }
article h2{ margin: 0; }