@charset "UTF-8";

/*
 *  Copyright (C) 2016-2019 Marco Scarpetta
 *
 *  This work is licensed under the Creative Commons Attribution-ShareAlike 4.0
 *  International License. To view a copy of this license, visit
 *  http://creativecommons.org/licenses/by-sa/4.0/ or send a letter to Creative
 *  Commons, PO Box 1866, Mountain View, CA 94042, USA.
 */

/* Global style */
html {
    font-size: 1.125rem;
}

body {
    width: 100%;
    font-size: 1rem;
    font-family: 'Noto Serif', serif;
    color: #202020;
    margin: 0px 0px;
    padding: 0px 0px;
}

code {
    font-family: 'Roboto Mono', monospace;
}

a {
    text-decoration: none;
    color: #0A5AFF;
}

a:hover {
    text-decoration: underline;
    color: #1E6EFF;
}

h1, h2, h3 {
    font-weight: normal;
}

figure {
    border: 1px solid #ccc;
    text-align: center;
    margin: 1rem 0px 1rem 1rem;
}

figcaption {
    border-top: 1px solid #ccc;
    background-color: #eee;
    font-style: italic;
    font-size: medium;
    padding: 5px;
}

/* Site header */
#site-header {
    text-align: center;
    padding: 2rem 2rem 3rem 2rem;
    font-size: 2.2rem;
}

#main-menu {
    background-color: #37f;
}

#main-menu a {
    display: block;
    font-size: 1rem;
    font-weight: bold;
    padding: 0.8rem 0.8rem;
    color: #fff;
    text-decoration: none;
}

#main-menu a:hover {
    background-color: #39f;
    text-decoration: none;
}

/* Site footer */
footer {
    border-top: 1px solid #ccc;
    font-size: 0.9rem;
    line-height: 1.5;
    padding: 1rem 1rem;
}

footer > p {
    max-width: 80ch;
}

#menu-button {
    background: #ddd;
    padding: 0.8rem 0.8rem;
    text-align: center;
}

/* Main content */
main {
    min-height: 120vh;
    max-width: 80ch;
    padding: 2rem 5vw 1rem 5vw;
}

main p, main ol, main ul, main dl {
    text-align: justify;
}

main h1 {
    font-size: 2rem;
}

main h2 {
    font-size: 1.75rem;
}

main h3 {
    font-size: 1.25rem;
    color: #303090;
}

main img {
    max-width: 80vw;
}

main pre {
    max-width: 80vw;
    overflow: auto;
    padding-left: 2rem;
}

main > header > p {
    display: block;
    font-size: 0.9rem;
}

main > time {
    padding-top: 5rem;
    font-size: 0.9rem;
    display: block;
}

/* Gallery */
#background {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    text-align: center;
}

#background img {
    max-width: 100vw;
    max-height: 100vh;
}

/* Small screen */
@media screen and (max-width: 960px) {
    #menu-button {
        display: block;
    }

    #expand {
        display: none;
    }

    .footer-box {
        max-width: unset;
        padding: 5% 5%;
    }
}

/* Big screen */
@media screen and (min-width: 961px) {
    #menu-button {
        display: none;
    }

    #expand {
        display: unset;
    }

    #wrapper {
        display: grid;
        grid-template-columns: 1fr 4fr;
    }

    #sidebar {
        grid-column: 1;
        grid-row: 1;
        box-shadow: 5px 0px 5px #bbb;
    }

    #main-content {
        grid-column: 2;
        grid-row: 1;
    }
}
