/* --------------- CSS RESET ----------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  height: auto;
  max-width: 100%;
}

html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6 {
  margin: 0;
  padding: 0;
}

h1,h2,h3,h4,h5,h6 {
  font-size: 100%;
  font-weight: normal;
}

input,button,textarea,select {
  font: inherit;
  margin: 0;
}

iframe {
  border: 0;
}

::-moz-selection {
  /* Code for Firefox */
  color: var(--secondarycolor);
  background: var(--maincolor);
}

::selection {
  color: var(--secondarycolor);
  background: var(--maincolor);
}

html {
  width: 100%; height: 100%;
  scroll-behavior: smooth;
    box-sizing: border-box;
  --spacing:2rem;
  --spacingsmall:1rem;
  --maincolor:rgb(199, 199, 199);
  --secondarycolor:rgb(30, 30, 30) ;
  --thirdcolor: rgb(192, 57, 255) ;
  /* --maincolordark: hsl(from var(--maincolor) h s calc(l - 10)); */
}

/* -------------------------------------------------------------------- */

.mobile{
  display: none;
}

body{
    color: var(--maincolor);
    background-color: var(--secondarycolor);
    font-family: 'Wondertype';
    font-size: 17px;
}


p{
    max-width: 80ch;
    margin-bottom: var(--spacing);
    line-height: 1.5;
}

a{
  color: var(--thirdcolor);
}

h1,h2,h3{
    margin-bottom: var(--spacing);
    font-size: 40px;
    max-width: 50ch;
  }

h3{
  font-size: 25px;

}

section{
margin-top: var(--spacing);
margin-bottom: var(--spacing);
}

.hidden{
  display: none;
}

/* ----------------- NAV ----------------------- */

a:hover{
  color: var(--thirdcolor);
  transition: 0.2s;
}

#nav{
  position: sticky;
  top: var(--spacing);
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
}

#nav > ul{
  height: inherit;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--spacing);
    overflow-y: scroll;
}

.navlink{
  color: var(--maincolor);
  
}

#lightswitch{
  cursor:pointer;
  z-index: 2500;
  position: fixed;
  bottom: 0;
  left: 0;
  margin-left: var(--spacing);
}

/* ----------------- FLASHLIGHT EFFECT ----------------------- */

#flashlight {
  --Xpos: 50vw;
  --Ypos: 50vh;
}

#flashlight:before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode:plus-lighter;
  background: radial-gradient(
    circle 20em at var(--Xpos) var(--Ypos),
    rgba(255, 255, 255, 0.3) 0%,
    rgba(0, 0, 0, 0) 100%
  );
}

#darkness{
  position: fixed;
  top:0;
  width: 100vw;
  height: 100vh;
  z-index: 998;
  pointer-events: none;
  background: RGBA(255, 255, 255, 0);
  background: radial-gradient(circle,rgba(255, 255, 255, 0) 43%, rgba(0, 0, 0, 1) 100%);
}

/* ----------------- GRIDS ----------------------- */

header{
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  width: 100vw;
  justify-content: space-around;
}



#page{
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: var(--spacing);
  align-items: start;
  margin: var(--spacing);
}

.question{
  margin-bottom: calc(var(--spacing)*3);
}

/* -------------------- ASCII ----------------------- */

.ascii{
  font-family:Arial, Helvetica, sans-serif;
  /* font-size: larger; */
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: none;
  line-height: 1.12;
}

#downarrow{
  position: absolute;
  bottom: var(--spacing);
  right: var(--spacing);
  z-index: 1000;
  text-decoration: none;
  color: var(--maincolor);
}

.mirror{
transform:scaleX(-100%);
}

#hometitle{
  font-size: 1vw;
}

.separator{
  margin-top: calc(var(--spacing) * 4);
}

/* -------------------- FOREGROUND PARALLAX ----------------------- */

.foreground{
  position: fixed;
  z-index: 997;
  opacity: 50%;
  pointer-events: none;
}

.rightside{
  right: 0;
}

/* la variable --y est transmise au body par le js */
.speed-1 {transform: translateY(calc(var(--y) * -0.1));}
.speed-2 {transform: translateY(calc(var(--y) * -0.4));}
.speed-3 {transform: translateY(calc(var(--y) * -0.6));}
.speed-4 {transform: translateY(calc(var(--y) * -0.9));}


@font-face {
    font-family: 'Wondertype';
    src: url(../fonts/WonderType-Regular.otf);
}

@font-face {
    font-family: 'Courier';
    src: url(../fonts/CourierPrime-Regular.woff2);
}
@font-face {
    font-family: 'Commit';
    src: url(../fonts/CourierPrime-Medium.woff2);
}
@font-face {
    font-family: 'Necto';
    src: url(../fonts/NectoMono-Regular.woff2);
}
@font-face {
    font-family: 'Liberation';
    src: url(../fonts/LiberationMono-Regular.ttf);
}

@font-face {
    font-family: 'Consolas';
    src: url(../fonts/consola.ttf);
}
@font-face {
    font-family: 'Consolas';
    src: url(../fonts/consolab.ttf);
    font-weight: bold;
}

/* -------------------- MEDIA QUERIES ----------------------- */

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

  p{
    font-size:90%;
  }

  .mobile{
    display: block;
  }
  
  .laptop{
    display: none;
  }

  #page{
  display: grid;
  grid-template-columns: 1fr;
}

  header{
  height: 100%;
  margin-top: calc(var(--spacing) * 4) ;
  margin-bottom: var(--spacing);
}

  #credits{
    margin-bottom: calc(var(--spacing)*4);
  }

  #downarrow{
    display: none;
  }

  #toggle-nav{
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1011;
    margin: var(--spacingsmall);
  }

  #nav{
    background-color: var(--secondarycolor);
    position: fixed;
    top: 0;
    width: 100%;
    height: 80vh;
    border-bottom: solid var(--thirdcolor) 2px;
    margin-left: -2rem;
    padding-top: 2rem;
    padding-left: 2rem;
    z-index: 1000;
    transform: translateY(calc(-100%));
}

  #nav.active {
    transform: translateY(0);
    transition: 0.2s;
    }

  #nav > ul {
    height: auto;
  }

  .foreground{
    opacity: 50%;
    max-width: 200px;
  }

  #lightswitch{
    top: 0;
    margin-top: var(--spacingsmall);
    margin-left: var(--spacingsmall);
    z-index: 999;
  }

  .foreground{
    opacity: 20%;
  }

}