body {
    /* height: calc(100vh - 36px); */
    /* including margin 8px */
    padding: 10px 10%;
    background-color: var(--background-color);
    background-image: var(--background-image);
    background-size: var(--background-size);
    background-position: center;
    color: white;
    font-family: 'Gill Sans MT', sans-serif;
    line-height: 1.2em;
    letter-spacing: 0.2px;
    /* font-family: 'Palatino', serif; */
}


article {
    /* box-sizing:content-box; */
    color: #002b59;
    font-family: cursive;
    background-image: url(./images/grid.png);
    background-repeat: repeat;
    background-size: 210px;
    padding: 10px 20px;
    border-inline-start: 20px var(--background-color) dotted;

    font-family: "Patrick Hand", cursive;
    font-size: larger;
    line-height: 24px;
}


body.vision {
    background-image: none;
}

.container {
    display: grid;
    column-gap: 19px;
    grid-template:
        "nav main aside"
        / min-content 1fr min-content;
}

.container aside {
    grid-area: aside;
}

.container main {
    grid-area: main;
}

.container nav {
    grid-area: nav;
}


summary.end::marker {
    content: "▷ ";
    font-size: 0.7em;
}


h1.header {
    background: var(--header-color);
    background: linear-gradient(15deg, var(--header-color) 0%, rgba(237, 221, 83, 0) 100%);
    margin: 0px;
    padding: 22px 0px;
    line-height: normal;
    text-align: right;
}

nav.header ul {
    padding: 10px;
    list-style-type: none;
    background-color: var(--header-color);
}

nav.header li {
    display: inline;
    margin: 10px;
}

a {
    color: inherit;
    text-decoration: underline;
}

a:hover {
    color: #b27174;
    color: lightpink;
}

main {
    text-align: justify;
}

main.vision {
    background-color: var(--background-color);
    padding: 10px;
    padding-bottom: 0px;
}

button {
    background-color: rgb(213, 203, 255);
    border-width: 4px;
    border-color: rgb(177, 164, 232) rgb(162, 146, 227);
}

aside {
    display: flex;
    flex-direction: column;
}

aside div,
.container nav div {
    border: var(--aside-border-color) 2px dashed;
    background-color: var(--aside-color);
    padding: 7px;
    margin-bottom: 16px;
}

aside ul,
.container nav ul {
    margin: 0;
    padding: 3px;
    padding-left: 18px;
}

aside ul.blinkie {
    list-style-type: none;
    padding-left: 3px;
    margin: 0;
}

aside li,
.container nav li {
    margin: 4px;
}

aside li a {
    display: block;
    height: 24px;
}

p.somestyle {
    margin: 5px;
    margin-bottom: 0px;
}

p.nostyle {
    margin: 0px;
}

img.blinkie {
    width: 180px;
}