@import "/css/colors.css";

* {
	margin: 0;
	padding: 0;
	border: 0;
	overflow-x: visible;
	overflow-y: unset;
}

/* Avoid showing the background of the scrollbar when the content is small enough */
html {
	margin-left: calc(100vw - 100%);
	margin-right: 0;
	overflow-y: scroll;
}

::selection {
    color: var(--selection-fg-color);
    background: var(--selection-bg-color);
}

::-moz-selection {
    color: var(--selection-fg-color);
    background: var(--selection-bg-color);
}

body {
	color: var(--fg-color);
	background: var(--bg-color);
	margin-bottom: 15em;
	margin-left: .5em;
	margin-right: .5em;
	font-size: 18px;
	font-family: "Nimbus Sans", "Nimbus Sans L", "Inter", "Helvetica", "inconsolata", "DejaVu Sans", sans, "Verdana", sans-serif, "Georgia", serif, monospace;
    font-weight: 500;
}

header {
	color: var(--accent-color);

	max-width: 37em;

	margin-left: auto;
	margin-right: auto;
	margin-top: 16px;
	margin-bottom: 10px;

	text-align: center;

	/* padding-top: 12px; */
	/* padding-bottom: .25em; */
	padding-left: 0.75em;
	padding-right: 0.75em;

	/* border-top: 1em; */
}

table {
    border-spacing: 0px;
}

#color-scheme-button-light {
	display: none;
}

.header_flex_div {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: baseline;
	position: relative;
	padding: 0 1.25em;
}

.header_bottom_bar{
	border: 0;
	clear:both;

	display: block;

	width: 100%;
	max-width: 37em;
	height: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: .5em;
	margin-bottom: .5em;
	padding-top: 0;
	padding-bottom: 0;
	border-top: 1px dashed var(--secondary-accent-color);
}

.article_top_bar {
	border: 0;
	clear:both;
	display: block;
	width: 100%;
	max-width: 37em;
	height: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0em;
	margin-bottom: 18px;
	padding-top: 0;
	padding-bottom: 0;
	border-top: 1px dashed var(--secondary-accent-color);
}

#header_link, #header_link_short {
	text-decoration: none;
	color: inherit;
	transition: .75;

	font-family: "Nimbus Sans", "Nimbus Sans L", "Inter", "Helvetica", "inconsolata", monospace, "DejaVu Sans", sans, "Verdana", sans-serif, "Georgia", serif;
}

#color-scheme-button {
	position: absolute;
	top: 30px;
	right: 0;
	display: inline-block;
	cursor: pointer;
	fill: var(--fg-color);
	opacity: 75%;
}

#header_link:hover {
	color: var(--header-hover-fg-color);
}

#header_title {
	/* margin-bottom: .150em; */
	font-size: 2em;
	width: 100%;
    margin-bottom: 4px;
}

#rss {
    /* display: inline-flex; */
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    color: var(--fg-color);
    /* margin-left: 8px; */
    /* margin-bottom: 8px; */
    /* padding-left: 8px; */
    /* padding-bottom: 8px; */
    opacity: 20%;

    position: absolute;
    left: calc(50% + 6rem);
    top: 40%;
    transform: translateY(-50%);
}

#rss svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

#rss:hover,
#color-scheme-button:hover {
    opacity: 100%;
}

article {
	color: var(--fg-color);

	max-width: 37em;

	margin-left: auto;
	margin-right: auto;
	margin-bottom: .9em;

	text-align: left;

    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;

    overflow-wrap: break-word;

	/* padding-left: 0.5em; */
	/* padding-right: 0.5em; */
	/* padding-top: 0.5em; */
	/* padding-bottom: 1em; */
    padding: 20px;
    border: 1px solid var(--hover-bg-color);

	border-radius: 10px;
}

a {
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    white-space: normal;

    word-break: auto-phrase;
}


.article_bottom_bar {
	border: 0;
	clear: both;

	display: block;

	width: 100%;
	max-width: 37em;
	height: 0px;

	margin-left: auto;
	margin-right: auto;
	margin-top: .25em;
	margin-bottom: 0;

	padding-top: 0;
	padding-bottom: 0;
	/*! border-bottom: dashed; */
	border-top: 1px dashed var(--secondary-accent-color);
}

footer {
	text-align: center;
	font-size: 0.75em;
	a:hover {
		text-decoration: none;
	}
	br {
		margin-bottom: 3px;
	}
}

#footer-buttons {
	padding: 0;
	margin: 0;
	border-width: 0;
	width: 80px;
	opacity: 45%;
}

#footer-buttons:hover {
	opacity: 100%;
}

