:root {
	--dark: #1b1b1f;
	--dim: hsl(240, 4%, 50%);
	--light: hsla(240, 4%, 95%, 0.936); /*f0f0f0*/
	--body-bg: var(--dark);
  --tiny-space: 0.25rem;
	--body-col: var(--light);
	--structure-col:#FFC8FB; 
	--a-col: var(--light); /* 01BAEF */
	--h1-col: var(--dim);
	--h2-col: var(--dim);
  --highlight: #FFC8FB;

  --margin: 20px;
  --sidebar-width: 240px;
  --padding: 10px;
  --border: none;
}

.katex-mathml annotation {
	display: none;
}


html {
	background: var(--body-bg);
  font-family: 'Source Serif 4', sans-serif;
  line-height: 1.5;
}

body {
  display: flex;
  font-size: var(--font-size);
  background: var(--body-bg);
  color: var(--light);
  justify-content: center;
}

/* layout */
.layout {
  display: grid;
  min-width: 1000px;
  max-width: 1000px;
  grid-gap: var(--margin);
  grid-template: "navigation" auto "main" auto "footer" auto
  / auto;
}

main {
    grid-area: main;
    padding: var(--padding);
    border: var(--border);
}
main h1, h2{
  margin: auto;
  text-align: center;
}

.navigation {
  margin-top: 20px;
  grid-area: navigation;
  border: var(--border);
  padding: var(--padding);
  text-align: center;
}

nav ul {
  margin: 2px;
  padding: 0;
  list-style: none;
  user-select: none;
}

nav li {
  display: inline-block;
  border: 1px dotted var(--dim);
  font-size: 20px;
  padding-top: 3px;
  padding-bottom: 3px;
  min-width: 18ch;
}
nav li a{
  color: var(--dim);
}
nav li a:hover{
  color: var(--light);
}

.left-sidebar {
  grid-area: leftSidebar;
}

.footer {
  grid-area: footer;
  border-top: 1px dotted var(--light);
  padding: 15px;
}

.footer p {
  text-align: center;
}
/* links */
a, .alike {
	color: var(--a-col);
	text-decoration-thickness: calc(var(--tiny-space)/3);
	text-decoration-line: underline;
	text-decoration-style: dotted;
	/* transition-property: text-decoration-thickness, text-decoration-color;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out; */
}
/*
a:hover, a:focus, a:active, .alike:hover, .alike:focus, .alike:active { 
	text-decoration-thickness: var(--tiny-space); 
} */
a:hover {
	color: var(--h1-col);
}

/* organizing blog posts */
.blog-preview {
  margin: 10px;
  padding: 10px;
  border: var(--tiny-space) double var(--dim);
  transition-property: border-color;
}
.blog-preview:hover {
  border-color: var(--light);
  transition: 0.5s ease;
}
.blog-preview hr {
  border: none;
  border-top: 1.5px solid var(--dim);
}


/* isotope */
/* clear fix */
.grid:after {
    content: '';
    display: block;
    clear: both;
}


/* ---- .element-item ---- */

.grid-item {
  position: relative;
  float: left;
  width: 22%;
  aspect-ratio: 2/3;
  margin: 10px;
  font-size: auto;
  overflow: show;
}

.grid-item a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.grid-item a img:hover{
  transform: scale(1.05) rotate(5deg);
}

.grid-item h1 {
  color: var(--text-color);
  font-size: 20px;
}
.grid-item p {
  font-size: 14px;
  color: var(--text-color);
}


  .grid-item--width2 { width: 210px; }
  .grid-item--width3 { width: 100px; }
  .grid-item--height2 { height: 210px; }
  
  /* .grid-item:nth-child(10n+0) { background: #306BAC; }
  .grid-item:nth-child(10n+1) { background: #A7D3A6; }
  .grid-item:nth-child(10n+2) { background: #FFE2FE; }
  .grid-item:nth-child(10n+3) { background: #FBACBE; }
  .grid-item:nth-child(10n+4) { background: #7871AA; }
  .grid-item:nth-child(10n+5) { background: #B18FCF; }
  .grid-item:nth-child(10n+6) { background: #D7F171; }
  .grid-item:nth-child(10n+7) { background: #2176AE; }
  .grid-item:nth-child(10n+8) { background: #AFBC88; }
  .grid-item:nth-child(10n+9) { background: #F9ADA0; } */