* {
    box-sizing: border-box;
}

html {
    font-size: 20px;
    scrollbar-gutter: stable;
}

@font-face {
  font-family: KiwiSoda;
  src: url('/blog/assets/fonts/KiwiSoda.ttf');
  font-weight: bold;
}
@font-face {
    font-family: Atkinson Hyperlegible;
    src: url('blog/assets/fonts/AtkinsonHyperlegible-Regular.ttf');
}

@font-face {
    font-family: Atkinson Hyperlegible;
    src: url('/blog/assets/fonts/AtkinsonHyperlegible-Bold.ttf');
    font-weight: bold;
}

#sidebar {
  background: var(--sidebar-bg);
  margin-left: 20px;
  padding: 2em 1em;
  /*we left 300px of room for the sidebar, but we want the width to be less than that since there should be some spacing between*/
  width: 240px;
  
  /*i put dashed borders on each side, but you can change it to a different type or remove them*/
  border-inline: 2px dashed var(--sidebar-border-color);
  /*outlines go outside of the borders, so it makes it look like stitching on the edges. cute!*/
  outline: 4px solid var(--sidebar-bg);
  
  /*the sidebar doesn't scroll with the rest of the page*/
  position: fixed;
  /*this stacks it on top of everything else*/
  z-index: 99;
  /*make sure it takes up the whole screen vertically*/
  height: 100%;
  /*and add a scrollbar if someone's window is too short to see all the content*/
  overflow-y: auto;
}

#sidebar h1 {
  margin-block: .5em;
}
/*link text in the sidebar should be the same color*/
#sidebar a {
  color: var(--sidebar-text);
}
/*font size for your name in the sidebar*/
#sidebar h1 a {
  font-size: 1.2em;
}
/*no underline for your name, or hovered links in sidebar*/
#sidebar h1 a,
#sidebar a:hover {text-decoration: none;}


/*profile text doesnt need as much spacing as the posts do*/
#profile p {
  margin-block: .3em;
  line-height: 1.5em;
}
/*styling the simple bio block*/
#bio {
  border-block: 2px dashed var(--sidebar-border-color);
  padding-block: .5em;
  margin-block: 1em;
  font-size: small;
}

/*for the rounded link buttons!*/
#sidebar nav ul {
  text-align: center;
  vertical-align: middle;
  margin-top: 0;
  margin-bottom: 1em;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 8px;
  justify-content: space-evenly;
}
#sidebar nav li a {
  /*set a width so they're the same size*/
  min-width: 120px;
  display: inline-block;
  background: var(--sidebar-button-bg);
  color: var(--sidebar-button-text);
  font-weight: bold;
  border-radius: 1rem;
  outline: 2px solid #fff0;
  transition: .2s;
  text-decoration: none;
}
#sidebar nav li a:visited {color: var(--sidebar-text);}
#sidebar nav li a:hover {
  background: var(--sidebar-button-bg-hover);
  color: var(--sidebar-button-text-hover);
  outline: 2px solid var(--sidebar-text);
  outline-offset: 3px;
}
/*and add some spacing around them too*/
#sidebar nav {
  margin-block:1.5em;
}

body {
  display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin-top: 2rem;
    margin-bottom: 2rem;
  /*change the main font here*/
  font-family: 'Atkinson Hyperlegible', Verdana, Tahoma, sans-serif;
  font-size: 16px;
  margin: 0;
  background: var(--site-bg);
  color: var(--post-text);
  line-height: 1.6em;
  /*if you use a bg image, this will keep it from scrolling*/
  background-attachment: fixed;
}

header h1,
header h2 {
    margin-bottom: 0.2rem;
	font-family: 'KiwiSoda', Verdana, Tahoma, sans-serif;
  font-weight: bold;
}

nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

}

nav ol {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

nav ol,
nav li {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
nav,
main,
footer,
.commentbox,
#disqus_thread {
    width: 90%;
    max-width: 42rem;
    padding: 1rem;
}

main {
    line-height: 1.6rem;
}

main img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
    max-width: 100%;
}

#latest_posts {
    list-style-type: none;
    font-size: 1.2rem;
    padding: 0;
}

pre {
    overflow: scroll;
}

#pagination {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.pagectrl {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
	word-wrap: break-word; 
	width: 0.5rem;
}

.pagenext {
    margin-left: auto;
	word-wrap: break-word; 
	width: 0.5rem;
}

.pageprev {
    margin-right: 1rem;
	word-wrap: break-word; 
	width: 0.5rem;
}

.pagectrl p {
    margin: 0;
	word-wrap: break-word; 
	width: 0.5rem;
}

footer {
    font-size: 0.8rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

footer p,
footer address,
footer aside {
    margin: 0;
    margin-inline: 0;
    margin: 0.1rem;
}

footer address {
    font-style: normal;
}

footer aside {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.lastupdate::after {
    content: " • ";
}

iframe {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
}

.tagList {
    list-style-type: none;
    padding: 0.25rem;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tagList a {
    font-size: 1.5rem;
}

.tagList li {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.tagged {
    margin-top: 3rem;
}

.tagged h2 {
    font-size: 2rem;
}

img[src*='/assets/images/candle.gif']
    float: right;
    padding-right: 1rem;
}