@view-transition {
  navigation: auto;
}

@media (prefers-color-scheme:dark) {
    :root {
        --fg: #cad3f5;
        --bg: #24273a;
        --bg2: #363a4f;
        --bg3: #181926;
        --accent: #8aadf4;

        --h1: #c6a0f6;
        --h2: #eed49f;
        --h3: #a6da95;
        --h4: #f5a97f;
    }
}

@media (prefers-color-scheme:light) {
    :root {
        --fg: #4c4f69;
        --bg: #eff1f5;
        --bg2: #ccd0da;
        --bg3: #dce0e8;
        --accent: #1e66f5;

        --h1: #8839ef;
        --h2: #df8e1d;
        --h3: #40a02b;
        --h4: #fe640b;
    }
}

* {
  font-family: "mononoki Nerd Font";
}

html, body {
    background-color: var(--bg);
    color: var(--fg);
    width: 100%;
    margin: auto;
    font-size: 1rem;
    line-height: 1.55;
}

main {
  padding: 10px;
}

h1 {
    color: var(--h1);
}

h2 {
    color: var(--h2);
}

h3 {
    color: var(--h3);
}

a {
    color: var(--accent)
}

footer {
    text-align: center;
    margin: auto;
    border-top: 2px solid var(--fg)
}

blockquote {
    border-left: 2px solid var(--fg);
    padding-left: 5px;
}

.front-matter {
    background-color: var(--bg2);
    border-radius: 15px;
    padding: 10px;
    max-width: 100%;
    overflow-wrap: break-word;
    hyphens: manual;
}

img {
    max-width: 100%;
}

img .bear {
  width: 576px;
  image-rendering: pixelated;
}

button {
    background-color: var(--bg2);
    color: var(--fg);
    border: 2px solid var(--accent);
    border-radius: 10px;
    padding: 10px;
}

code {
    background: var(--bg2);
    font-size: 16px;
    font-family: monospace;
    padding: 0 5px 1px;
    border-radius: 10px;
}

pre {
    margin: 10px 0 20px;
    padding: .7em;
    background: var(--bg2);
    border-bottom: 2px solid var(--accent);
    border-radius: 10px;
    font: normal normal .9em/1.7 monospace;
    overflow: auto;
}

pre code {
    font: normal normal 1em/1.7 monospace;
    padding: 0;
}

.header-container{
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: space-between;
align-items: center;
background-color: var(--bg2);
padding: 1rem 3rem;
border-bottom: 2px solid var(--accent);
}

.header-container b {
  font-size: 20pt;
}

nav.main-navbar{
  display: flex;
  justify-content: center;
}

nav.main-navbar, nav.main-navbar ul {
	padding: 0;
	margin: 0;
}

nav.main-navbar ul li {
	display: inline-block;
}

nav.main-navbar a, nav a:visited{
	background: var(--bg2);
  color: var(--accent);
	display: inline-block;
	text-decoration: none;
	border: solid 2px var(--accent);
  border-radius: 10px;
	margin: .2rem .5rem;
	padding: .3rem .8rem;
	transition: .4s;
}

nav.main-navbar a:hover {
	background-color: var(--accent);
	color: var(--bg2);
}

nav.main-navbar a.nav-current {
    background-color: var(--accent);
    color: var(--bg);
}

tr th {
    background-color: var(--bg2);
    color: var(--accent);
}

table, tr {
  border-color: var(--color);
}

table {
  width: 100%;
}

.post-navigation {
  align-items: center;
}

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
}

.responsive-grid {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: start;
  margin-bottom: 1.5rem;
}

.more-item {
  border: 2px solid var(--accent);
  background-color: var(--bg3);
  border-radius: 10px;
  padding: 5px;
  margin: auto;
  margin-bottom: 10px;
}

@media only screen and (max-width: 600px){
    nav.main-navbar ul{
    	display: flex;
    	flex-wrap: wrap;
    	gap: 1rem;
    	margin-top: 1rem;
    	justify-content: center;
    }
    nav.main-navbar ul li a,
    nav.main-navbar ul li a:visited{
      margin: 0;
      border: none;
      background: none;
      padding: .1rem .3rem;
    }
    .header-container{
      display: block;
	    align-items: center;
	    justify-content: center;
    }
}