:root {
    --accent-color: rgb(255, 255, 255);
    --base-text-color: rgb(255, 255, 255);
    --background-color: rgb(142, 142, 142);
    --shadow: 5px -5px 29px 0px rgba(255, 255, 255, 0.149);
    --bg-image: url(just-water.gif);

}

@font-face {
    font-family: Chicago;
    src: url(ChicagoFLF.ttf);
}

* {
    box-sizing: border-box;
    /* border: 2px solid #000000;*/
    /* background: rgb(0 100 0 / 0.1) !important; */
    font-family: Chicago, Garamond, Georgia, 'Times New Roman', serif;
    /* border: inherit solid var(--accent-color); */
}
/* *:hover { border: 2px solid black; } */

html {
    background-image: var(--bg-image);
    filter: grayscale(100%) contrast(1.25);
}
a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline wavy;
}

header {
    grid-area: header;
}
aside { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0.25em;
    color: var(--accent-color);
    width: max-content;
    display: flex;
}

p { margin: auto; }

.container {
    margin: 1em auto;
    backdrop-filter: blur(5px);
    min-width: 600px;
    max-width: 800px;
    padding: 0.5rem;
    display: grid;
    grid-gap: 10px;
    color: var(--base-text-color);
    border: var(--accent-color) solid 3px;
    grid-template:
        "header header"
        "main main"
        "footer footer"
        / 10em 1fr;
}

@media (min-width: 600px) {
    .container {
    grid-template:
        "header header"
        "sidebar main"
        "footer footer"
        / 10em 1fr;
    }
    
}

ul {
    margin: 0;
    padding: 0;
    display: flex;
}

li.nav {
    display: inline-flex;
    padding: 0.5rem;
    /* margin: 0 0.25rem; */
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
}

nav a {
    color: var(--accent-color);
}

div.navbar {
    width: auto;
    display: flex;
    justify-content: left;
    padding: 0.25rem;
    margin: 0;
}

/* SIDEBAR */
@media (max-width:600px) {
    aside * {
        display: none;
        width: 0;
    }
}

aside {
    display: flex;
    padding: inherit;
    flex-direction: column;
    width: 10rem;
    box-shadow: var(--shadow);
}

aside p, h2 {
    margin: 0.25rem 0;
    padding: 0.5rem;
}
/* Content */
.entry h3 {
    display: flex;
    width: max-content;
    align-self: flex-start;
    padding: 0.5rem;
    margin: 0;
}
.entry p {
    width: auto;
    padding: 0.5rem;
    line-height: 1.25rem;
}

.content {
    width: auto;
    display: flex;
    flex-direction: column;
    padding: 0.5em;
    box-shadow: var(--shadow);
}