html {
  height: 100%;
  margin: 0;
  padding: 0;
  bottom: 0;
}

@font-face {
  font-family: 'Roboto';
  src: url("./Roboto-Regular.ttf");
}

.ah {
  position: absolute;
  z-index: 2;
  left: 10px;
  text-align: left;
  margin: 0px;
  color: #fff;
  font-size: 1.5rem;
  padding: 10px;
  text-shadow: #fc0 1px 0 10px;
}

.ah:hover {
  color: #000;
}

#ana-container {
  position: absolute;
  margin-top: 30px;
  margin-left: 5px;
  margin-right: 5px;
}

.ana {
  padding: 10px;
  background-color: #fff6b3;
  word-break: break-word;
}

.ana:hover {
  background-color: #fff6b39e;
}

.ana a:link {
  padding: 0px;
  margin: 0px;
}

.ana-title a:link {
  font-size: 0.9rem;
  padding: 5px;
  margin: 2px;
}

.ana-text a:link {
  font-size: 0.8rem;
  padding: 5px;
  margin: 2px;
}

body {
  position: absolute;
  top: 0;
  margin: 0;
  padding: 0;
  font: 1rem "Roboto","Helvetica Neue", Helvetica, Arial, sans-serif;
  display: -ms-grid;
  display: grid;
  grid-template-areas: "burger", "main";
  -ms-grid-columns: auto;
  grid-template-columns: auto;
  -ms-grid-rows: 40pt auto;
  grid-template-rows: 40pt auto;
  background-color: #ffffff;
  background-image:  repeating-linear-gradient(45deg, #fff6b3 25%, transparent 25%, transparent 75%, #fff6b3 75%, #fff6b3), repeating-linear-gradient(45deg, #fff6b3 25%, #ffffff 25%, #ffffff 75%, #fff6b3 75%, #fff6b3);
  background-position: 0 0, 31px 31px;
  background-size: 62px 62px;
}

.projects {
  clear: right;
}

.hero, .projects div {
  border-bottom: 1.5pt solid #eee;
}

#burger {
  max-width: 80%;
  height: 30pt;
  position: absolute;
  padding: 10pt;
  margin: 0;
  display: block;
  text-align: center;
  background: rgb(53, 53, 53);
  border: 1pt solid #ffffe6;
}

#burger ~ input[type="checkbox"] {
  display: block;
  width: 80%;
  height: 30pt;
  margin: 0;
  position: absolute;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
}

#burger span {
  background: #fffec7;
  height: 0.5rem;
  width: 30pt;
  display: block;
  margin: 0.2rem;
  border-radius: 3px;
}

.logo {
  display: none;
}

input:checked ~ aside {
  display: block;
}

.video-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.video-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

aside {
  background-color: #fff;
  padding: 0;
  bottom: 0;
  grid-area: aside;
  color: #000;
  display: none;
  z-index: 1;
  padding-left:1rem;
  text-align: center;
  border-right: 1pt solid rgb(212, 212, 212);
}

main {
  -ms-grid-column: 1;
  grid-area: main;
}

header, main {
  margin-top: 1.5rem;
}

h1, h2, h3 {
  margin: 0rem, 0;
  padding: 0rem, 0;
}

.pagination li span {
  display: block;
  float:left;
}

header {
  height: 100%;
}

aside header h3 {
  margin-left: 0.4rem;
  margin-top: 0.8rem;
  margin-bottom: 0.8rem;
  text-transform: uppercase;
  font-size: 0.9rem;
  display: inline-block;
}

a:link, a:visited {
  text-decoration: none;
  color: #000;
}

aside a:link, aside a:visited {
  text-decoration: none;
  color: #000;
  margin: 0.2rem;
  display: block;
}

aside a:hover {
  opacity: 1;
}

aside ul, .pagination ul {
  list-style-type: none;
  margin-left: 26px;
  padding: 0pt;
}

aside li {
  display: block;
  margin: 0pt;
  padding: 0pt;
  text-align: left;
}

.pagination li {
  display: inline-block;
  margin: 0pt;
  padding: 0pt;
  text-align: left;
}

article {
  margin-bottom: 1rem;
  padding: 0.5rem;
  color: #141414;
  border: 1pt solid rgb(212, 212, 212);
  background: #fff;
  max-width: 800px;
}

article img, article iframe {
  padding: 0.5rem;
  margin: 0.2rem;
  max-width: 95%;
  border: 1pt solid rgb(212, 212, 212);
}

.social a:link {
  display: inline-block;
}

article img {
  height: auto;
}

.twitter-tweet {
  margin: 0.4rem;
  padding: 0.4rem;
  border: 1pt solid #141414;
  background: #fff;
  font-style: italic;
}

.meta {
  background: #fff;
  padding-left: 0.2rem;
  margin-top: 0.5rem;
}

.meta a:link, .meta a:visited {
  padding: 0.2rem;
  margin: 0.2rem;
  font-size: 0.9rem;
  display: inline-block;
}

.meta h3, .meta b, .meta #text {
  text-transform: uppercase;
  font-size: 0.9rem;
  display: inline-block;
}

article a:link, article a:visited, article header a:visited {
  border-bottom: 1pt solid #ccc;
}

article a:hover {
  border-bottom: 1pt solid #000;
}

article:hover {
  border: 1pt solid rgb(185, 185, 185);
  /*   background: #ffffe6; */
}

article header, article header h1, article h1 {
  font-size: 1.5rem;
  margin: 0pt;
  padding: 0pt;
}

