html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;

}

:root {
  --mainsize: clamp(150px, 37vmin, 600px);
  --buttonsize: clamp(64px, 12vmin, 200px);
  --textsize: clamp(64px, 12vmin, 200px);
  --vgap: 32px;
  --hgap: 0px;
  --gap: 0px;
  --centered:translateX(-50%) translateY(-50%);
}


a{
  cursor: none;
}

#canvas {position: absolute; inset: 0; display: block; width : 100vw; height: 100vh; z-index: -1;}

#bg {position: absolute; inset: 0; display: block; width : 100vw; height: 100vh; z-index: -10; background-color: rgb(22, 22, 22);}

#heartbeat {position: fixed; inset: 0; display: block;   
  width: var(--mainsize);
  height: var(--mainsize);
  z-index: 2; 
  left: 50%; top: 50%; 
  transform: var(--centered)
}

/* #about{
  position: fixed;
  display:block;
  left: 50%;
  bottom: calc(50% + var(--mainsize) / 2 + var(--vgap));
  transform: translateX(-50%);
  z-index: 3;
} */

#options {
  position: fixed;
  left: 50%;
  bottom: calc(50% + var(--mainsize) / 2 + var(--vgap));
  transform: translateX(-50%);
  z-index: 3;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;      
  gap: var(--gap);
  max-width: 100vw;
}

#about a, #spectralmap a, #examples a, #portfolio a {
  display: flex;
  flex-direction: column;
  align-items: center; 

  transition: transform 0.125s ease-out;
}

#about a:hover, #spectralmap a:hover, #examples a:hover, #portfolio a:hover{
  transform: scale(1.125);
}


#spectralmap, #examples{
  margin-left: calc(var(--buttonsize) * 0.5);
  margin-right: calc(var(--buttonsize) * 0.5);
}


#spectralmap a{
  gap: 4px;
}



#aboutcanvas{
  width: calc(var(--buttonsize) * 2);
  height: var(--buttonsize);
}

#abouttitle, #spectralmaptitle, #examplestitle, #portfoliotitle{
  display: block;
  width: var(--textsize);
  height: calc(var(--textsize) * 0.5);
}

#spectralmapcanvas{
  width: var(--buttonsize);
  height: var(--buttonsize);
}

#portfoliocanvas{
  width: calc(var(--buttonsize) * 2);
  height: var(--buttonsize);
}

#examplescanvas{
  width: var(--buttonsize);
  height: var(--buttonsize);
}

/* #portfolio{
  display:block;
  position: fixed;
  top: 50%;
  left: calc(50% + var(--mainsize) / 2 + var(--hgap));
  transform: translateY(-50%);
  z-index: 3;
}

#spectralmap{
  display:block;
  position: fixed;
  left: 50%;
  top: calc(50% + var(--mainsize) / 2 + var(--vgap));
  transform: translateX(-50%);
  z-index: 3;
}

#examples{
  display:block;
  position: fixed;
  top: 50%;
  right: calc(50% + var(--mainsize) / 2 + var(--hgap));
  transform: translateY(-50%);
  z-index: 3; 
}*/