.footer-div {
	padding: 0em 2em 2.5em 2em;
	margin-left: auto;
	margin-right:auto;
}

#index-title, #blog-title {
	text-align: center;
	color: var(--title-color);
	padding-top: 0em;
	padding-bottom: .25em;
	/* animation: zoom-in-zoom-out 5s ease-in-out infinite; */
	animation: none;
    font-size: 26px;
}

#blog-title {
	animation: none;
}

img {
	overflow: hidden;

	height: 100%;
	width: 100%;

	color: black;
	background: transparent;
}

a:visited, a:active, a:link {
	color: var(--link-color);
	text-decoration: none;
}

a:hover {
	/* color: var(--link-hover-color); */
	text-decoration: underline;
    text-decoration: none;
    background: var(--hover-bg-color);
    /* filter: brightness(var(--hover-brightness)); */
}

ol {
	list-style-position: inside;
}

ul {
	list-style-type: none; /* Remove bullets */
	list-style-position: inside;
	list-style: inside;
	padding: 0;
	padding-bottom: .5em;
	margin: 0; /* Remove margins */
}

.header_buttons {
	/* margin: 0 0 .100em 0; */
	margin: 0;
	padding-bottom: 0em;
	font-size: 1.65em;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style-type: none;
}

/* h1 { font-size: 1.75em; } */

h2 {
	font-size: 1.25em;

	padding-top: .5em;
	padding-bottom: .5em;
}

h3 {
	font-size: 1em;
	text-align: left;

	padding-top: .5em;
	padding-bottom: .5em;
}

h4 { padding-top: .5em; text-align: left; }

h5 {
	padding-bottom: .25em;
	font-size: 1em;
}

p { padding-bottom: 1em; }

code {
	font-size: 85%;
	font-family: "Ubuntu Mono", monospace;
	/* background-color: #656c7633; */
	background-color: var(--code-bg);
	padding: 0 .2em;
	margin: 0;
	/* border-radius: 6px; */
	white-space: wrap;
	word-break: break-all;
}

pre {
    text-align: left;

    padding: .75em;
    border-radius: 0em;
    background-color: var(--code-bg);
    width: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0em;
    margin-bottom: 1.25em;
    border-width: 0px;
    border-color: var(--pre-border-color);
    border-style: solid;
    /* box-shadow: 5px 5px 7px black; */
    overflow: auto;
    font-size: 90%;
    scrollbar-color: var(--pre-border-color);
    scrollbar-width: thin;
    text-wrap: wrap;
}

pre code {
	font-size: 1em;
	background-color: inherit;
	padding: 0;
	margin: 0;
	border-radius: 0;
	word-break: normal;
	/* word-break: break-all; */
	overflow-wrap: normal;
	/* white-space: pre-wrap; */
	white-space: pre;
    hyphens: none;
}

/* #command { color: #33ff11; } */
#command_sym { color: #ff1694; }
#command_red { color: gold; }

a.anchor{
    display:block;
    position: relative;
    top: 150px;
    visibility: hidden;
}

hr {
	border: 0;
	clear:both;

	display:block;

	width: 90%;
	height: .1em;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}

#go_top {
	text-decoration: none;
	color: var(--link-color);
}

#go_top:hover {
	color: var(--accent-color);
}

/* list-style-type: none; /1* Remove bullets *1/ */
/* padding: 0; */
/* padding-bottom: .5em; */
/* text-align: left; */

#latest-uploads {
	padding: 0;
	#latest-uploads-title {
		display: flex;
		align-items: center;
		color: var(--fg-color);
        
        justify-content: center;

        position: relative;
        text-align: center;

		h2 {
			padding: 0;
			font-size: 20px;
			padding-bottom: .25em;
			/* text-decoration: underline; */
		}
		img {
			margin-bottom: 2px;
			margin-left: .5em;
		}
	}
	#date {
		text-wrap: nowrap;
		vertical-align: top;
		font-family: "inconsolata", monospace;
		a {
			color: var(--fg-color);
			text-decoration: none;
			font-family: "inconsolata", monospace;
			padding-right: .5em;
		}
	}
	#see-all-blog-entries {
		padding-top: .5em;
	}
}

#latest-uploads-blog-entries, #blog_entries {
    #title a:hover {
        text-decoration: none;
    }

    a:hover {
        filter: brightness(1.0);
    }

    tr:hover {
        /* background: #000; */
        background: var(--hover-bg-color);
        /* filter: brightness(var(--hover-brightness)); */
        cursor: pointer;
    }

    td a {
        display: block;
    }
}

