:root {
  --term-black: #000;
  --term-black-light: #656565;
  --term-red: #AB4848;
  --term-red-light: #DD3962;
  --term-green: #7D9E64;
  --term-green-light: #00FF00;
  --term-yellow: #E88C00;
  --term-yellow-light: #FFB987;
    --term-blue: #5295BF;
  --term-blue-light: #94C4FF;
    --term-purple: #BF5F89;
  --term-purple-light: #FF7EB6;
    --term-cyan: #50B4BE;
  --term-cyan-light: #5CD0DB;
    --term-gray: #D1D1D1;
  --term-white: #FFFFFF;
}

@font-face {
    font-family: 'Monaspace Argon Mono';
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/MonaspaceArgon-ExtraLight.woff") format("woff"),
}

@font-face {
    font-family: 'Monaspace Argon Mono';
    font-style: normal;
    font-weight: bold;
    src: url("../fonts/MonaspaceArgon-Regular.woff") format("woff")
}

@font-face {
    font-family: 'Monaspace Argon Mono';
    font-style: italic;
    font-weight: normal;
    src: url("../fonts/MonaspaceArgon-ExtraLightItalic.woff") format("woff")
}

@font-face {
    font-family: 'Monaspace Argon Mono';
    font-style: italic;
    font-weight: bold;
    src: url("../fonts/MonaspaceArgon-Italic.woff") format("woff")
}

body {
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: black;
    font-family: "Monaspace Argon Mono",monospace,serif;
    font-size: 12pt;
    font-weight: 200;
    font-variant-ligatures: discretionary-ligatures;
    color: var(--term-white);
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    padding-top: 1rem;
    padding-bottom: 2rem;

    &::-webkit-scrollbar {
      width: 5px;
    }

    /* Track */
    &::-webkit-scrollbar-track {
      background: transparent;
    }

    /* Handle */
    &::-webkit-scrollbar-thumb {
      background: var(--term-yellow-light);
    }
}

h1,h2,h3 {
    font-weight: 600
}

h1 .title,h2 .title {
    letter-spacing: 0.1px;
    text-align: center;
    outline: none;
    border: none
}

h1 .halftitle,h2 .halftitle {
    display: inline-block;
    width: auto;
    height: auto;
    text-align: right
}

h1 .blog-title,h2 .blog-title {
    text-align: left
}

div.picheader,div.textheader {
    width: 100%;
    height: auto;
    display: inline-block;
    margin-top: 1.5rem;
    margin-bottom: 0.2rem
}

div.halftitle {
    height: 124px;
    width: 430px;
    float: right;
    margin: auto
}

.content p {
    clear: both;
    padding: 0;
    text-align: left
}

.content {
    line-height: 1.5rem
}

a {
    color: var(--term-blue-light);
    text-decoration: none;
    cursor: pointer
}

a:hover {
    background-color: var(--term-blue-light);
    color: var(--term-white)
}

.content a {
    border-bottom: 1px solid var(--term-blue-light)
}

img.titleimage {
    float: left;
    border: 2px solid black;
    border-radius: 8px
}

div.clear {
    clear: both
}

div.content {
    clear: both
}

p.sidenote ::before {
    content: "::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::"
}

.container {
    background-color: var(--term-black);
    display: flex;
    justify-content: center;
    /* resize: both; */
    overflow: hidden;
    /* height: 95vh; */
    width: min(1920px, 95vw);
    /* margin: 2ch auto; */
    /* padding: 1ch; */
    border-radius: 5px;
}

.terminal {
    padding: 1rem 0 1rem 0;
    /* height: 100%; */
    /* width */
}

.terminal h1, .terminal h2,.terminal h3,.terminal h4,.terminal code,.terminal blockquote,.terminal em,.terminal strong {
  font-size: 12pt;
  font-style: normal;
  font-family: "Monaspace Argon Mono", monospace, serif
}

.terminal h1,.terminal h2,.terminal h3,.terminal h4,.terminal h5,.terminal h6,.terminal code,.terminal blockquote,.terminal ol,.terminal ul,.terminal dl,.terminal li,.terminal p,.terminal section,.terminal header,.terminal footer {
    float: none;
    margin: 0;
    padding: 0
}

.terminal h1,.terminal p,.terminal ul,.terminal dl,.terminal ol,.terminal blockquote {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem
}

.terminal h1 {
    position: relative;
    overflow: hidden;
    text-transform: uppercase
}

.terminal h1+* {
    margin-top: 0
}

.terminal h2 {
    text-transform: uppercase
}

.terminal h2,.terminal h3,.terminal h4,.terminal h5,.terminal h6 {
    position: relative;
    margin-bottom: 1.5rem
}

.terminal h1>a:before, .terminal h2>a:before,.terminal h3>a:before,.terminal h4>a:before,.terminal h5>a:before,.terminal h6>a:before {
    color: var(--term-gray);
    border-bottom: none
}

@media screen and (min-width: 70rem) and (orientation:landscape) {
    .content{
        padding-left: 2rem;
    }
    .container {
        width: 70rem;
    }
    .terminal {
    /* aspect-ratio: 4 / 3; */
    padding: 1rem;
    }
    .terminal h1>a:before, .terminal h2>a:before,.terminal h3>a:before,.terminal h4>a:before,.terminal h5>a:before,.terminal h6>a:before {
        position:absolute;
        transform: translateX(-100%);
        padding-right: 0.6rem
    }
}

.terminal h1>a:hover::before, .terminal h2>a:hover::before,.terminal h3>a:hover::before,.terminal h4>a:hover::before,.terminal h5>a:hover::before,.terminal h6>a:hover::before {
    color: var(--term-white);
    background-color: var(--term-yellow);
    border-bottom: none
}

.terminal h1,.terminal h2 {
    line-height: 1.5rem;
    font-weight: bold
}

.terminal h1>a:before {
    content: "#"
}

.terminal h2>a:before {
    content: "##"
}

.terminal h3>a:before {
    content: "###"
}

.terminal h4>a:before {
    content: "####"
}

.terminal h5>a:before {
    content: "#####"
}

.terminal h6>a:before {
    content: "######"
}

.terminal li {
    position: relative;
    display: block;
    padding-left: 2ch
}

.terminal li:before {
    position: absolute;
    top: 0;
    left: 0
}

.terminal ul>li:before {
    content: "*";
    color: #bfbfbf
}

.terminal ol {
    counter-reset: ol
}

.terminal ol>li:before {
    content: counter(ol) ".";
    counter-increment: ol;
    color: var(--term-gray)
}

.terminal blockquote {
    position: relative;
    padding-left: 2ch;
    overflow: hidden;
    color: var(--term-gray)
}

.terminal blockquote:after {
    content: ">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>";
    white-space: pre;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 1.5rem;
    color: #bfbfbf
}

.terminal em {
    font-style: italic
}

.terminal em:before,.terminal em:after {
    content: "*";
    display: inline
}

.terminal strong {
    font-weight: bold
}

.terminal pre code:before,.terminal pre code:after {
    content: ''
}

.terminal code {
    color: var(--term-gray)
}

.terminal a code {
    color: var(--term-yellow)
}

.terminal a code:hover {
    color: var(--term-white);
    background-color: var(--term-yellow)
}

.terminal code:before,.terminal code:after {
    content: "`";
    display: inline
}

.terminal hr {
    position: relative;
    height: 1.5rem;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    border: 0;
    margin-bottom: 1.5rem
}

.terminal hr:after {
    content: "----------------------------------------------------------";
    text-align: left;
    display: inline-block;
    position: relative;
    top: 0;
    left: 0;
    font-size: 1rem;
    line-height: 1.5rem;
    width: 100%;
    word-wrap: break-word;
    color: #bfbfbf
}

