@import url("../variables.css");

:root{
  --size-mouseOffset: 18px; /* This is how much the mouse gif has extra on the right */
  --color-navbar: transparent;

  --index-navbar: calc(var(--index-main) + 3);
  --index-intro: calc(var(--index-main) + 2);
}

#section-intro {
  z-index: var(--index-intro);
  width: 100%;
  height: 100%;
}

#section-intro #canvas-intro{
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: calc((var(--index-intro) - 1));
}

#section-intro p{
  max-width: 500px;
}

#section-intro #container-slides{
  z-index: inherit;
  display: flex;
  flex-direction: column;
  text-align: center;
}

#section-intro .slide {
  z-index: inherit;
  width: 100dvw;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
}

#section-intro #container-scroll{
  z-index: inherit;
  position: fixed;
  max-width: 200px;
  bottom: 10%;
  left: calc(50% - var(--size-mouseOffset));
}

#section-intro #container-scroll img {
  height: 50px;
  width: 50px;
  margin-left: var(--size-mouseOffset);
}

#section-intro #container-scroll .progress-bar{
  height: 3px;
  width: 0;
  max-width: calc(2 * var(--size-mouseOffset) + 32px);
  background-color: white; 
}