@font-face {
  font-family: 'Rocher';
  src: url(https://assets.codepen.io/9632/RocherColorGX.woff2);
}

@font-face { 
  font-family: 'gipsiero-kracxed'; 
  src: url('./font/GipsieroKracxed.otf'); 
} 

h1, p {
  text-align: center;
}

#Title_div {
  display: grid;
  grid-template-areas:
    "a b b b b b c c"
    "a b b b b b c c"
    "a b b b b b d d"
    "a b b b b b d d";
}

.BEPROACT-Logo {
  width: 400px;
  grid-area: a;
}

.CRIStAL-Logo {
  width: 200px;
  grid-area: c;
}

.U-Lille-Logo {
  width: 200px;
  grid-area: d;
}

#threejs_canvas {
  border-radius: 100px;
  width: 80%;
  margin: 1% 1% 1% 5%;
}

.fit-picture {
  border-radius: 8px;
  width: 150px;
}

#Title {
  font-family: gipsiero-kracxed;
  base-palette: 9;
  font-palette: --Grays;
  font-size: 54px;
}

#place {
  margin: 0% 0% 0% 10%;
  font-size: 36px;
}

#go_to_001 {
  cursor: pointer;
}
#go_to_002 {
  cursor: pointer;
}

#data_stat_contener {
  display: flex;
  grid-template-columns: 200px 200px 200px;
  border-radius: 12px;
  border: 0.5rem outset black;
  margin: 3% 3% 5% 5%;
  text-align: center;
  font-size: 14px;
}

#author_div {
  margin-left: auto; 
  margin-right: 0;
}

#author {
  float: right;
}

input[type=checkbox] {
  display: none;
}

.container img {
  margin: 5px;
  transition: transform 0.25s ease;
  cursor: zoom-in;
}

input[type=checkbox]:checked ~ label > img {
  transform: scale(2.5);
  cursor: zoom-out;
}

tbody td {
  /* 1. Animate the background-color
     from transparent to white on hover */
  background-color: rgba(255,255,255,0);
  transition: all 0.2s linear; 
  transition-delay: 0.3s, 0s;
  /* 2. Animate the opacity on hover */
  opacity: 0.6;
}
tbody tr:hover td {
  background-color: rgba(255,255,255,1);
  transition-delay: 0s, 0s;
  opacity: 1;
  font-size: 2em;
}

td {
  /* 3. Scale the text using transform on hover */
  transform-origin: center left;
  transition-property: transform;
  transition-duration: 0.4s;
  transition-timing-function: ease-in-out;
}
tr:hover td {
  transform: scale(1.1);
}


/* Codepen styling */
* { box-sizing: border-box }

table {
  width: 90%;
  margin: 0 5%;
  text-align: left;
}
th, td {
  padding: 0.5em;
}
#author{
  visibility: hidden;
}