/*
 * Global tweaks for Simple.css; colors and such.
 */

@media (prefers-color-scheme: light) {
    :root,
    ::backdrop {
        --accent-bg: var(--bg);
        --border: #e8e8e8;
    }
}

@media (prefers-color-scheme: dark) {
    :root,
    ::backdrop {
        --accent-bg: var(--bg);
    }
}

/*
 * Body and header layout.
 */

body>header>:only-child {
    margin-block-start: 0px;
}

body {
    grid-template-columns: 1fr min(60rem,90%) 1fr;
    font-size: 1.2rem;
}

body header {
    display: grid;
    grid-template-columns: 1fr min(60rem,90%) 1fr;

    padding: 0px;

    nav {
        display: grid;
        grid-template-columns: 1.5fr auto;
        grid-column: 2;
        padding: 0px;

        #site-title {
            font-size: 26px;
            font-weight: 300;
            line-height: 54px;
            letter-spacing: -1px;

            margin-bottom: 0;

            text-align: left;
        }

        #change-lang {
            text-align: right;
            margin: 0px;
            line-height: 54px;
        }

        a {
            border: 0 !important;
            padding: 0 !important;
            margin: 0 !important;

            &:hover {
                text-decoration: underline;
                color: var(--text);
            }
        }
    }
}

/*
 * CV entries.
 */

.entry {
    margin-bottom: 1rem;

    .entry-block {
        width: 100%;
        display: grid;
        grid-template-columns: 2fr 1fr;

        pre {
            padding: 0;
            margin: 0;
            border: 0;
            font-size: 0.8rem;
            text-align: right;
        }
    }

    .entry-description {
        text-align: justify;
        text-justify: inter-word;
    }

    .entry-space {
        margin-top: 5px;
    }
}

/*
 * Little icons for services such as GMail, Twitter, etc.
 */
#info {
    a {
        img {
            vertical-align: middle;
            width: 15px;
            margin-right: 5px;
        }
    }
}

/*
 * Posts.
 */
.post {
    h3 {
        margin: 2.0rem 0 1.5rem 0;
    }

    p {
        margin: 0;
        text-indent: 2em;
    }

    p.no-indent {
        text-indent: 0;
    }
}

/*
 * Global things.
 */

a {
    color: var(--text) !important;
}

p {
    text-align: justify;
    text-justify: inter-word;
}

h1, h3 {
    font-weight: normal;
}

hr {
    margin: 3em auto;
    width: 15%;
}

/* My picture should be floaty. */
#image-profile {
    display: block;
    padding: 15px;
    float: right;
    border-radius: 30%;
    margin-left: 20px;
}

.text-justify {
    text-align: justify;
    text-justify: inter-word;
}

/*
 * Style to apply for reduced screens.
 */
@media only screen and (width <= 720px) {
    body {
        font-size: 1rem;
    }

    header {
        padding: 0.5rem 0 !important;
        nav {
            a {
                line-height: 1;
                vertical-align: middle;
                text-decoration: none;
            }
        }
    }

    #image-profile {
        display: none;
    }

    #info {
        text-align: center;
    }

    .entry {
        .entry-block {
            grid-template-columns: 1fr;

            pre {
                text-align: left;
                margin-botton: 0.5rem;
            }

        }
    }

    ul {
        padding: 0 1.0em;
    }
}