@font-face {
  font-family: "Rexilia";
    src: url(./rexlia.ttf) format('truetype');

}
@font-face {
  font-family: "Oxanium";
    src: url(./oxanium.ttf) format('truetype');

}
h1{
  font-family: "Rexilia";
  padding-top: 20px;
  line-height: 90%;
  text-align: center;
}

h3{
  font-family: "Rexilia";
  text-align: center;
}
p{
  font-family: "Oxanium";
}
li{
  font-family: "Oxanium";
}
body{
  background: url(./FIREBLU.gif);
  background-repeat: repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: 128px;
  color: white;
  font-family: system-ui;
  margin-left:176px; /* margin needs to be the same as sidebar width*/
}

.sidebar {
  width: 176px; /* Set the width of the sidebar */
  display: flex;
  flex-direction: column;
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  bottom:0px; /*this is the part that actually made the bottom of my outline show up at the right place */
  overflow-x: hidden; /* Disable horizontal scroll */
  overflow-wrap: break-word;
  background: black;
  outline-style: ridge;
  outline-color: blue;
  outline-width: 8px;
  color: white;
  padding: 0;
  text-align: center;
  margin-left: 8px;
  margin-top: 8px;
  margin-bottom:8px;
}
.icon{
  background: black;
  outline-style: ridge;
  outline-color: blue;
  outline-width: 8px;
  height:176px;
  display: flex;
  flex-direction: column;
}
.navMenu{
  background: black;
  outline-style: ridge;
  outline-color: blue;
  outline-width: 8px;
  margin-bottom:8px;
  margin-top: 0px;
  display: flex;
  flex-direction: column;
  line-height: 0.2;
  flex:1;
}
.88x31s{
/*  background: black;
  outline-style: ridge;
  outline-color: blue;
  outline-width: 8px;
  display: flex;
  flex-direction: column;*/
}

a:link, a:visited {
      color: #fff;
}
.current {
    color:#baada7;
}
.center{
  margin:auto;
  width: 75%;
  display: block;
  justify-content: center;
  background: black;
  outline-style: ridge;
  outline-color: blue;
  outline-width: 8px;
}
.article {
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  justify-content: center;

}
.footer {
    margin:auto;
    text-align:center;
}

img {
  max-width:100%;
  max-height:100%;
}
.column {
  float: left;
  width: 50%;
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}