/* --------------- 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(15, 15, 15);
  --thirdcolor: rgb(170, 41, 255) ;
  /* --maincolordark: hsl(from var(--maincolor) h s calc(l - 10)); */
}

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

.mobile{
  display: none;
}

body{
    color: var(--maincolor);
    background-color: var(--secondarycolor);
    font-family: 'Inter';
    font-weight: lighter;
    font-size: 16px;
    line-height: 1.7;
}

nav, #lightswitch, #toggle-nav{
  line-height: 1.2;
}


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

a{
  color: var(--thirdcolor);
  text-decoration: none;
}

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

h1{
  margin-bottom: 0;
}

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

h3{
  font-size: 25px;

}

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

.hidden{
  display: none;
}

strong{
  font-weight: bold;
}

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

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

#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);
}

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

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

.sublist{
  display: flex;
  flex-direction: column;
  font-size: 14px;
  margin-top: var(--spacingsmall);
  margin-left: var(--spacing);
  padding-left: var(--spacingsmall);
  border-left: 1px var(--maincolor) solid;
}

/* ----------------- 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 25em at var(--Xpos) var(--Ypos),
    rgba(255, 255, 255, 0.25) 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) 23%, rgba(0, 0, 0, 1) 100%);
}

/* ----------------- INDEX ----------------------- */
#index-page, #downarrow{
  line-height: initial;
}

#index-2{
  padding: var(--spacing);
  padding-bottom: 0;
}

.text-presentation{
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
  align-items: center;
  text-align: center;
  max-width: 75ch;
  line-height: 1.2;
}

.img-presentation{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing);
  justify-items: center;
  align-items: center;
}

.gridimg{
  width: 100%;
  object-fit: contain;
}

.menu-presentation{
  margin: calc(var(--spacing)*2);
  margin-bottom: 0;
  /* padding-bottom: var(--spacing); */
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing)*6);
  align-items: center;
}

.menu-buttons{
  display: flex;
  flex-direction: row;
  gap: var(--spacing);
  justify-content: center;
}
.menu-link{
  color: var(--maincolor);
}
.menu-link:hover{
  text-decoration: none;
  color: var(--thirdcolor);
}

.catchphrase, .subphrase{
  margin-bottom: 0;
  font-family: 'Wondertype';
  font-size: 40px;
  color: var(--thirdcolor);
}

.subphrase{
  color: var(--maincolor);
  font-size: 25px;
}

.feature{
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: calc(var(--spacing)*2);
}
#feature-1{
  grid-template-columns: 2fr 1fr;
}

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

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

.preascii{
  margin: 0;
}

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

.mobile-layout{
  max-width: 30%;
}

.templates{
  display: flex;
  flex-direction: row;
  gap: var(--spacing);
  max-width: 80ch;
}

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

.doc-img{
  margin-top: var(--spacing);
  margin-bottom: var(--spacing);
}

.sidenote{
  font-size: 17px ;
  font-family: 'Necto';
  margin-bottom: var(--spacingsmall);
}

.step{
  margin-bottom: calc(var(--spacing) * 3);
  max-width: 80ch;
}

.template-showcase{
  margin-bottom: calc(var(--spacing) *2);
}

.subnote{
  color: rgb(131, 131, 131);
}

.attention{
  color: var(--thirdcolor);
}

/* ----------------- FONTS ----------------------- */

#wondertype{
  font-family: 'Wondertype';
}

#gnf{
  font-family: 'GNF';
}

#inter{
  font-family: 'Inter';
  font-weight: 800;
}

#mba-mono-slice{
  font-family: 'MBA';
}

#la-machine-company{
  font-family: 'LaMachine';
}

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

@font-face {
    font-family: 'GNF';
    src: url(../fonts/gnf.ttf);
}

@font-face {
    font-family: 'Inter';
    src: url(../fonts/inter_semibold.ttf);
    font-weight:800;
}

@font-face {
    font-family: 'MBA';
    src: url(../fonts/mba_slice_mono.otf);
}

@font-face {
    font-family: 'LaMachine';
    src: url(../fonts/la_machine_company.ttf);
}

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

.ascii{
  font-family: 'Courier New', monospace;
  color: var(--maincolor);
  /* 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);
}

#returnarrow{
  font-family: 'Wondertype';
  transform: rotate(90deg);
}

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

#hometitle{
  font-size: 1vw;
  letter-spacing: -0.01em;
}

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

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

.foreground{
  position: fixed;
  z-index: -1;
  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: 'Necto';
    src: url(../fonts/NectoMono-Regular.woff2);
}

@font-face {
    font-family: 'Inter';
    src: url(../fonts/Inter_18pt-ExtraBold.ttf);
    font-weight: bold;
}
@font-face {
    font-family: 'Inter';
    src: url(../fonts/Inter_18pt-Regular.ttf);
    font-weight:lighter;
}

@font-face {
    font-family: 'Azimut';
    src: url(../fonts/Azimut-Italic.otf);
    font-weight:lighter;
}


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

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

  p{
    font-size:90%;
  }

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

  #main{
    margin-top: var(--spacing);
  }

  #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;
    bottom: auto;
    margin-top: var(--spacingsmall);
    z-index: 999;
  }

  #lightswitch-index{
    bottom: 0;
    left:0;
    right: 0;
    top: auto;
    margin-inline: auto; 
    width: fit-content;
    z-index: 999;
  }
  .foreground{
    opacity: 20%;
  }

  .templates{
  gap: var(--spacingsmall);
}

.menu-presentation{
  margin: 0;
  gap: calc(var(--spacing)*5);
  padding-bottom: calc(var(--spacing)*2);
}
.menu-buttons{
  flex-direction: column;
}
.img-presentation{
  display: flex;
  flex-direction: column;
}
.feature{
  display: flex;
  flex-direction: column;
}
}