@import url('https://fonts.googleapis.com/css2?family=Gelasio:ital,wght@0,400..700;1,400..700&display=swap');
@import url('style.css');

article {
    width: 100%;
    max-width: 75ch;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

p {
    color: #e6e6e6;
    font-family: 'Gelasio';
    line-height: 1.3;
    font-size: 1.1rem;
}

a {
    color: #4DA3FF;
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
}

li {
    color: #e6e6e6;
    font-family: 'Gelasio';
    line-height: 1.3;
    font-size: 1.1rem;

    &::marker {
        color: #e6e6e6;
    }
}

h1 {
    color: #e6e6e6;
    line-height: 1.15;
    margin-bottom: 0;
    font-family: 'Gelasio';
    font-weight: 600;
}

h2 {
    color: #e6e6e6;
    line-height: 1;
    margin-top: 3rem;
    margin-bottom: 0;
    font-family: 'Gelasio';
    font-weight: 600;
}

h3 {
    color: #e6e6e6;
    line-height: 1;
    margin-top: 2rem;
    margin-bottom: 0;
    font-family: 'Gelasio';
    font-weight: 600;
}

.comment {
    color: #888;
}

hr {
  display: block;
  height: 2px;
  border: 0;
  border-top: 2px solid #888;
  margin: 1em 0;
  padding: 0;
}

time {
    display: block;
    font-family: 'Gelasio';
    color: #888;
    margin-top: 0.5rem;
}

@media (max-width: 1000px) {
    body {
        display: block;
        padding: 1rem 1rem 3rem;
    }

    .content {
        padding: 0;
    }
}

summary {
    font-family: 'Gelasio';
    color: #888;

    &::marker {
        color: #888;
    }
}

table {
    border-collapse: collapse;
    margin: 0 auto;
    th {
        color: #e6e6e6;
        text-align: center;
        border: solid;
        padding: 0 1.5ch;
        border-width: 0 0 1px 0;

        &[scope="row"] {
            border-width: 0 1px 0 0;
        }
    }
    td {
        color: #00ff78;
        text-align: center;
        padding: 0 1.5ch;
    }
}

code .path {
    color: #888;
}

/* inline code */
code {
    color: #00ff78;
    font-family: 'Roboto Mono';
}

/* CODEBLOCKS */
pre {
    color: #00ff78;
    font-family: 'Roboto Mono';

    code {
        color: #e6e6e6;
    }

    kw   { color: #6cb8ff; }   /* keywords */
    ty   { color: #4ec9b0; }   /* types */
    fn   { color: #dcdcaa; }   /* functions */
    mac  { color: #c586c0; }   /* macros */
    str  { color: #ce9178; }   /* strings */
    num  { color: #b5cea8; }   /* numbers */
    com  { color: #7f848e; font-style: italic; }
    prop { color: #9cdcfe; }   /* fields */
    mod  { color: #e6e6e6; }   /* modules */
    id   { color: inherit; }   /* local variables */
}