/* Mattew Sentell 2020 */
@font-face{
  font-family: 'Arial Black';
  src: url('fonts/arial_black.ttf'),
    url('fonts/arial_black.woff'),
    url('fonts/arial_black.woff2');
}
:root{
  --colorA: #FFFFFF; /*primary color*/
  --colorB: #ACA9A9; /*secondary color*/
  --colorC: #5E5D5D; /*tertiary color*/
  --colorD: #000000; /*quaternary color*/
  --colorE: #F1F1F1; /*quinary color*/
  --fontA: 'Arial Black', Copperplate, sans-serif; /*primary font*/
  --fontA1: Arial, Verdana, sans-serif; /*weight-modifiable primary font*/
  --fontB: Calibri, Helvetica, sans-serif; /*secondary font*/
  --fontC: 'Courier New', Courier, monospace; /*tertiary font (code snippets)*/
}
*{
  box-sizing: border-box;
}
body{
  font-family: var(--fontB);
  font-size: 13px;
  background: var(--colorA);
  color: var(--colorD);
  margin: 0;
}
/* CONTENT */
.topCt{
  display: grid;
  padding: 0;
  margin: 0;
  grid-template-columns: 0px 100%;
  grid-template-rows: 5em auto 5em;
  width: 100%;
  height: 100vh;
}
.topCt > div{
  margin: 0;
}
.topCt > .content{
  position:relative;
  padding: 24px 5px;
  grid-column: 2/3;
  grid-row: 2/3;
  display:inline-block;
}
/* HEADER & LOGO */
.header{
  position:relative;
  grid-column: 2/3;
  grid-row: 1/2;
  background-color:var(--colorB);
  height: 5em;
  padding: 1em;
  font-family: var(--fontA);
  text-transform: uppercase;
}
.header button{
  visibility: visible;
  height:1.5em;
  width:1.5em;
  padding:0;
  border:0;
  color: var(--colorA);
  background-color: var(--colorC);
  font-size: 2em;
  text-decoration: none;
}
.header a{
  visibility: visible;
  color: var(--colorA);
  font-size: 2em;
  text-decoration: none;
}
.header a:hover{
  color: var(--colorA);
}
.modal{
  position: fixed;
  grid-column: 1/2;
  grid-row: 1/4;
  width: 100vw;
  height: 100vh;
  visibility:collapse;
}
.sidebar {
  visibility: collapse;
  position:fixed;
  grid-column: 1/2;
  grid-row: 1/4;
  width: 15em;
  height: 100vh;
  background-color:var(--colorB);
}
.navBar {
  display: inline-block;
  width:100%;
  height: calc(100vh - 15em);
  padding:10%;
  overflow:auto;
  font-family: var(--fontA);
  text-transform: Capitalize;
}
.navBar a{
  color: var(--colorA);
  float: left;
  width: 100%;
  padding: .025em;
  border-bottom: .1em solid var(--colorA);
  font-size: 1.5em;
  text-align: center;
  text-decoration: none;
}
.navBar a.sub{
  margin-left:10%;
  width: 80%;
  border-bottom: .05em solid var(--colorA);
  font-family:var(--fontA1);
  font-weight: bold;
  font-size: 1.35em;
}
.navBar a:hover {
  color: var(--colorC);
  transition: color .3s;
}
.navBar a:first-child{
  border-top: 0;
}
.navBar a:last-child{
  border-bottom: 0;
}
.navBar a.active, .navBar a.active:hover{
  color: var(--colorD);
}
.logo{
  position: relative;
  top: 0;
  left: 0;
  z-index:11;
  width: 15em;
  height: 15em;
  /*border-radius: 0 0 3.333vmin 3.333vmin;*/
  background-color: var(--colorC);
}
.logoImage{
  position:absolute;
  top:50%;
  left:50%;
  width:100%;
  -ms-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
}
/* FOOTER */
.footer{
  grid-column: 2/3;
  grid-row: 3/4;
  background-color: var(--colorB);
  color: var(--colorA);
  position: relative;
  width: 100%;
  height: 5em;
  padding: 2em;
}
/* SCROLLBAR */
::-webkit-scrollbar {
  width: .75vw;
  height: .75vw;
  z-index:5;
}
::-webkit-scrollbar-track {
  background: var(--colorE);
}
::-webkit-scrollbar-thumb {
  background: var(--colorC);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--colorD);
}
@media only screen and (max-width: 359px){
  .header a{
    font-size: 1.33em;
  }
}
@media only screen and (min-width: 1080px){ /* revert to pixel-based measurements */
  body{
    font-size: 1.25vmin;
  }
  .topCt{
    grid-template-columns: 20em auto;
  }
  .topCt > .content{
    padding: 2.25vmin;
  }
  .header{
    border-left:.25em solid var(--colorA);
  }
  .header > a{
    visibility: collapse;
  }
  .header button{
    visibility: collapse;
  }
  .sidebar{
    visibility: visible;
    position:relative;
    width: auto;
    height: auto;
  }
  .navBar{
    height: auto;
  }
  .logo{
    width: 20em;
    height: 20em;
  }
  .footer{
    border-left:.25em solid var(--colorA);
  }
}