@media (hover: hover) and (pointer: fine) {
    a:hover {
        filter: brightness(var(--hover-brightness));
    }

    #latest-uploads-blog-entries, #blog_entries {
        tr:hover {
            filter: brightness(var(--hover-brightness));
        }
    }
}


#urgent-announcement {
	color: var(--fg-color);
	font-weight: bold;
	padding: 0.5em 0em 1em 0em;
	a {
		color: orangered;
		text-decoration: underline;
	}
}

b-time {
	font-family: "inconsolata", monospace;
}

#blog-index-table {
    width: 100%;
}

@media (max-width: 800px) {
	body {
		margin-left: 0em;
		margin-right: 0em;
	}
    header {
        padding-top: .25em;
        padding-bottom: 0;
        margin-top: .5em;
    }
	article {
		/* padding-top: 0.25em; */
		/* padding-bottom: .5em; */
		/* margin-bottom: .25em; */
        padding: 20px 10px
	}
	footer {
		padding-top: .5em;
	}
    a {
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }
	.header_flex_div{
		flex-direction: column;
		align-items: center;
	}
	.header_buttons{
		margin-top: 0;
		font-size: 1.50em;
		align-self: center;
		padding-top: 0em;
		padding-bottom: .25em;

		a:hover {
			color: var(--hover-fg-color);
		}
	}
	.header_bottom_bar{
		/* width: 55%; */
	}
	.article_bottom_bar {
		/* width: 40%; */
		padding-top: .5em;
		margin-top: .5em;
		margin-bottom: .75em;
	}
	#header_title {
		font-size: 2.20em;
		line-height: 1.10em;
		/* padding-bottom: .10em; */
	}
	#index-title {
		padding-top: 0;
		padding-bottom: .25em;
        font-size: 1.60em;
	}


    #blog-index-table {
        a {
            text-decoration: none;
            text-align: left;
        }
        a:hover {
            color: var(--link-color);
            text-decoration: none;
        }
        /* border: 1px solid #505050; */
        /* border-radius: .5em; */
        /* padding: .5em; */
        #entry {
            display: flex;
            flex-direction: column-reverse;
            margin-bottom: .5em;
        }
        #date {
            /* padding-top: .10em; */
            /* padding-bottom: 1em; */
        }
        #title {
            display: block;
        }
        #title a {
            /* color: var(--fg-color); */
            font-size: 1.00em;
            display: block;
        }
        #date a {
            display: block;
            font-size: 1.00em;
            /* color: var(--article-date); */
        }
        #date a:hover {
            color: var(--fg-color);
        }
    }

	#latest-uploads {
        tr:nth-child(n + 6) {
            display: none !important;
        }
        tr:nth-child(6) #date {
            padding-bottom: 0;
        }
    }

    #latest-uploads-title {
        padding-bottom: .25em;
    }
    #see-all-blog-entries {
        padding-top: 0em;
    }
	#header_link {
		display: none;
	}
	#header_link_short {
		display: initial !important;
	}
}

@media (max-width: 400px) {
	article {
		/* margin-bottom: .25em; */
        padding: 10px 15px;
	}
	p { padding-bottom: .75em; }
	#header_title {
		font-size: 2.00em;
		padding-bottom: 0;
	}
	.header_bottom_bar {
		margin-top: 0;
		margin-bottom: 0;
	}
	.header_buttons {
		padding-bottom: .25em;
	}
	#index-title {
		padding-top: 10px;
		padding-bottom: 5px;
		font-size: 1.5em;
	}
	#latest-uploads-title {
		padding-bottom: 0;
	}
	.article_bottom_bar {
		padding-top: .25em;
		margin-top: .5em;
	}
	.footer-div {
		padding: 0em 2em 1.75em 2em;
	}
}

/*
@media (prefers-color-scheme: light) {
	#header_link:hover {
		color: #a04a00;
	}
	.header_bottom_bar {
		border-top: 1px dashed;
	}
	.article_bottom_bar {
		border-top: 1px dashed;
	}
	a:visited {
		color: #a04a00;
	}
	a:link {
		color: #a04a00;
	}
	a:hover {
		color: #CC2936;
	}
	pre {
		background-color: #eee;
		border: 3px solid #aaa;
		border-radius: 0px;
		margin-top: 0;
		box-shadow: 0px 0px 0px;
	}
	#command { color: inherit; }
	#command_sym { color: inherit; }
	#command_red { color: inherit; }

	#go_top:hover {
		color: #CC2936;
	}
	#go_top {
		color: #a04a00;
	}
	#urgent-announcement {
		color: #090909;
	}

	code {
		background-color: rgba(190,198,219,0.2);
	}
}
*/