/* global */
html,
body {
    width: 100%;
    /* margin: 0; */
    overflow-x: hidden;
}

html {
    font-size: 100%;
    line-height: 1.2;
}

body {
    font-family: "FreeSerif", 'Times New Roman', Times, serif;
    font-size: 1.1rem;
    line-height: 1.3;
    color: var(--main-color);
}


/* container */

.container {
    margin: 10px;
    font-family: "FreeSerif";
}

.container a {
    color: blue;
}

.container p {
    /* width: 60%; */
    margin: 0 0 10px 0;
}

/* header */

.container .header {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: min-content;
    width: 100%;
    gap: 10px;
    align-items: start;
}

.container .header .navigation {
    justify-self: end;
}

.container .header .navigation ol li {
    float: left;
    margin: 0 0 30px 30px;
    padding: 0 0 0 0;
    list-style: decimal;
}

.container .header .navigation ol li:first {
    padding: 0;
}

.container .header .navigation ol li a {
    display: block;
    color: blue;
}

/* content */

.container .content {
    display: flex;
    flex-direction: column;
}

.container .content h1, h2 {
    margin: 0 0 10px 0;
}

.container .content p {
    width: 60%;
    padding: 0 10px 0 0;
}