@font-face {
  font-family: ruines;
  src: url(SimulacreRuines.otf);
}

@font-face {
  font-family: telas;
  src: url(Telas-Medium.woff2);
}

a{
  color: unset;
  transition: .2s;
  text-decoration: none;
}

::selection{
  background-color: rgb(46, 46, 46);
  color: white;
}
html{
  font-size: 18px;

}

body{
  margin: 0 ;
  font-family: telas;
  background-color: rgb(220, 220, 220);
  color: rgb(54, 54, 54);
}


.ruines{
  font-family: ruines;
}

#about{
  cursor: pointer;
  user-select: none;
}

#about:hover{
  text-decoration: 1px underline solid;
}

header{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-bottom: 2.5vw;
}

#title{
   padding-top: 2px;
  font-family: ruines;
  font-size: 20px;
}

#main{
  display: block;
  z-index: 2;
  position: fixed;
  font-size: 1rem;
  box-sizing: border-box;
  transition: .2s;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
 
}

#description {
  display: grid;
  grid-template-rows: 0fr;
  min-height: 0;
  overflow: hidden;
  transition: grid-template-rows 0.2s;
}

.clab::before{
  content: "× ";
  display: contents;
}

#description.desco {
  grid-template-rows: 1fr;
}

#wrapdesc{
    min-height: 0;
  overflow: hidden;
}



#description a:hover{
  background-color: black;
  color: white;
}

#fullContent{
  display: block;
  z-index: 10;
  position: fixed;
  top: 4.5vw;
  left: 4.5vw;
}

.cl,
.op {
  box-sizing: border-box;
}

.cl{
  width: 101vw;
  height: 101vh;
}

.op{

  border-radius:  0 ;
  clip-path: polygon(
      20px 0,                 /* haut gauche */
      calc(100% - 20px) 0,   /* haut droit */

      100% 20px,              /* droit haut */
      100% calc(100% - 20px), /* droit bas */

      calc(100% - 20px) 100%, /* bas droit */
      20px 100%,              /* bas gauche */

      0 calc(100% - 20px),    /* gauche bas */
      0 20px                   /* gauche haut */
  );
  width: 95vw;
  height: calc(100vh - 5vw);
}

.obj{
  display: grid;
  width: 91vw;
  transition: .2s;
  grid-template-columns: repeat(4, 1fr);
}

.obj:hover{
  background-color: black;
  color: white;
}

.objT{
  font-family: ruines;
  margin-top: 2px;
  line-height: 1;
  font-size: 20px;
}

#bImg{
  display: block;
  position: fixed;
      overflow: hidden;
 top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110vw;
  height: 110vh;
}

#bImg img{
 object-fit: cover;
    width: 100%;
    height: 100%;
    filter: invert(1);
}


.ico{
  height: 20px;
  display: block;
}
.ico img{
  border: 1px solid;
  height: 100%;
  width: auto;
  display:block ;
}

.icoh{
  height: 22px;
  display: block;
}
.icoh img{
  border: 1px solid;
  height: 100%;
  filter: invert(1);
  width: auto;
  display:block ;
}

#objets{
  padding-top: 2.5vw;

}

#bgt{
  display: block;
  position: fixed;
  pointer-events: none;
   top:66%;
   line-height: 1;
   z-index: 9;
   opacity: .5;
   font-family: ruines;
   font-size: 150vh;
   color: white;
   text-shadow:   -1px -1px 0 #9b9b9b,
    1px -1px 0 #9b9b9b,
    -1px 1px 0 #9b9b9b,
    1px 1px 0 #9b9b9b;
  left: 50%;
  transform: translate(-50%, -50%);
}


@media (orientation: portrait){
header{
  grid-template-columns: repeat(7, 1fr);
  padding-bottom: 2.5vw;
  row-gap: 10px;
}

#title{
  grid-column: span 6;
}

#about{
  grid-column: 2 / 7;
  grid-row: 2;
}

#wrapdesc{
   width: 91vw;
}


.obj{
  grid-template-columns: repeat(7, 1fr);
}


.objT{
  grid-column: span 4;
}

.objN{
  grid-column: span 2;
}

#objets{
  margin-top: 10vw;
}

}