@font-face {
  font-family: 'CommitMono';
  src: url('commitmono/CommitMono-Italic.woff2') format('woff2'),
      url('commitmono/CommitMono-Italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'CommitMono';
  src: url('commitmono/CommitMono-Bold.woff2') format('woff2'),
      url('commitmono/CommitMono-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CommitMono';
  src: url('commitmono/CommitMono-BoldItalic.woff2') format('woff2'),
      url('commitmono/CommitMono-BoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'CommitMono';
  src: url('commitmono/CommitMono-Regular.woff2') format('woff2'),
      url('commitmono/CommitMono-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* reset */
*, *::before, *::after { box-sizing: border-box; } body { line-height: 1.45; -webkit-font-smoothing: antialiased; } img, picture, video, canvas, svg { display: block; height: auto; max-width: 100%; } input, button, textarea, select { font: inherit; margin: 0; } iframe { border: 0; }

/* variables */
:root {
  --spacing: 2rem;
  --basesize: 1em;
}
body {
  font-family: "CommitMono", monospace;
  line-height: 1.6;
  color: #3f3e3e;
  background-color: #f5f5f5;
  padding: var(--spacing);
  margin: 0;
  font-size: var(--basesize);
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

h1  {
  font-size: 1em;
  margin-bottom: 0;
}
/* Navigation and lists */
.archives-nav {
  margin: 0 0 2rem ;
}

.parentFolder {
  margin: 0 0 var(--spacing);
}

.archives-nav a {
  color: currentColor;
  text-decoration: none;
  transition: color 0.2s ease;
}

.archives-nav a:hover {
  color: #000;
}

/* File list styling */
.displayFolders {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 0 var(--spacing);
  grid-template-columns: 1fr min-content min-content min-content;
}
.file-info {
  margin: 0 calc(-1 * var(--spacing));
  border-top: 1px solid #dadada;
  grid-column: span 4;
  display: grid;
  grid-template-columns: subgrid;
  padding: .25em var(--spacing);
  align-items: center;
  transition: background-color 0.2s ease;
}
.file-info:last-child{
  border-bottom: 1px solid #dadada;
}
.file-info span {
  white-space: nowrap;
  opacity: .6;
}

.file-info:hover {
  background-color: #f0f0f0;
}

.file-info .glyphs {
  color: #ff6b6b;
}

.file-info a {
  transition: color 0.2s ease;
}

.file-info a:hover {
  color: #3498db;
}


/* Headers */
h2 {
  margin: calc(2 * var(--spacing)) 0 var(--spacing) ;
}

/* Sélectioon */
.markdown a {
  color: currentColor;
  text-decoration: underline;
}
.markdown p,
.markdown blockquote,
.markdown ul,
.markdown ol {
  max-width: 46em;
}
.markdown ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  list-style-type: none;
  margin-inline: 0;
  padding-inline: 0; 
  max-width: none;
  gap: var(--spacing) 1em;
}
.selection {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing);
}
.selection figure {
  margin: 0;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.selection figure img {
  width: 100%;
  height: calc(100% - 1.6em);
  object-fit: cover;
}
/* Markdown content */

hr {
  margin: 2rem 0;
  border: none;
  border-top: 1px solid #dadada;
}

/* ...existing code... */

/* Responsive Design */
@media (max-width: 768px) {
  :root {
    --spacing: 1rem;
  }
  .displayFolders {
    grid-template-columns: 1fr;
  }
  .file-info {
    grid-column: 1;
    grid-template-columns: 1fr min-content;
    gap: 0 var(--spacing);
  }
  .file-info a { grid-column: span 3;}

}

@media (max-width: 480px) {
  
}