@font-face {
  font-family: ReadMe;
  src: url(font/BBBReadMe-Regular.woff2) format("woff2");
  font-style: normal;
}

@font-face {
  font-family: ReadMe;
  src: url(font/BBBReadMe-Italic.woff2) format("woff2");
  font-style: italic;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root{
  --main-color: #311d1d;
  --second-color: #a08383;
  --third-color:  #ebf8e1;

}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: radial-gradient(farthest-corner,#ffff, var(--third-color));

  font-family: ReadMe;
}

#viewport {
  width: 100vw;
  height: 100vh;

  position: relative;
  overflow: hidden;

  cursor: grab;
  touch-action: pinch-zoom;
}

#viewport.grabbing {
  cursor: grabbing;
}

#canvas {
  position: absolute;
  top: 0;
  left: 0;

  transform-origin: top left;
  will-change: transform;
  padding: 30px;
  display: grid;

  grid-template-columns: 30px auto 30px;
  grid-template-rows: 30px auto 30px;

  gap: 10px;

  user-select: none;
  will-change: transform;
  backface-visibility: hidden;
}

/*noms axes*/
#part1 {
  grid-column: 2/3;
  grid-row: 1/2;
  justify-self: center;
}
#part2 {
  grid-column: 3/4;
  grid-row: 2/3;
  align-self: center;

  transform: rotate(90deg);
}
#part3 {
  grid-column: 2/3;
  grid-row: 3/4;
  justify-self: center;
}
#part4 {
  grid-column: 1/2;
  grid-row: 2/3;
  align-self: center;

  transform: rotate(-90deg);
}

#part2,
#part4 {
  white-space: nowrap;
}

/*grid*/
#grid {
  grid-column: 2/3;
  grid-row: 2/3;

  display: grid;

  grid-template-columns: repeat(20, 150px);
  grid-template-rows: repeat(100, 20px);

  gap: 1px;

  /*background: radial-gradient(farthest-corner, blueviolet, #ebf8e1, #ffff);*/
}

.cell {
  outline: 1px solid var(--second-color);
  font-size: 12px;
  transition: 0.2s;
}


.cell:has(a:hover) { filter: brightness(1.3); }

/* liens */
.cell a {
  display: block;
  width: 100%;
  height: 100%;
  padding-left: 5px;
  text-decoration: none;
  color: var(--third-color);

  position: relative;

  transition: box-shadow 0.2s ease;
}

.cell a:hover {
  z-index: 2;
}


/* catégories */
.video { background: #583e3e; }
.audio { background: #594848; }
.sites  { background: #897575; }
.img   { background: #938080; }
.pdf   { background: #b5a8a8; }

/*infos*/
.label {
  font-style: italic;
  text-align: center;
}

/*zoom*/
#zoom-wrapper {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  display: flex;
  gap: 10px;
}

#zoom-wrapper button {
  all: unset;
  cursor: pointer;
  font-size: 24px;
  user-select: none;
  transition: 0.2s;
  font-size: 1.5vw;
}

#zoom-wrapper button:hover {
  opacity: 0.5;
}

/*img preview*/
#preview { 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 220px; 
  display: none; 
  pointer-events: 
  none; z-index: 1000; 
  border-radius: 6px; 
  border: 1px solid var(--second-color); 
  box-shadow: 0 10px 30px var(--main-color); 
  opacity: 0; transform: scale(0.95); 
  transition: opacity 0.2s ease, transform 0.2s ease; 
} 
  
  #preview.show { 
    display: block; 
    opacity: 1; 
    transform: scale(1); }