article h2 {
  font-size: 1.3rem;
  margin: 0pt;
  padding: 0pt;
}

article h3 {
  font-size: 1.2rem;
  margin: 0pt;
  padding: 0pt;
}

article pre, article pre code {
  font: 0.9rem "Inconsolata","Helvetica Neue", Helvetica, Arial, sans-serif;

}

article pre, .mastodon-comment {
  color: #000;
  margin: 0.4rem;
  padding: 0.4rem;
  border: 1pt solid #141414;
  background: #fff;
  opacity: 0.8;
}

.mastodon-comment {
  display: flex;
  flex-direction: column;
}

.mastodon-comment .author {
  display: flex;
}

.mastodon-comment .author .details {
  margin: 10px;
  padding: 10px;
}

.mastodon-comment .author .date {
  margin-left: auto;
  font-size: small;
}

.mastodon-comment .author a:link, .mastodon-comment .author a:visited, .mastodon-comment .status a:link {
  text-decoration: none;
  border-bottom: 0px;
}

.mastodon-comment .content {
  padding: 5px;
}

.mastodon-comment .status {
  display: block;
}

.mastodon-comment .status > div {
  display: inline-block;
  margin-right: 15px;
}

article pre code, article pre, article code {
  max-width: 95%;
  word-wrap: break-word;   
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;       /* css-3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
}

table {
  display: block;
  max-width: 85vw;
  margin: 1em 0;
  border-left: 1px solid #141414;
  border-top: 1px solid #141414;
}

table thead, table tbody, table thead tr, table th {
  display: block;
}

table thead {
  float: left;
}

table tbody {
  width: auto;
  position: relative;
  overflow-x: auto;
}

table td, table th {
  padding: 10px;
  border-bottom: 1px dashed #141414;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  line-height: 1.5em;
}

table th {
  text-align: left;
  border-bottom: 1px dashed #141414;
}

table tbody tr {
  display: table-cell;
}

table tbody td {
  display: block;
  white-space: nowrap;
}

table tr:nth-child(odd) {
  background: rgba(0, 0, 0, 0.07);
}

@media screen and (min-width: 50em) {

  table {
    display: table;
  }
  
  table thead {
    display: table-header-group;
    float: none;
  }
  
  table tbody {
    display: table-row-group;
  }
  
  table thead tr, table tbody tr {
    display: table-row;
  }
  
  table th, table tbody td {
    display: table-cell;
  }
  
  table td, table th {
    width: auto;
  }
  
}

.projects div {
  display: flex;
  align-items: center; /* Vertical center alignment */
}

.projects .osmoney {
  display: block;
  height: 160px;
  padding: 15px;
  margin: 15px;
}

.projects .alphalerts {
  display: block;
  height: 160px;
  padding: 15px;
  margin: 15px;
}

.projects .cji {
  display: block;
  height: 150px;
  padding: 15px;
  margin: 15px;
  background-color: #000;
}

.projects .comingsoon, .projects .screenshot {
  display: none;
}

@media screen and (min-width: 800px) {
  .hero h1 {
    font-size: 42pt;
  }
  
  .hero img {
    float: right;
    width: 310px;
    display: block;
  }
  
  .hero {
    height: 270px;
    padding-left: 15px;
  }

  .hero p {
    font-size: 14pt;
    max-width: 400px;
  }

  .projects .comingsoon, .projects .screenshot {
    display: block;
    height: 150px;
    min-width: 150px;
    padding: 15px;
    margin: 15px;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e2e2e2+0,dbdbdb+50,d1d1d1+51,fefefe+100;Grey+Gloss+%231 */
    background: rgb(226,226,226); /* Old browsers */
    background: -moz-linear-gradient(-45deg, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    font-size: 24pt;
    color: #eee;
    overflow: hidden;
  }
  
  .projects .comingsoon {
    opacity: 0.7;
  }

  .projects .comingsoon span,  .projects .screenshot span{
    display: block;
    margin-top: 15px;
    transform: rotate(-45deg);
  }

  .projects p {
    font-size: 18pt;
    vertical-align: middle;
    margin: 40px;
    max-width: 400px;
  }

  .projects div {
    height: 250px;
  }

  body {
        grid-template-areas: "aside main";
    -ms-grid-columns: 20% 80%;
        grid-template-columns: 20% 80%;
    -ms-grid-rows: auto;
        grid-template-rows: auto;
        height: 100%;
  }
  aside {
    display: block;
    margin: 0;
    padding: 1rem;
  }
  main {
    margin: 1rem;
    min-width: 700px;
    padding-left: 5rem;
  }
  nav {
    margin-top: 2rem;
  }
  #burger {
    display: none;
  }
  .logo {
    display: inline-block;
  }
  article {
    margin: 1rem;
    padding: 1rem;
  }
}
@media screen and (max-width: 799px) {
  main {
    padding-left: 10px;
  }

  #ana-container {
    width: 300px;
  }

  .projects .osmoney, .projects .cji, .projects .alphalerts {
    max-height: 50px !important;
  }

  .hero img {
    width: 100px;
    float: right;
  }

  aside ul, .pagination ul {
    list-style-type: none;
    margin-left: 0px;
    padding: 0pt;
  }
  
  aside li {
    display: block;
    text-align: left;
    border-bottom: 1pt solid #888;
  }

  .pagination li {
    display: inline-block;
    text-align: left;
  }

  aside a:link, aside a:visited {
    padding: 15pt;
  }
}
/*# sourceMappingURL=style.css.map */