.zoom:hover {
  -ms-transform: scale(1.05); /* IE 9 */
  -webkit-transform: scale(1.05); /* Safari 3-8 */
  transform: scale(1.1); 
  transition: transform .5s;
 } 

 a:hover {
      color: #ff0000;
    }

a {
    color: #ff0000;
}


body, div, main, section, article {
  box-sizing: border-box; 
}

body {
  
  background-image: url('/img/assets/blogbg.jpg');
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center;

  }

.container {
  display: grid;

  grid-template-areas:
    "header header header"
    "nav content side"
    "footer footer footer";

  grid-template-columns: 250px 500px 250px;
  grid-template-rows: auto 1fr auto;
  column-gap: 10px;
  background-color: #000000;
  justify-content: center;
}

main {
  grid-area: content;
  z-index: 1;
}


aside {
  grid-area: side;
  margin-right: 0.1rem;
  padding: 10px;
  background-color: #102514;
  box-shadow: 5px 5px 100px rgb(0, 255, 76);
  
}

@media (max-width: 500px) {
  .container {
    grid-template-areas:
      "header header"
      "content content"
      "nav side"
      "footer footer";

    grid-template-columns: 1fr;
    grid-template-rows:
      auto /* Header */
      1fr /* Content */
      minmax(75px, auto) /* Nav */
      minmax(75px, auto) /* Sidebar */
      auto; /* Footer */
      
  }

  nav, aside {
    margin-bottom:5px;
    box-shadow: none;
    max-width: 200px;
  }
}

/* clearfix hack to prevent image overflow. check out the W3Schools page on it. */
.clearfix::after {
  content: "";
  clear: both;
  display: table;

}

/*FONTS*/

/* header font */
#showComic, header, h1, h2, h3, h4, h5 {
  font-family: "Silkscreen", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #0dff00;
  font-size:20px
}



h2 {
  font-family: "Silkscreen", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #ff0000;
  font-size:20px
}

/* body font */
.subPage p, .aside, #authorNotes, .archiveTable, nav p, aside p{
  font-family: "VT323", monospace;
  font-size: medium;
  color: #ff0000;
}


.greenBox p{
  font-family: "VT323", monospace;
  font-size: x-large;
  color: #000000;
  margin: 20px;
  }

 @keyframes blink {
            0% {
                opacity: 1;
            }

            50% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

.greenBox h1{
  font-family: "Silkscreen", monospace;
  font-size: x-large;
  color: #000000;
  animation: blink 2s infinite;
  }

.window h1{
  font-family: "Silkscreen", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #00ff08;
  font-size:15px
}

.message p{
  font-family: "Tiny5", sans-serif;
  font-weight: 400;
  font-size: small;
  color: #000000;
}

.message p2{
  font-family: "Tiny5", sans-serif;
  font-weight: 400;
  font-size: small;
  color: #00ff08;
}

/* STYLING FOR SUBPAGES (about, characters, etc) */

/*general*/

.row {
  display: flex;
  padding: 5px;
}

.column {
  flex: 33.33%;
}

.columngif {
  flex: 33.33%;
  background-image: url("/img/assets/semiotics.jpg");
}

.columngif h2{
  color: #000000;
font-size:30px
}

.greenBox {
  max-width: 98%;
  background-color: #0dff00;
  margin: auto;
  padding: 5px;
  }

  .greenBoxbut {
  max-width: 50px;
  background-color: #0dff00;
  margin: auto;
  }

  .greenBoxbut h1{
  font-family: "Silkscreen", monospace;
  font-size: normal;
  color: #000000;
  }

.subPage {
  width: 500px;
  max-width: 98%;
  background-color: #000000;
  margin: auto;
  margin-top: 100px;
  margin-bottom: 100px;
  padding: 12px 12px 12px;
}

/* for pictures displayed to the left */
.leftPic {
  clear: left;
  float:right;
  margin:5%;
}

/* for pictures displayed to the left */
.rightPic {
  clear: right;
  float:left;
  margin:5%;
}

.image {
    flex: auto;
    padding: 2px;
    margin: 10px;
    -webkit-animation:spin 15s linear infinite;
    -moz-animation:spin 15s linear infinite;
    animation:spin 15s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }