html, body {
 height: 100%;
  width: 100%;
  display: flex;
align-items: center
}
main {
  width: 100%; border-bottom: 1px solid white; border-top: 1px solid white;
}
/*@media (min-width: 600px) {
  #vert-line {
    left: 300px;
  }
  #name {
    padding-left: 300px;
  }
}*/

@media (prefers-color-scheme: dark) {
.themed {
  color: #DBDACE;
  background-color: #DB6A5A;
}
}
@media (prefers-color-scheme: light) {
  .themed {
    color: #DB6A5A;
    background-color: #DBDACE;
  }
}
#name {
  padding-left: 40px;
}
.mt {
  cursor: default;
  font-family: 'Major Mono Display', monospace;
  font-size: 4em;
  padding-bottom: 5px;
}


.op-3 {
  opacity: 25%;
}
.op-2 {
  opacity: 50%;
}
#vert-line {
  position:absolute; height:98%; border-left:1px solid white; left:40px;
}
#vert-line-r {
  display:none;
}
@media (min-width: 1000px) {
  #vert-line {
    left: 300px;
  }
  #name {
    padding-left: 300px;
  }
  #vert-line-r {
    display:block;
    position:absolute; height:98%; border-left:1px solid white; right:200px;
  }
}