@font-face {
    font-family: 'OCL2';
    src: url('/fonts/OCL-2.woff2') format('woff2'),
    url('/fonts/OCL-2.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/fonts/IBMPlexSans-SemiBold.woff2') format('woff2'),
    url('/fonts/IBMPlexSans-SemiBold.woff') format('woff'),
    url('/fonts/IBMPlexSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/fonts/IBMPlexSans-Regular.woff2') format('woff2'),
    url('/fonts/IBMPlexSans-Regular.woff') format('woff'),
    url('/fonts/IBMPlexSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/fonts/IBMPlexSans-Italic.woff2') format('woff2'),
        url('/fonts/IBMPlexSans-Italic.woff') format('woff'),
        url('/fonts/IBMPlexSans-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}


@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  src: url('/fonts/ibm-plex-sans-v14-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/ibm-plex-sans-v14-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/ibm-plex-sans-v14-latin-300.woff') format('woff'), /* Modern Browsers */
       url('/fonts/ibm-plex-sans-v14-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/ibm-plex-sans-v14-latin-300.svg#IBMPlexSans') format('svg'); /* Legacy iOS */
}



@font-face {
    font-family: 'JetBrainsMono';
    src: url('/fonts/JetBrainsMono-Regular.woff2') format('woff2'),
        url('/fonts/JetBrainsMono-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family:"1543HumaneJenson";
    src:url("./fonts/1543Humane_Jenson.woff2") format("woff2"),url("./fonts/1543Humane_Jenson.woff") format("woff"),url("./fonts/1543Humane_Jenson.otf") format("opentype");
    font-style:normal;font-weight:400;
}


*
{
 margin: 0;
 padding: 0;

}


html
{


    background: #222222;
}

.webgl
{
    position: fixed;
    top: 0;
    left: 0;
}


.section
{
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    height: 100vh;
    position: relative;
    flex-direction: column;
    padding-left: 10%;
    padding-right: 10%;
    will-change: transform;

    mix-blend-mode: difference;

}

.section.ui{

      justify-content: space-evenly;
  
}


.section img{


    width: 50vw;


}

.fr{

    display: block;
}

.eng{

    display: none;
}

#textbox{
font-family: "1543HumaneJenson";
font-size: 2.5em;
    display: flex;
align-items: center;
justify-content: center;
    flex-direction: column;
    width: 90%;
    height: 70%;
    background-color: black;
    color: white;


}

#paragraphe{
display: flex;
flex-direction: column;
justify-content: center;
    max-width: 80%;
    height: 80%;
background-color: black;
overflow-y: auto;


}



#console{
font-family: 'JetBrainsMono';
font-size: 0.6em;
    display: none;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: flex-start;
    width: 90%;
    height: 70%;
        background-color: black;
    color: white;
}

#consolescreen{
overflow-y: auto;

    text-align:left;
width: 60%;
height: 80%;
}



#buttonbar{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: 20%

}



/* Button Styles */

.button {
  display: inline-flex;

  border: 2px solid white;

  color: white;
  font-family: 'IBM Plex Sans';

  text-decoration: none;
  font-size: 1.5vw;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#click {

  color: white;
  text-decoration: none;
}

#progress {
  color: white;

  text-decoration: none;
}


#button-1 {

 width: 5%;
 height:5%;
 position: fixed;
 overflow: hidden;
 cursor: pointer;
 top: 5%;
 right: 5%;
}


#button-5 {

 width: 5%;
 height:5%;
 position: fixed;
 overflow: hidden;
 cursor: pointer;
 top: 5%;
 left: 5%;
}


#button-2 {
 width: 30%;
 height:10%;
 position: relative;
 overflow: hidden;
 cursor: pointer;

}

#button-4 {
 width: 30%;
 height:10%;
 position: relative;
 overflow: hidden;
 cursor: none;
display: none;
}



#button-3 {
 width: 5%;
 height:5%;
 position: fixed;
 overflow: hidden;
 cursor: pointer;
  top: 5%;
 right: 5%;
}

#button-2 #click {
  position: relative;
  transition: all .35s ease-Out;
}

#button-1 #click {
  position: relative;
  transition: all .35s ease-Out;
}

#button-3 #click {
  position: relative;
  transition: all .35s ease-Out;
}

#button-5 #click {
  position: relative;
  transition: all .35s ease-Out;
}

#slide {
  width: 100%;
  height: 100%;
  top: -100%;
  left: 0;


  background: white;
  position: absolute;
  transition: all .35s ease-Out;
}

#button-2:hover #slide {
  top: 0;
}

#button-2:hover #click {
  color: black;
}


#button-5:hover #slide {
  top: 0;
}

#button-5:hover #click {
  color: black;
}

#button-1:hover #slide {
  top: 0;
}

#button-1:hover #click {
  color: black;
}

#button-3:hover #slide {
  top: 0;
}

#button-3:hover #click {
  color: black;
}


#title{
    font-family: 'OCL2';
    color: rgba(255,255,255,200);
    text-transform: uppercase;
    font-size: 8vw;
}

#btn1{


    display: flex;
    width: 100%;
    height: 90vh;
    font-family: Rankensteen;
    color: black;
    font-size: 2em;
    background-color: rgba(255,255,255,127);
    border-radius: 5px;
    justify-content: center;
    align-content: center;
}

section:nth-child(odd)
{
    justify-content: flex-end;
}





.about{

    position: fixed;
      /* width: 80vw;*/
      width: 0;

    height: 80vh;
    background-color: black;

    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.txtabout{

    display: flex;
    flex-direction: column;
align-content: space-between;
    justify-content: flex-start;
    width: 80%;
    height: 80%;
        overflow-y: auto;

    font-family: 'IBM Plex Sans';
    font-size: 1.2em;
    color: white;

}

.txtabout p{
    width: 90%;

}

#title2{

        font-family: 'OCL2';

    text-transform: uppercase;
    font-size: 2em;
    padding-bottom: 1em;
}



/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: black;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background:white;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #888;
}


.txtabout p{



    padding-bottom: 1.2em;
}


#note{

    font-weight: 300;
    font-size: 0.8em;

}


a{

    color: white;
}




@media only screen and (max-width: 768px) {


#button-1 {

 width: 5vw;
 height:5vw;
 position: fixed;
 overflow: hidden;
 cursor: pointer;
 top: 5%;
 right: 5%;
}


#button-5 {

 width: 5vw;
 height:5vw;
 position: fixed;
 overflow: hidden;
 cursor: pointer;
 top: 5%;
 left: 5%;
}


#button-2 {
 width: 50%;
 height:10%;
 position: relative;
 overflow: hidden;
 cursor: pointer;
}


#button-3 {
 width: 5vw;
 height:5vw;
 position: fixed;
 overflow: hidden;
 cursor: pointer;
  top: 5%;
 right: 5%;
}


.button {
  display: inline-flex;

  border: 2px solid white;

  color: white;
  font-family: 'IBM Plex Sans';

text-align: center;
  text-decoration: none;
  font-size: 1em;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#textbox{
font-family: "1543HumaneJenson";
font-size: 1.5em;
    display: flex;
align-items: center;
justify-content: center;
    flex-direction: column;
    width: 90%;
    height: 70%;
    background-color: black;
    color: white;


}


}