@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
@import url('html5-reset.css');


:root {
    scroll-behavior: smooth;
    color-scheme: light;
    --max-content-width: 47rem;
    --main-pad: 1em;
    --main-start: 0em;
    --text-color: hsl(0, 0%, 20%);
    --header-height: 1em;
    --footer-height: 16px!important;
    --footer-padding: 1ex;
}

/* Main blocks
*****************************************************/
body {
	font-family: "Open sans", Helvetica, sans-serif;
    font-size: 100%;
    text-align: left;
    color: var(--text-color);
    line-height: 1.8;
    background-color: #dfffcf;
    max-inline-size: var(--max-content-width);
    margin-block-start: var(--header-height);
    margin-inline: auto;
    padding-inline: var(--main-pad);
}
@media (min-width: 600px) {
    body {
        text-align: justify;
    }
}

footer {
    font-size: 80%;
    margin-block: 2em;
    border-block-start: 2px solid grey;
    padding-block-start: 1em;
}


/* Paragraphs
*****************************************************/
p {
    margin-block-end: 1em;
    font-size: 100%;
}

sup, sub {
    font-size: 70%;
}

sub {
    baseline-shift: -0.5ex;
}

sup {
    baseline-shift: 1ex;
}


/* Heading
*****************************************************/
h1, h2, h3, h4, h5 {
    text-align: left;
    font-weight: bold;
    margin-block-start: 1.5em;
    margin-block-end: 0.5em;
    scroll-margin-block: 2em 0;
}

h1 {
    font-size: 250%;
}

h2 {
    font-size: 150%;
}

h3 {
    font-size: 125%;
}

h4 {
    font-size: 110%;
}

h5 {
	font-size: 105%;
}


/* Links
*****************************************************/
a {
    text-decoration-style: dotted;
}
a:link {
    color: blue;
}
a:visited {
    color: indigo;
}
a:hover {
    color: green;
}


/* List-like
*****************************************************/
dt {
    margin-block-start: 1em;
}

dd {
    margin-inline-start: 3em;
}

/* Welcome
*****************************************************/
.benvida :is(h1, h2) {
    text-align: center;
}

.benvida table {
    --first-column: 75%;
    --second-column: 20%;

    inline-size: 100%;
    margin-block: 2em;
    line-height: 1.3;

    a {
        font-weight: bold;
    }

    tr > td {
        padding-inline: calc(
            (100% - var(--first-column) - var(--second-column)) / 4
        );
        padding-block: 0.3em;
    }

    tr > td:first-child {
        inline-size: var(--first-column);

        table {
            inline-size: 100%;
            margin-block: 0;

            td {
                inline-size: 47%;
                padding-inline: 1em;
                vertical-align: middle;
            }

            td:first-of-type {
                text-align: right;
            }

            td:last-of-type {
                text-align: left;
            }
        }
    }

    tr > td:last-child {
        inline-size: var(--second-column);
        
        table {
            inline-size: 100%;
            margin-block: 0;
            text-align: center;
            font-size: 90%;

            td {
                inline-size: 100%;
                padding-block: 0.8em;
            }

            img {
                inline-size: 90%;
                vertical-align: top;
            }
        }
    }
}