/*
 ▌ ▐·▪  ▪  ▄ •▄ .▄▄ · ▪  
▪█·█▌██ ██ █▌▄▌▪▐█ ▀. ██ 
▐█▐█•▐█·▐█·▐▀▀▄·▄▀▀▀█▄▐█·
 ███ ▐█▌▐█▌▐█.█▌▐█▄▪▐█▐█▌
. ▀  ▀▀▀▀▀▀·▀  ▀ ▀▀▀▀ ▀▀▀
*/

html {
   background-color: black;
   color: white;
   font-family: "Kode Mono", monospace;
   font-size: 14px;
   -webkit-font-smoothing: antialiased;
}

@media (max-width: 765px) and (orientation: portrait) {
   html {
      font-size: 13px;
   }
}

a {
   text-decoration: none;
}

.main {
   margin: 100px auto;
   line-height: 1.25;
   max-width: 600px;
   width: calc(100vw - 2rem);
   overflow: hidden;
}

@media (max-width: 765px) and (orientation: portrait) {
   .main {
      margin-top: 40px;
   }
}

.main p:empty {
   height: 1em;
}

.main pre {
   white-space: pre-wrap;
}

.halves {
   display: grid;
   gap: 2rem;
   grid-template-columns: 1fr 1fr;
   max-width: calc(600px - 2rem);
   width: calc(100vw - 2rem);
}

@media (max-width: 765px) and (orientation: portrait) {
   .halves {
      gap: 0;
      grid-template-columns: 1fr;
   }
}

.main pre.sm {
   font-size: 11px;
   margin-top: 1rem;
}

@media (max-width: 765px) and (orientation: portrait) {
   .main pre.sm {
      font-size: 10px;
   }
}