/* GLOBAL SETTINGS */
@font-face {
    font-family: FiraCode;
    /* src: url('./fonts/FiraCodeNerdFont-SemiBold.ttf'); */
    src: url('./fonts/FiraCode_Nerd_Font_Regular.ttf');
    /* src: url('./fonts/FiraMono-Regular.otf'); */
    }

  a:link { color: pink !important; text-decoration: none; }
  a:visited { color: lightblue !important; text-decoration: none; }
  a:hover { color: white !important; text-decoration: underline; }
  a:active{ color: red !important; text-decoration: underline; }

body {
    background-color: #333333;
    color: #BBBBBB;
    hr { width: 50%; margin-bottom: 20px; }
    .short { width: 25%; }
}

/* keep in mind that the header ASCII art is 86 characters long */
/* and approximately 630 pixels wide (at least on my setup?) */
.center { /* this is the big central box */
  border: 2.5mm ridge rgba(190, 190, 190, .6);/* 5px solid; */
  margin: auto; /* this is what allows centering of main column */
  width: 750px;
  padding: 10px;
  font-size: 14px;
}

/* DIVISION STYLES */
div {
  font-family: FiraCode;
  font-size: 12px;
  text-align: left;
  hyphens: auto;
}

.blogpost {
  text-align: justify;
  text-justify: inter-word;
  /* text-align-last:left; */
  padding-left: 3em;
  padding-right: 3em;
  /* text-indent: 2em; */
  font-size: 14px;
}

.centerimg {
    text-align: center;
    img {filter: drop-shadow(10px 10px 5px black);}
}

.inleft {
    padding: 30px; /* additional padding */
}

#wrapper {
    width=650px;
    overflow: hidden;
    align: center;
    /* padding: 10px; */
}

#first { 
    width: 325px; float:left;
    padding-left:40px;
}

#second {
    overflow: hidden;
    vertical-align: top;
    float: right;
    padding-right:40px;
}

.linkbar {
    font-size: 14px;
    text-align: center;
    padding: 5px;
}

/* PRE STYLES */
pre {
    font-family: FiraCode, courier, monospace;
    font-size: 14px;
}

.pre1 {
    margin-bottom: 20px;
    text-align: center;
}

.pre2 {
    text-align: center;
}


/* PARAGRAPH STYLES */
.piece {
  margin-bottom: .5cm;
  padding-left: 3em;
  text-indent: -3em;
  width: 275px;
  hyphens: auto;
  text-align: justify;
  ul {
      text-align: left;
  }
}

.longpiece {
  margin-bottom: 1cm;
  padding-left: 18em;
  text-indent: -3em;
  width: auto;
  /* height: auto; */
  /* hyphens: auto; */
  text-align: left;
  /* display: inline-block; */
}

.centerpiece {
    /* margin-bottom: 3cm; */
    width = 300px;
    display = inline-block;
    padding-left: 3em;
    padding-right: 3em;
    font-size: 14px;
}
    

.par1 {
  margin-bottom: .5cm;
  padding-left: 1.5em;
  text-indent: -1.5em;
}

.par2 {
  margin-bottom: .5cm;
  padding-left: 3em;
  padding-right: 3em;
  text-indent: -2em;
  font-size: 14px;
  text-align: justify;
  text-justify: inter-word;
}

.parcenter {
  margin-bottom: .5cm;
  padding-left: 3em;
  padding-right: 3em;
  text-indent: -2em;
  text-align: center;
}

.par3 {
  margin-top: .5cm;
  margin-bottom: .5cm;
  hyphens: auto;
  text-align: justify;
  width: 200px;
  display: inline-block;
  font-size: 14px;
}

.squarepar {
  margin-bottom: .5cm;
  width: 200px;
  hyphens: auto;
  text-align: justify;
}

.longpar {
    margin-top: .5cm;
    margin-bottom: .5cm;
    padding-left: 3em;
    padding-right: 3em;
    hyphens: auto;
    text-align: justify;
    width: 200px
    display: inline-block;
    font-size: 14px;
}

.marc {
    margin-top: .5cm;
    margin-bottom: .5cm;
    padding-left: 3em;
    padding-right: 3em;
    hyphens: auto;
    text-align: left;
    width: 200px;
    display: inline-block;
}

.h1 {
    padding: 5px;
    text-align: center;
    color: #DDDDDD;
    font-size: 14px; 
    font-style: bold;
}

.centered {
    text-align: center;
    justify-content: center;
    align-items: center;
}

/* BUTTON STYLES */

.comment {
    text-align: center;
    display: inline-block;
    border-radius: 12px;
}

/* TABLE STYLES */

.centerTable {
    margin: auto;
    border: 0px solid;
    width: 90%;
    vertical-align: center;
    border-collapse: collapse;
    th, td {
        padding-bottom: 8px;
        padding-top: 8px;
        padding-left: 8px;
        padding-right: 8px;
        text-align: left;
        border-top: 1px solid #555555;
        border-bottom: 1px solid #555555;
    }
    td:nth-child(2) {
        text-align: right;
    }
    td:nth-child(3) {
        text-align: right;
    }
}

/* DOTFILL */

/* 
(Use with this sort of arrangement)
<ul class="toc">
  <li>
    <span class="title">Foo</span>
    <span class="chapter">Chapter 1</span>
  </li>
  <li>
    <span class="title">Bar</span>
    <span class="chapter">Chapter 2</span>
  </li>
</ul>
*/

.toc {
  text-align: center;
  justify-content: center;
  align-items: center;
}

.toc li {
  display: flex;
  width: 90%;
}

.toc li .title {
  order: 1;
}

.toc li .chapter {
  order: 3;
}

.toc li::after {
  background-image: radial-gradient(circle, currentcolor 1px, transparent 1.5px);
  background-position: bottom;
  background-size: 2ex 4.5px;
  background-repeat: space no-repeat;
  content: "";
  flex-grow: 1;
  height: 1em;
  order: 2;
}