:root {
    --tn-red: #f7768e;
    --tn-orange: #ff9e64;
    --tn-yellow: #e0af68;
    --tn-white: #cfc9c2;
    --tn-green: #9ece6a;
    --tn-teal: #73dacb;
    --tn-cyan-light: #b4f9f8;
    --tn-cyan: #2ac3de;
    --tn-blue-light: #7dcfff;
    --tn-blue: #7aa2f7;
    --tn-purple: #bb9af7;
    --tn-lavender: #c0caf5;
    --tn-lavender-grey: #a9b1d6;
    --tn-gray-blue: #9aa5ce;
    --tn-dark-blue-grey: #565f89;
    --tn-darker-grey: #414868;
    --tn-bg: #1a1b26;
}

@font-face {
    font-family: DepartureMono;
    src: url('assets/fonts//DepartureMono-Regular.otf');
}


/* -------------------------
   Page
   ------------------------- */

body {
    background: var(--tn-bg);
    color: var(--tn-lavender);

    font-family: DepartureMono, monospace;
    font-size: 16px;
    line-height: 1.7;

    margin: 0;
    padding: 40px 30px;
}

::selection {
    background: var(--tn-orange);
    color: var(--tn-darker-grey);
}

canvas {
  display: block;
  margin: 30px auto;
}

footer {
  text-align: center;
  font-size: x-small;
  color: var(--tn-red);
    margin-top: 50px;
}

/* -------------------------
   Article
   ------------------------- */

article {
    width: min(90%, 850px);
    margin: 0 auto;
}


/* -------------------------
   Terminal header
   ------------------------- */

article::before {
    content: "~/Group_Project";
    display: block;

    color: var(--tn-green);
    font-size: 0.9rem;

    margin-bottom: 35px;
}

article::after {
    content: "❯";

    color: var(--tn-green);

    display: block;
    margin-top: 50px;
  width: 2ch;
  animation: blink .5s step-end infinite alternate;
  border-right: 10px solid var(--tn-dark-blue-grey);
}


/* -------------------------
   Headings
   ------------------------- */

h1 {
    color: var(--tn-purple);

    font-size: 2rem;
    font-weight: normal;
    line-height: 1.3;

    margin: 0 0 0.5em;
}

h2 {
    color: var(--tn-blue);

    font-size: 1.35rem;
    font-weight: normal;
    line-height: 1.4;

    margin-top: 3em;
    margin-bottom: 1em;
}

h2::before {
    content: "## ";
    color: var(--tn-dark-blue-grey);
}

h3 {
    color: var(--tn-cyan);

    font-size: 1.1rem;
    font-weight: normal;

    margin-top: 2.5em;
}

h3::before {
    content: "### ";
    color: var(--tn-dark-blue-grey);
}

h4 {
    color: var(--tn-yellow);
}

h4::before {
    content: "#### ";
    color: var(--tn-dark-blue-grey);
}

/* -------------------------
   Date / metadata
   ------------------------- */

h1 + h5 {
    color: var(--tn-gray-blue);

    font-size: 0.8rem;
    font-weight: normal;

    margin-top: 0;
    margin-bottom: 2.5em;
}


/* -------------------------
   Body text
   ------------------------- */

p {
    margin: 0 0 1.5em;
}

strong {
    color: var(--tn-white);
}

em {
    color: var(--tn-teal);
}

table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid var(--tn-darker-grey)
}

th,
td {
  padding: 10px;
  text-align: left;
  border: 1px solid var(--tn-darker-grey);
}

th {
  font-weight: bold;
}

/* -------------------------
   Links
   ------------------------- */

a {
    color: var(--tn-blue);

    text-decoration: none;

    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 2px;
    background-image:
        linear-gradient(
            var(--tn-blue),
            var(--tn-blue)
        );

    transition: background-size 0.35s ease-in-out;
}

a:hover {
    color: var(--tn-yellow);
    background-size: 100% 2px;
}


/* -------------------------
   Back link
   ------------------------- */

a[href="/blog/"],
a[href="/"] {
    display: inline-block;

    color: var(--tn-gray-blue);

    margin-bottom: 2em;
}

a[href="/blog/"]::before,
a[href="/"]::before {
    content: "$ ";
    color: var(--tn-green);
}


/* -------------------------
   Lists
   ------------------------- */

ul,
ol {
    padding-left: 2em;
    margin-bottom: 1.5em;
}

li {
    margin-bottom: 0.5em;
}

li::marker {
    color: var(--tn-green);
}


/* -------------------------
   Inline code
   ------------------------- */

code {
    color: var(--tn-cyan-light);
    background: var(--tn-darker-grey);

    padding: 0.1em 0.35em;
}


/* -------------------------
   Code blocks
   ------------------------- */

pre {
    color: var(--tn-white);

    border-left: 3px solid var(--tn-purple);
    padding-left: 5px;
    margin: 2em 0;
    overflow-x: auto;
    line-height: 1.5;
}

pre code {
    background: none;
    padding: 0;
    color: inherit;
    font-size: 0.9rem;
    background: none;
}


/* -------------------------
   Blockquotes
   ------------------------- */

blockquote {
    border-left: 3px solid var(--tn-orange);

    margin: 2em 0;
    padding: 0.5em 1.5em;

    color: var(--tn-lavender-grey);
}

blockquote::before {
    content: "❯ ";

    color: var(--tn-orange);
}


/* -------------------------
   Images
   ------------------------- */

img {
    display: block;

    max-width: 100%;
    height: auto;

    margin: 2.5em auto;

    border: 1px solid var(--tn-dark-blue-grey);
}


/* -------------------------
   Horizontal rules
   ------------------------- */

hr {
    border: 0;
    border-top: 1px solid var(--tn-dark-blue-grey);

    margin: 3em 0;
}


/* -------------------------
   keyframes
   ------------------------- */

@keyframes blink {
  50% { border-color: transparent;}
}

/* -------------------------
   mobile
   ------------------------- */

@media (max-width: 600px) {
    body {
        padding: 25px 18px;
        font-size: 14px;
    }

    article {
        width: 100%;
    }

    article::before {
        margin-bottom: 25px;
    }

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.15rem;
    }

    pre {
        padding: 1em;
    }
}