:root{
  --base03: #002b36;
  --base02: #073642;
  --base01: #586e75;
  --base00: #657b83;
  --base0: #839496;
  --base1: #93a1a1;
  --base2: #eee8d5;
  --base3: #fdf6e3;
  --yellow: #b58900;
  --orange: #cb4b16;
  --red: #d30102;
  --magenta: #d33682;
  --violet: #6c71c4;
  --blue: #268bd2;
  --cyan: #2aa198;
  --green: #859900;
}

body {
  background-color: var(--base03);
  color: var(--base2);
}

a {
  color: var(--cyan);
}

.typewriter::before {
 content: "$ ";
}

@media (prefers-reduced-motion: no-preference) {
 @keyframes flash {
  50% {opacity: 0;}
 }
 @keyframes reveal {
  from {width:2em;}
  to {width:100%;}
 }
 .typewriter {
  overflow: hidden;
  white-space: nowrap;
  animation: reveal 4s linear;
  text-overflow: "█";
 }
 .typewriter::after{
  content: "█";
  animation: flash 1s step-end infinite;
 }
}

.typewriter {
 font-family: monospace;
}

#title {
 color: var(--cyan); 
}

.subtitle {
 color: var(--red);
}

.row {
 border: 6px double var(--cyan);
 width: fit-content;
 padding-left: 1em;
 padding-right: 1em;
 text-align: left;
 width: inherit;
}

.row_content {

}

.container {
 display: flex;
 justify-content: center;
}

#gpg {
 color: var(--yellow);
 font-family: monospace;
 font-size: 18px;
}

#articles {
 color: var(--green);
}

#contact {
 color: var(--orange);
}

.article_name {
 font-family: monospace;
 font-size: 18px;
}

#left_panel {
 height: inherit;
}

#right_panel {
 display: flex;
 flex-direction: column;
}

#contact_col {
 flex: 1;
}

#signature {
 text-align: right;
}