.terminal-ones ol>li:after {
    content: "1."
}

.terminal a.footnote {
    color:var(--term-red);
    border-bottom: none
}

.terminal a.footnote:before {
    content: "[^";
    color:var(--term-red)
}

.terminal a.footnote:after {
    content: "]";
    color:var(--term-red)
}

.terminal a.footnote:hover {
    background-color:var(--term-red);
    color: var(--term-white)
}

.terminal a.footnote:hover::before,.terminal a.footnote:hover::after {
    background-color:var(--term-red);
    color: var(--term-white)
}

.terminal a.reversefootnote {
    color:var(--term-red);
    border-bottom:var(--term-red)
}

.terminal a.reversefootnote:hover {
    background-color:var(--term-red);
    color: var(--term-white)
}

.terminal a.reversefootnote:hover::before,.terminal a.reversefootnote:hover::after {
    background-color:var(--term-red);
    color: var(--term-white)
}

.terminal div.footnotes::before {
    content: "*** *** ***";
    text-align: center;
    display: inline-block;
    position: relative;
    top: 0;
    left: 0;
    font-size: 1rem;
    line-height: 1.5rem;
    width: 100%;
    word-wrap: break-word;
    color: #bfbfbf
}

.terminal div.footnotes ol>li {
    padding-left: 6ch
}

.terminal div.footnotes ol>li:before {
    content: "[^" counter(ol) "]:";
    counter-increment: ol;
    color: var(--term-gray)
}


a {
  font-family: "Monaspace Argon Mono", monospace, serif
}

a.dir {
  color: var(--term-blue-light);
  border-bottom: none;
}

a.dir:after {
    content: "/";
    color: var(--term-white);
    border-bottom: none
}

a.dir:hover {
    background-color: var(--term-blue-light);
    color: var(--term-black)
}

a.dir:hover::after {
    border-bottom: none;
    color: var(--term-black);
}

a.file {
    color: var(--term-green);
  border-bottom: none;
}

a.file:hover {
    background-color: var(--term-green);
    color: var(--term-black)
}

a.symlink {
    color: var(--term-cyan)
}

@media only screen and (min-width: 70rem) {
    a.symlink:after {
        content:" -> " attr(href);
        color: var(--term-white);
        overflow: hidden
    }
}

a.symlink:hover {
    background-color: var(--term-cyan);
    color: var(--term-white)
}

a.symlink:hover::after {
    color: var(--term-white)
}

.term {
  color: var(--term-black-light);
  font-family: "Monaspace Argon Mono", monospace, serif
}

.term.help {
    padding-bottom: 1rem;
}

.term.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 9em)
}

.term.user {
    color: var(--term-white);
}
.term.user:after {
    content: "@";
}

.term.host {
    color: var(--term-black-light)
}

.term.host>a {
    color: var(--term-black-light);
}

.term.path {
    color: var(--term-blue);
}

.term.cmd {
    color: var(--term-white);
}

.term.prompt:before {
    content: "❭";
    color: var(--term-purple);
}

.term.file a {
  color: var(--term-blue);
  border-bottom: none
}

.term.dir:after {
  color: var(--term-white);
    border-bottom: none;
}

.term.cursor {
    color: var(--term-white);
    animation: blink 1s step-end infinite
}

footer.term {
  margin-top: 1.5rem;
}

@keyframes blink {
    from, to {
        color: transparent
    }

    50% {
        color: var(--term-white)
    }
}

* {
    text-rendering: geometricPrecision
}

pre {
    display: block;
    margin-top: 0;
    margin-bottom: 1rem;
    padding: 1rem;
    font-size: .8rem;
    line-height: 1.5rem;
    white-space: pre;
    white-space: pre-wrap;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #f9f9f9
}

pre code {
    padding: 0;
    font-size: 100%;
    color: inherit;
    background-color: transparent
}