:root {
  --link-color: #6452e8;
  --link-bg-color: #9ae7ff;
  --clicked-color: #808080;
  --site-bg: #BFBFBF; /*or url('images/bgfilename.png') for an image*/
  --border-color: #80808080;
  --paper: white;
  --text-color: #404040;
  /*these next two colors are for when you highlight text on the page*/
  --selected-bg: #fffabd;
  --selected-text: #f7649c;
}

/*the noto serif font is a google font, available here: 
 * https://fonts.google.com/noto/specimen/Noto+Serif
 * 
 * if you don't include these files in a "fonts" folder on your website, your browser will try to substitute the next closest thing...
*/
@font-face {
    font-family: Noto Serif;
    src: url('/fonts/NotoSerif-SemiBold.ttf');
}
@font-face {
    font-family: Noto Serif;
    src: url('/fonts/NotoSerif-Black.ttf');
    font-weight: bold;
}

/*html {scroll-behavior: smooth;}*/
/*::selection {*/
/*  background: var(--selected-bg);*/
/*  color: var(--selected-text);*/
/*}*/
/** {*/
/*  box-sizing: border-box;*/
/*}*/

body {
background-attachment: fixed;
}

/*page title*/
/*h1 {*/
/*  font-size:4em;*/
/*  margin:0;*/
/*  padding:10px;*/
/*}*/
/*section title*/
/*h2 {font-size:2.5em;*/
/*  margin-block:12px;*/
/*  padding:10px;*/
/*  border-bottom: 2px solid var(--text-color);*/
/*}*/
/*column titles*/
/*h3 { font-size:1.5em;*/
/*  border-bottom: 2px solid var(--text-color);*/
/*}*/
/*and a smaller heading for within a column, this one has no underline*/
/*h4 {*/
/*  font-size:1.2em;*/
/*  margin-bottom:8px;*/
/*  margin-top:14px;*/
/*}*/

/*this is the page divider, hr means horizontal rule*/
/*hr {*/
/*  border: 1px solid var(--border-color);*/
/*  margin-block: 2em;*/
/*}*/

/*uncomment this line for sharper images
 img {image-rendering: pixelated;} */

/*use this class to make the heading font a certain size, it's meant to be styled as like a newspaper headline*/
/*.feature {*/
/*  font-size: 2em;*/
/*  margin-top:0;*/
/*}*/

.container {
  display: flex;
  flex-direction: row;
  margin-left: 200px;
}

.nav-bar {
  background-color: #fffefc;
  width: 176px;
  height: 100%;
  padding: 1rem 0.5rem 1rem 1rem;
  text-align: justify;
  font-size: 15px;
  display: flex;
  /*flex-direction: column;*/
  gap: 1rem;
}

.box {
  display: flex;
  /*flex-direction: row;*/
}


/*link styling! they're bold and match the text color until you hover them*/
/*nav a,*/
/*main a {*/
/*  font-weight: bold;*/
/*  color: var(--text-color);*/
/*}*/
/*visited links in the newspaper section turn grey instead of black*/
/*main a:visited {*/
/*  color: var(--clicked-color);*/
/*}*/
/*and hovering a link gives it a highlighted background*/
/*nav a:hover,*/
/*main a:hover {*/
/*  background-color:var(--link-bg-color)*/
/*}*/

/*all the dates are bolded by default*/
/*time {font-weight: bold;}*/
/*and this is for the in-article styling, which i already explained on the html side*/
/*article time::after {*/
/*  content: "•";*/
/*  margin-left:.3em;*/
/*}*/
/*justify text and hyphenate words automatically! wait this was pretty self-explanatory when you look at it... guess i didn't need to explain...*/
/*article {*/
/*  text-align: justify;*/
/*  hyphens: auto;*/
/*}*/
/*oh but if you don't use the article tags, you can change it to a class and use that instead? there we go, i had something helpful to say.*/

/*for white-on-black sections*/
/*.inverted {*/
/*  color: var(--paper);*/
/*  background-color: var(--text-color);*/
/*  padding:.4em 1em;*/
/*}*/
/*no underline for the links in these blocks...*/
/*.inverted a {*/
/*  font-weight: bold;*/
/*  color: var(--paper);*/
/*  text-decoration: none;*/
/*}*/
/*...unless you hover over them*/
/*.inverted a:hover {*/
/*  background-color: var(--link-color);*/
/*  text-decoration: underline;*/
/*}*/

/*page navigation, these are the links at the top that scroll to different parts of the page.*/
/*nav {*/
/*  border-block: 2px solid var(--text-color);*/
/*  padding-block: 6px;*/
/*  margin-block: 4px;*/
/*}*/
/*the list wraps around if it gets too long*/
/*nav ul {*/
/*  display: flex; flex-direction: row; flex-wrap: wrap; */
/*  margin: 0;*/
/*  padding: 0;*/
/*  list-style-type: none;}*/
/*automatically add | dividers between list items*/
/*nav li::after {content: "|"; padding-inline:6px;}*/
/*except for on the last one*/
/*nav li:last-child::after {content: "";}*/

/*regular list styling on the page needed a bit of spacing between items*/
/*main li {padding-bottom:1em;}*/

/*images!!!!! "photo" takes up the width of the column.*/
.photo {
  max-width:100%;
  display:block;
  margin:auto;
}
/*the small version takes up half of the column, with text to the left and right*/
.small-photo {
  max-width:50%;
  float:left;
  margin-right: 1em;
}
.small-photo-right {
  max-width:50%;
  float:right;
  margin-left: 1em;
}
/*since we're using floats, it's good to have a clearfix class*/
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
/*just realized i didn't have a class for centered images... this will work.*/
/*.center {*/
  /*change the max-width to whatever you want, having it at 80% just makes sure if it's too wide it will be scaled down and look centered in the div*/
/*  max-width:80%;*/
/*  display:block;*/
/*  margin:auto;*/
/*}*/

/*you don't even need to use this pic class, i honestly just needed it for my page and left it in here. it's just a guaranteed-small version of small-photo since that one can be as wide as half the column, i wanted to limit that more.*/
.pic img {
  float: left;
  max-width:112px;
  margin-right:12px;
}

/*for the "return to top" link at the bottom of the page*/
/*.end-nav {*/
/*  margin:1em;*/
/*  text-align:center;*/
/*}*/


/*the responsive section!*/
/*@media only screen and (max-width: 800px) {*/
  /*my original header was too wide for mobile and wasn't hyphenating, you might not need to make your top heading that much smaller but idk i think it looks better like this probably*/
/*  h1 {font-size:2.5em;}*/
  
  /*instead of 960px, make sure the content is exactly 100% of the screen*/
/*  footer,*/
/*  .container {max-width:100%;}*/
  /*and turn all the columns into one big long column instead*/
/*  .columns {*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*    flex-direction: column;*/
/*  }*/
  /*make the small photos smaller.......*/
/*  .small-photo,*/
/*  .small-photo-right {max-width:25%;}*/
  /*and get rid of the borders between columns since we don't need em anymore*/
/*  .bordered section {border-right: none;}*/
/*}*/