@import "fonts.css";


body {
    font-family: "Aleo", sans-serif;
    margin: 0.5em 1em;
    color: #fff;
    background-color: #222;
}

pre, code {
    font-family: "Monaspace Xenon Var", monospace;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Info Story", "Comic Sans MS", "Comic Sans", cursive;
}

h2, h3, h4 {
    color: #f5f;
}

dt {
    color: #dd3bdd;
    font-weight: bold;
}

strong, em, h5, h6 {
    color: #ff5;
}

a {
    color: #2bb;
    text-decoration: none;
}

a:hover, a:active {
    color: #5ff;
    text-decoration: white underline;
}

/* annoying */
h1 a, h1 a:hover, h1 a:active,
h2 a, h2 a:hover, h2 a:active,
h3 a, h3 a:hover, h3 a:active,
h4 a, h4 a:hover, h4 a:active,
h5 a, h5 a:hover, h5 a:active,
h6 a, h6 a:hover, h6 a:active {
    color: inherit;
}


/* mostly for landing page, but useful elsewhere too? */
svg.icon>path, #links svg>path {
    fill: #ff5;
}


/* page title */

/* decorative bits */
h1 code.prompt:before {
    /* this 'should' just be blue, but css blue on black is too dim to be legible, especially for a single character. and if you're wondering why this is blue and not cyan, well, the username is cyan and the directory name is blue... and the directory is blue because that's the default for ls --color */
    color: #55f;
    content: '~/';
}
h1 code.prompt:after {
    color: #f5f;
    content: '>';
}
h1 a {
    color: inherit;
    text-decoration: none;
}


/* layout stuff */

dd :first-child, dd svg:first-child + * {
    margin-top: 0;
}
dd :last-child {
    margin-bottom: 0;
}

/* ----------------------------------------------------------------------------
   landing page: list of links on left, art bit on bottom right */

#landing {
    height: 100vh;
}

#landing body {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    min-height: 100vh;
    margin: 0;
}
#landing #main {
    margin: 0.5em 1em;
}


/* content grid (<dl id="links">) */

#landing #links {
    display: grid;
    grid-template-columns: 6rem auto;
}

#landing #links dt {
    grid-column: 1;
    text-align: right;
}

#landing #links dd {
    grid-column: 2;
    margin: 0 0 0.5rem 2.5rem;
}

#landing #links dd :first-child {
    margin-top: 0;
}

#landing #links dd>svg {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0 0 0 -1.75rem;
    position: absolute;
}
#landing #links dd>svg+svg {
    margin: auto;
}


/* art */

#tenari {
    align-self: flex-end;
    margin-left: auto;
    position: relative;
    overflow: hidden;
}

#tenari img {
    width: auto;
    max-height: min(506px, 100svh);
    /* try to leave enough space for the text */
    max-width: calc(100vw - 1rem);
    margin-right: 1rem;
}

#tenari p {
    transform-origin: bottom right;
    transform: rotate(90deg);
    position: absolute;
    bottom: 0;
    right: 1.25rem;
    margin: .5em .25em;
    padding: 0;
    text-wrap: nowrap;
    overflow: hidden;
}

#tenari p, #tenari a {
    transition: .2s all linear;
}

#tenari p {
    color: #666;
}

#tenari a {
    color: #bbb;
}

#tenari:hover p, #tenari:active p {
    color: #f5f;
}

#tenari:hover a, #tenari:active a {
    color: #5ff;
}