@font-face {
  font-family: 'Pixels';
  src: url('/fonts/boldspixels.ttf') format('truetype');
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* Ensures padding/borders don't expand element size */
}

body,
html {
  height: 100%;
  /* Allows child elements to use percentage heights */
}

body {
  background: url('/images/starstile2.png');
}

.container {
  overflow: auto;
  padding-bottom: 32px;
}

h1 {
  font-size: 48px;
  text-align: center;
  margin: 16px
}

h2 {
  font-size: 32px;
  text-align: center;
  margin: 16px
}

h3 {
  font-size: 24px;
  margin: 16px
}

h4 {
  font-size: 20px;
  margin: 16px
}

p,
li {
  font-size: 16px;
  margin: 16px
}

ul,
.post_list,
.tag_list,
.tag_list_post {
  list-style-type: "-> ";
}

.tag_list_post {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}

.post_list_item,
.tag_list_item {
  font-size: 24px;
}

.tag_list_item_mini {
  font-size: 20px;
}

a,
.post_list_link,
.tag_list_link {
  color: #ff5ea1;
  text-decoration: none;
}

.next-link,
.prev-link {
  color: #5ea1ff;
}

.post_list_date,
.tag_list_count {
  font-size: 16px;
  color: #7b8496;
}

.full_screen {
  /* display: flex; */
  /* flex-direction: column; */
  /* width: 100%; */
  min-height: 100%;
}

.work_in_progress {
  color: yellow;
  /* line-height: 1.5; */
}
@font-face {
  font-family: 'Pixels';
  src: url('/fonts/boldspixels.ttf') format('truetype');
}

@font-face {
  font-family: 'FantasqueSansM Nerd Font';
  src: url('/fonts/FantasqueSansMNerdFontMono-Regular.ttf') format('truetype');
}

* {
  margin: 0;
  padding: 0;
  /* box-sizing: content-box; */
  /* Ensures padding/borders don't expand element size */
  font-family: "Pixels", "FantasqueSansM Nerd Font";
}

/*The header bar that stays at the top of the screen*/
.top-bar {
  font-style: italic;
  /* letter-spacing: 5px; */
  top: 0;
  left: 0;
  position: fixed;
  font-size: 24px;
  text-align: center;
  width: 100%;
  background: url("/images/starstile3.gif");
  color: #c84a7e;
  padding: 5px;
  padding-left: 15px;
  line-height: 32px;
  overflow: auto;
  border-bottom: 4px solid #c84a7e;
}

.main,
.tags,
.main-first,
.blog-links {
  margin-top: 30px;
  margin-left: 450px;
  width: 500px;
  border: 4px outset;
  background: #16181a;
  color: #ffffff;
  padding: 15px 25px 15px 25px;
}

/*Make sure the first main box has an extra top margin so it's not hidden by the header*/
.main-first {
  margin-top: 60px;
  text-align: center;
  border-color: #bd5eff;
}

.tags {
  border-color: #ff6e5e;
}

.main {
  border-color: #c84a7e;
}

.blog-links {
  border-color: #5ea1ff;
  display: flex;
  justify-content: space-between;
  list-style: "";
}

.blog-links>* {
  flex-grow: 1;
}

.prev-link {
  text-align: right
}

.next-link {
  text-align: left
}

.sidebar {
  position: fixed;
  width: 350px;
  min-height: 75px;
  /* border: 1px solid black; */
  background: white;
  margin-top: 60px;
  margin-left: 25px;
  /*The 7px is vertical and horizontal offset for the shadow, if you want to change it.*/
  /* box-shadow: 7px 7px rgb(0, 0, 0, 0.78); */
}

/*Prevent image overflow*/
.main img,
.main-first img,
.sidebar img {
  max-width: 100%;
  height: auto;
}


.sidebar-banner {
  /*not in use, currently looks like SHIT*/
  width: auto;
  background: #0d082c;
  border-width: 4px 4px 0px 4px;
  border-style: outset;
  border-color: #c84a7e;
}

.sidebar-banner img {
  width: 100%;
  height: auto;
}

.sidebar-links {
  text-transform: uppercase;
  /* letter-spacing: 2px; */
  font-size: 16px;
  text-align: center;
  background: #0d082c;
  color: white;
  width: 100%;
  padding: 4px;
  min-height: 30px;
  border-width: 0px 4px 4px 4px;
  border-style: outset;
  border-color: #c84a7e;
}

.button {
  padding: 5px;
  margin: 4px;
  /* padding-left: 10px; */
  display: block;
  text-align: center;
  background-color: #16181a;
  border-style: outset;
  border-width: 4px;
  border-color: #16181a;
}

.button:active {
  border-style: inset;
}

.sidebar-links a {
  color: lightgray;
  text-decoration: none;
}

.sidebar-links a:hover {
  color: white;
}

.sidebar-links a:active {
  color: #ff5ea1;
}

/*Text at bottom below main divs*/
.footer {
  text-align: right;
  margin-left: 475px;
  width: 500px;
  font-size: 13px;
  font-style: italic;
  margin-top: 20px;
  margin-bottom: 40px;
}

/*For narrow screens*/
@media (max-width: 1100px) {
  .sidebar {
    width: 275px;
    margin-left: 10px;
  }

  .main,
  .tags,
  .main-first,
  .blog-links {
    width: 420px;
    margin-left: 315px;
  }
}


/*Mobile compatibility.*/
@media (orientation: portrait) {
  .sidebar {
    margin: 0 auto;
    position: static;
    margin-top: 60px;
    margin-bottom: 15px;
    width: 90%;
  }

  .main,
  .tags,
  .main-first,
  .blog-links {
    margin: 0 auto;
    margin-top: 20px;
    width: 80%;
  }

  .footer {
    width: 80%;
    padding: 5%;
    margin: 0 auto;
  }

  .top-bar {
    font-size: 16px;
    font-size: 90%;
    /*To help reduce height if it overflows the first line.*/
  }
}