/* :root { */
/* 	--gap: 24px; */
/* 	--content-gap: 20px; */

/*     /\* nav width 1024 and main 720 *\/ */
/* 	--nav-width: 400px;  */
/* 	/\* --main-width: 800px; *\/ */
    
/* 	--header-height: 60px; */
/* 	--footer-height: 60px; */
/* 	--radius: 8px; */
/* 	--theme: rgb(255, 255, 255); */
/* 	--entry: rgb(255, 255, 255); */
/* 	--primary: rgb(30, 30, 30); */
/* 	--secondary: rgb(108, 108, 108); */
/* 	--tertiary: rgb(214, 214, 214); */
/* 	--content: rgb(31, 31, 31); */
/* 	--hljs-bg: rgb(28, 29, 33); */
/* 	--code-bg: rgb(245, 245, 245); */
/* 	--border: rgb(238, 238, 238); */
/* } */

body {
    font-family: Merriweather, sans-serif;
    text-align: left;
    word-break: break-word;
    background: rgb(255,255,255);
    background: radial-gradient(circle, rgba(255,255,255,1) 20%, rgba(245,245,245,1) 100%); 
     /* margin-top: 100px; */
}

nav {
    display: grid;
    /* flex-wrap: wrap; */
    /* flex: 1 200px; */
    /* justify-content: space-between; */
    /* width: calc(var(--nav-width) + var(--gap)); */
    /* width: var(--nav-width); */
    /* margin-inline-start: auto; */
    /* margin-inline-end: auto; */
    /* margin: auto; */
    /* color: red; */
}

ul {
    list-style-type: none;
}

/* .links { */
/*     display: flex; */
/*     flex-direction: column; */
/*     gap: 1em; */
/* } */

nav ul {
    display: flex;
    flex-direction: column;
    width: auto;
    gap: .5em;
    /* margin: auto var(--gap); */
}

.container {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    flex-direction: column;
    /* place-items: center; */
    /* flex-wrap: wrap; */
    width: 80vw;
    max-width: 800px;
    margin: 0 auto;
    padding: 0px;
    align-content: start;
    /* justify-content: center; */
    /* align-items: center; */
    /* width: var(--main-width); */
    /* width: 20vw; */
    /* height: 60vh; */
    /* margin: auto; */
}

@media (max-width: 700px) {
    .container {
        grid-template-columns: subgrid;
    }
    nav ul {
        flex-direction: row;
}

/* .row { */
/*     display: grid; */
/*     place-items: center; */
/*     /\* width: var(--main-width); *\/ */
/* } */

/* .row { */
/*     display: flex; */
/*     flex: 1 100px; */
/*     align-items: top; */
/*     color: green; */
/* } */

/* .row h1 { */
/*     width: 20em; */
/*     flex: 0 150px; */
/*     position: relative; */
/* } */

/* margin: relative; */