:root {
   --silver: #F7F6F2;
   --grey: #A1ACA2;
   --brass: #C09961;
   --tungsten: #2f3233;
}

.ascii-banner pre {
   width: 100%;
   font-size: 0.175vw;
   font-family: monospace;
   background-color: var(--tungsten);
   color: #F7F6F2;
   text-align: center;
   white-space: no-wrap;
   padding: 10px;
   user-select: none;
}

.ascii-art pre {
   font-size: 0.15vw;
   background-color: var(--tungsten);
   color: #F7F6F2;
   white-space: no-wrap;
   user-select: none;
}

.twoColLeft {
   display: block;
}

.twoColLeft>* {
   padding: 1rem;
}

@media (min-width:768px) {
   .twoColLeft {
      display: grid;
      grid-template-columns: 1fr 2.5fr;
      column-gap: 5vw;
      margin-right: 15vw;
      text-align: justify;
   }
}

.twoColRight {
   display: block;
}

.twoColRight>* {
   padding: 1rem;
}

@media (min-width:768px) {
   .twoColRight {
      display: grid;
      grid-template-columns: 2.5fr 1fr;
      column-gap: 5vw;
      margin-right: 20vw;
      text-align: justify;
   }
}

html {
   overflow-y: scroll;
}

body {
   background-color: var(--tungsten);
   font-size: 1.45vw;
   font-family: 'Times New Roman', Times, serif;
   color: var(--grey);
   margin: 5vw;
}

hr {
   margin-right: 10vw;
   width: 80vw;
}

a {
   color: var(--grey);
   text-decoration: none;
}

a:hover {
   color: var(--silver);
   text-decoration: none;
}

a:visited {
   color: var(--grey);
   text-decoration: none;
}

.catWatch {
   position: fixed;
   bottom: 0px;
   right: 10px;
   width: 10vw;
}

.status {
   font-style: italic;
   font-size: 0.8vw;
   margin-top: 0px;
}

.linkIcon {
   margin-left: 5px;
   margin-right: 5px;
   text-decoration: none;
   margin-top: 0px;
}

svg {
   fill: var(--grey);
   width: 2.5vw;
   height: 2.5vw;
}

svg:hover {
   fill: var(--silver);
}