@import url('https://static.omg.lol/type/font-honey.css');
@import url('https://static.omg.lol/type/font-lato-regular.css');
@import url('https://static.omg.lol/type/font-lato-bold.css');
@import url('https://static.omg.lol/type/font-lato-italic.css');
@import url('https://static.omg.lol/type/font-md-io.css');
@import url('https://static.omg.lol/type/fontawesome-free/css/all.css');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&family=Pixelify+Sans:wght@400..700&family=Poppins&display=swap');

@font-face {
    font-family: 'Nineteen Ninety Seven';
    src: url('https://whiona.me/fonts/nineteenninetyseven-11xb-webfont.woff2') format('woff2'),
         url('https://whiona.me/fonts/nineteenninetyseven-11xb-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

:root {
	--text: #212529;
	--background: rgba(240,240,240,1);
	--link: #3e6697;
	--accent: #868e96;
}

@media (prefers-color-scheme: dark) {
	:root {
		--text: #eee;
		--background: rgba(34,34,34,1);
		--link: #accaec;
		--accent: #ced4da;
	}
}

* {
	box-sizing: border-box;
}

html {
  background-color: #37394A;
  background-image:url('https://whiona.me/images/bgs/nightsky.png');
  background-attachment:fixed;
}

body {
	font-family: 'Lato', sans-serif;
	font-size: 120%;
	color: var(--text);	
}

header nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

header nav li {
	display: inline-block;
}

header nav li a {
	display: block;
	text-decoration: none;
	margin-right: 1em;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Nineteen Ninety Seven', serif;
	margin: 1rem 0;
}

h1 {
  text-align:center;
}

p, li {
	line-height: 160%;
}

header, main, footer {
	max-width: 60em;
	margin: 2em auto;
	padding: 1em 1.5em;
	background-color:var(--background);
	border:1px solid #91b9e6;
	box-shadow: 15px 15px 0px 0px rgba(0, 0, 0, .5);
}

header {
	margin-top: 4em;
	text-align:center;
}

footer p {
	text-align: center;
}

a:link { color: var(--link); }
a:visited { color: var(--link); }
a:hover { color: var(--link); }
a:active { color: var(--link); }

.post-info, .post-tags {
	font-size: 85%;
	color: var(--accent);
	text-align: right;
}

.post-info i:nth-child(2) {
	margin-left: .75em;
}

.tag {
	background: var(--accent);
	color: var(--background) !important;
	padding: .3em .4em;
	margin: .8em 0 0 .4em;
	border-radius: .5em;
	text-decoration: none;
	display: inline-block;
}

hr {
	border: 0;
	height: 1px;
	background: var(--text);
	margin: 2em 0;
}

code {
	padding: .2em .3em;
	border: 1px solid var(--accent);
	white-space: pre-wrap;
	word-wrap: break-word; 
}

pre, code {
	font-family: 'MD IO 0.4';
	font-size: 90%;
}

pre code {
	background:  #000;
	color:  #eee;
	display: inline-block;
	padding: 1em;
	white-space: pre-wrap;
	word-wrap: break-word;   
}

blockquote {
  border-left:2px solid var(--text);
  padding-left:1em;
  font-style:italic;
}

img {
	max-width: 100%;
}

table {
	border-collapse: collapse;
}

td, th {
	padding: .75em;
	text-align: left;
	border: 1px solid var(--accent);
}
	
.weblog-title a {
	text-decoration: none;
	color: var(--text);
	font-size:3em;
	font-family:'Nineteen Ninety Seven', serif;
}