/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-image: url(/backgrounds/magentagridsoft2x.jpg);
  background-attachment: fixed;
  color: #ff00e1;
  font-family: 'Parametric Glitch', 'IBM Model3x', Verdana;
  text-shadow: #ff00e1 0px 0px 3px; 
  font-size: 26px;
  letter-spacing: 3px;
  line-height: 30px;
  
  
  margin-left: 160px; /* Same as the width of the sidebar */
  padding: 0px 10px;
}

h1 {
  line-height: 60px;
}

a {
  text-decoration: underline;
  color: #9c22d4; 
}

/* When you mouse over the navigation links, change their color */
a:hover {
  color: #ff00d4;
}


.topbox {
  font-family: 'Parametric Glitch', 'IBM Model3x', Verdana;
  background-color: #03021a;
  box-shadow: 0px 0px 12px 2px #ff00e1ba inset;
  border-radius: 25px;
  border: 2px #ff00e1 solid;
  padding: 20px;
  margin: 30px;
  font-size: 26px;
  text-align: center;
}

.mainbox {
  background-color: #03021a;
  box-shadow: 0px 0px 12px 2px #ff00e1ba inset;
  font-size: 26px;
  
  border-radius: 25px;
  border: 2px #ff00e1 solid;
  padding: 20px;
  margin: 30px;
  
}

.bloglist {
  font-size: 32px; 
  list-style-type: ">";
}

ul li{
  margin-bottom: 15px;
}

 /* The sidebar menu */
.sidenav {
  height: 300px;
  width: 160px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
  margin: 30px 15px 15px 15px;
  background-color: #03021a;
  border-radius: 25px;
  border: 2px #ff00e1 solid;
  box-shadow: 0px 0px 12px 2px #ff00e1ba inset;
  line-height: 23px;
}

/* The navigation menu links */
.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: underline;
  font-size: 26px;
  color: #9c22d4;
  display: block;
}
.sidenav a:hover {
  color: #ff00d4;
}

.homebutton {
display: block;
margin-left:auto;
margin-right:auto;
}





/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
} 



/*~~~~~~~~~~~~font stuff~~~~~~~~~~~~~~*/
@font-face {
  font-family: 'IBM Model3x';
  src: url('fonts/Web437_IBM_Model3x_Alt1.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'IBM VGA 9x14';
  src: url('fonts/WebPlus_IBM_VGA_9x14.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'IBM VGA 8x16';
  src: url('fonts/WebPlus_IBM_VGA_8x16.woff') format('woff');
  font-weight: lighter;
  font-style: normal;
}

@font-face {
  font-family: 'Cordata PPC-21';
  src: url('fonts/WebPlus_Cordata_PPC-21.woff') format('woff');
  font-weight: lighter;
  font-style: normal;
}

@font-face {
  font-family: 'Good Old DOS Distorted';
  src: url('fonts/Good\ Old\ DOS\ Distorted.ttf')
  font-weight: bold;
}

@font-face {
  font-family: 'Parametric Glitch Bold';
  src: url('fonts/Parametric\ Glitch\ Bold.ttf')
}

@font-face {
  font-family: 'Parametric Glitch';
  src: url('fonts/Parametric\ Glitch.ttf')
}