@font-face {
  font-family: cm;
  src: url(cmunrm.ttf);
}

html {
  width: 100%;
  height: 100%;
  #background-color: #000000;
}
body {
  height: 100%;
  box-sizing: border-box;
  background-color: #000000;
  background-image: url(../img/layout_very_dark.png);
  background-repeat: repeat;
  background-size: auto;
  font-family: cm;
  display: flex;
  flex-direction: column;
}
header {
  text-align: center;
  background-color: rgba(0,0,0,0.5);
  padding: 20px;
  color: white;
}
main {
  flex-grow: 1;
  color: white;
  border-color: white;
  border-width: thin;
  text-align: center;
}
footer {
  padding: 20px;
  background-color: rgba(0,0,0,0.5);
  text-align: center;
  color: white;
  flex: 0;
  font-size: 22px;
}

header,main,footer {
  flex-shrink: 0;
}

.textcontainer{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.textbox {
  display: table-cell;
  align-items: center;
  min-width: 20px;
  max-width: 800px;
}

.button {
  display: table-cell;
  margin: 20px;
  padding: 10px;
  align-items: center;
  border-color: rgba(180,180,180,1);
  border-style: solid;
  border-width: 2px;
  font-size: 22px;
}

.col {
  display: table-cell;
  width: 30%;
  padding: 10px;
}
.colimg {
  display: table-cell;
}
.headerimg{
  width: 500px;
}
.preformatted {
  font-family: monospace;
  text-align: left;
  white-space: pre-wrap;
  overflow-x: auto;
  font-size:18px;
  padding:10px;
  background: #202020;
  border-radius: 20px;
}

@media (max-width: 1000px) {
  .col {
    width:100%
  }
}
@media (max-width: 600px) {
  .headerimg{
    width:100%
  }
}
.container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.post-title-overview {
  display: flex;
  align-items:center;
  text-align:center;
  justify-content:center;
  background: rgba(0,0,0,0.5);
  color: white;
  width: 100%;
  height: 100%;
  transition: 0.2s;
 }
.post-overview-smart-ink {
  display: flex;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-color: rgba(180,180,180,1);
  border-width: 2px;
  background-position: center;
  background-size: cover;
  background-image: url(../img/ink_sniffer_thumbnail_small.jpg);
}
.post-overview-yomani-hack {
  display: flex;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-color: rgba(180,180,180,1);
  border-width: 2px;
  background-position: center;
  background-size: cover;
  background-image: url(../img/yomani.jpg);
}

.post-overview-ddr5 {
  display: flex;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-color: rgba(180,180,180,1);
  border-width: 2px;
  background-position: center;
  background-size: cover;
  background-image: url(../img/ddr5_title.jpg);
}

.post-overview-w95 {
  display: flex;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-color: rgba(180,180,180,1);
  border-width: 2px;
  background-position: center;
  background-size: cover;
  background-image: url(../img/w95.jpg);
}

.post-overview-fpga-vga {
  display: flex;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-color: rgba(180,180,180,1);
  border-width: 2px;
  background-position: center;
  background-size: cover;
  background-image: url(../img/fpga-vga-hardware.jpg);
}
.post-overview-ethernet {
  display: flex;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-color: rgba(180,180,180,1);
  border-width: 2px;
  background-position: center;
  background-size: cover;
  background-image: url(../img/ethernetDevBoard.jpg);
}
.post-overview-mandelbrot{
  display: flex;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-color: rgba(180,180,180,1);
  border-width: 2px;
  background-position: center;
  background-size: cover;
  background-image: url(../img/mandelbrot.png);
}
.post-overview-ascii{
  display: flex;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-color: rgba(180,180,180,1);
  border-width: 2px;
  background-position: center;
  background-size: cover;
  background-image: url(../img/ascii.png);
}
.post-overview-digit-dataset{
  display: flex;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-color: rgba(180,180,180,1);
  border-width: 2px;
  background-position: center;
  background-size: cover;
  background-image: url(../img/digits.png);
}
.post-overview-nn-digits{
  display: flex;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-color: rgba(180,180,180,1);
  border-width: 2px;
  background-position: center;
  background-size: cover;
  background-image: url(../img/nn_digits.png);
}
.post-overview-latex-templates{
  display: flex;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-color: rgba(180,180,180,1);
  border-width: 2px;
  background-position: center;
  background-size: cover;
  background-image: url(../img/latex-template.png);
}
.post-overview-kvm-network{
  display: flex;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-width: 2px;
  border-color: rgba(180,180,180,1);
  border-width: 2px;
  background-position: center;
  background-size: cover;
  background-image: url(../img/vm-network.png);
}
.post-overview-battery-plot{
  display: flex;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-color: rgba(180,180,180,1);
  border-width: 2px;
  background-position: center;
  background-size: cover;
  background-image: url(../img/battery-plot.png);
}
.post-overview-firmware-backup{
  display: flex;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-color: rgba(180,180,180,1);
  border-width: 2px;
  background-position: center;
  background-size: cover;
  background-image: url(../img/firmware-backup.jpg);
}
.post-overview-embedded-gentoo{
  display: flex;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-color: rgba(180,180,180,1);
  border-width: 2px;
  background-position: center;
  background-size: cover;
  background-image: url(../img/olimex_small.jpg);
}
.post-overview-freertos-msp430{
  display: flex;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-color: rgba(180,180,180,1);
  border-width: 2px;
  background-position: center;
  background-size: cover;
  background-image: url(../img/demo_msp430_freertos.jpg);
}
.post-overview-fat32{
  display: flex;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-color: rgba(180,180,180,1);
  border-width: 2px;
  background-position: center;
  background-size: cover;
  background-image: url(../img/sdcard.jpg);
}
.post-overview-current-probe{
  display: flex;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-color: rgba(180,180,180,1);
  border-width: 2px;
  background-position: center;
  background-size: cover;
  background-image: url(../img/current_probe.png);
}

.post-overview-ftpm{
  display: flex;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-color: rgba(180,180,180,1);
  border-width: 2px;
  background-position: center;
  background-size: cover;
  background-image: url(../img/tpm_sq.jpg);
}

.post-overview-voip{
  display: flex;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-color: rgba(180,180,180,1);
  border-width: 2px;
  background-position: center;
  background-size: cover;
  background-image: url(../img/voip-title.jpg);
}

.post-overview-statuspage{
  display: flex;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-color: rgba(180,180,180,1);
  border-width: 2px;
  background-position: center;
  background-size: cover;
  background-image: url(../img/statuspage.png);
}

.post-overview-usbc-fix{
  display: flex;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-color: rgba(180,180,180,1);
  border-width: 2px;
  background-position: center;
  background-size: cover;
  background-image: url(../img/usbc.png);
}

.post-overview-linux-oled{
  display: flex;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-color: rgba(180,180,180,1);
  border-width: 2px;
  background-position: center;
  background-size: cover;
  background-image: url(../img/ssd1309.jpg);
}

.post-overview-acme{
  display: flex;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-color: rgba(180,180,180,1);
  border-width: 2px;
  background-position: center;
  background-size: cover;
  background-image: url(../img/acme.png);
}
.post-overview-stm32-speech{
  display: flex;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-color: rgba(180,180,180,1);
  border-width: 2px;
  background-position: center;
  background-size: cover;
  background-image: url(../img/stm32-speech-title.png);
}
.post-overview-stm32{
  display: flex;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-color: rgba(180,180,180,1);
  border-width: 2px;
  background-position: center;
  background-size: cover;
  background-image: url(../img/stm32_small.jpg);
}

.post-overview-msp430{
  display: flex;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-color: rgba(180,180,180,1);
  border-width: 2px;
  background-position: center;
  background-size: cover;
  background-image: url(../img/msp430_small.jpg);
}
.post-overview-zephyr-mipi{
  display: flex;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-color: rgba(180,180,180,1);
  border-width: 2px;
  background-position: center;
  background-size: cover;
  background-image: url(../img/nrf_zephyr_title.jpg);
}

.post-overview-led-sign{
  display: flex;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-color: rgba(180,180,180,1);
  border-width: 2px;
  background-position: center;
  background-size: cover;
  background-image: url(../img/sign_small_composite.png);
}
.post-overview-focus-test{
  display: flex;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-color: rgba(180,180,180,1);
  border-width: 2px;
  background-position: center;
  background-size: cover;
  background-image: url(../img/focus-test.png);
}
.post-overview-led-controller{
  display: flex;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-color: rgba(180,180,180,1);
  border-width: 2px;
  background-position: center;
  background-size: cover;
  background-image: url(../img/led-controller.jpg);
}
.post-overview-control-unit{
  display: flex;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-color: rgba(180,180,180,1);
  border-width: 2px;
  background-position: center;
  background-size: cover;
  background-image: url(../img/prints_web_small.png);
}
.post-overview-ball-on-plate{
  display: flex;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-color: rgba(180,180,180,1);
  border-width: 2px;
  background-position: center;
  background-size: cover;
  background-image: url(../img/bop-cad.png);
}

nav {
  justify-content: center;
  display: flex;
  background: rgba(0,0,0,0);
  flex-wrap: wrap;
  flex-direction: row;
  border-style: solid;
  border-color: rgba(180,180,180,1);
  border-width: 2px;
  font-size: 22px;
}

p {
padding: 0px 20px;
font-size: 22px;
text-align: justify;
}
table {
padding: 0px 20px;
font-size: 22px;
text-align: justify;
margin-left: auto;
margin-right: auto;
}
th, td {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 0px;
  padding-bottom: 0px;
}

h1 {
  font-size: 36px;
}

h2 {
  font-size: 28px;
}
h4 {
  font-size: 28px;
}

nav a {
  padding: 10px 20px;
  text-align: center;
}

a {
  color: red;
  text-decoration: none;
}
a:visited {
	color: red;
  text-decoration: none;
}
a:hover {
	color: white;
}