html { 
  background-color: rgb(20, 23, 26);
}
html,body {
  margin: 0;
  padding: 0;
  font-family: "Share Tech Mono", monospace;
  font-size: calc(2vh + 3vw);
  color:white;
  /* background-color: rgb(173, 41, 41); */
  z-index: -2;
  scroll-behavior: smooth; 
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: -1;

}

p{ 

  font-size: 50%;
}

h1{ 
  margin: 0.1rem;
  padding: 0;
  /* background-color: green; */
  font-size:150%;
}

h2{
  /* width:100%; */
  height: 100%;



 font-size: 0.5rem;
 color: rgba(255, 255, 255, 0.607);
 text-align: center;
display: grid; 
align-items: center;


z-index:1;

}



.content { 

  height: 100vh;
  scroll-snap-type: y mandatory;
  overflow-y:scroll;
}





/* =============NAV & FOOTER ============== */
  
.nav{
  display:flex;
  text-align: center;
  /* padding: 14px 16px; */
  text-decoration: none;
  overflow:hidden;
  width: 100%;
  justify-content: center;
  z-index: 3;
  position: fixed;
  left:0;
  top:0;
  border-bottom: solid white 0.001rem;

}

.nav, #footer{ 
font-size: 0.45rem;
color: white;
background-color: rgb(0, 0, 0);
}


/* Links inside the navbar */
.nav a {
float: right;
text-align: center;
text-decoration: none;
color:inherit;
/* margin:0.25rem; */
padding:0.25rem;
border:solid; 
border-width: 0.0025rem;
border-color:white;

}

.nav a:hover, .dropdown:hover .dropbtn {
background-color: white;
color:black;
}

#home { 
position:absolute;
left:0;

color: white;
border:none;
}

#home:hover { 
background-color: inherit;
color: white; 
/* border-color: white; */
}

#footer { 
  /* margin-top: 4rem; */
  text-align: center;
  background: black;  
  /* padding: 0.25rem; */
  flex-direction: row;
}
#footer p { 
  font-size: inherit;
  margin: 0;

}
#footer .links { 
  width: 100%;
  margin: auto;
} 
#footer img {
  vertical-align: middle;

  width: 0.5rem;
  height: auto;
  margin: 0.25rem;

}
/* =================================== */






#footer {
  scroll-snap-align:end;
}


.landing { 
  height: 100%;
  scroll-snap-align:start;


}

.Banner{ 
      display: flex;
      flex-direction: row; 
      padding: 0.5rem;
      /* position: sticky; 
      top:50%; 
      transform: translateY(-50%);  */
      scroll-snap-align:center;

      z-index: 1;
      box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
      margin: 0.25rem;
      margin-top: 200vh;
      margin-bottom: 200vh;
    


      
}



#spira { 
  background-image: linear-gradient(#9E5D23,#77803f);

}
#resoTape { 
  background-image: linear-gradient(RGB(131,149,49),rgb(52, 8,179));

}
#gransMirror{ 
  background-image: linear-gradient(rgb(52, 8,179), rgb(61,14,116));

}

.Banner .info{ 
  text-align: center;
  width: 100%;
  height: 100%;

  flex-direction: column;
  margin: auto;

  z-index: 1;
  

}
.info h1 { 
  font-size: 200%;
}
.info p { 
  font-size: 50%;
}
.info a{ 

  display: inline-block;
  border-radius: 0.25rem;
  padding:0.5rem;
  background-color: black;
  text-decoration: none;
  color: inherit;

}

.Banner .imgContainer{ 
  width: 100%;

  z-index: 1;

}

.Banner .imgContainer img{ 
  display:  block;

  object-fit: contain;
  height:8rem;
  width:auto;
  max-width: 100%;
  margin:auto;

  /* object-fit: contain;
  padding-left: 2rem;
  padding-right: 2rem; */ 
}









@media screen and (max-width: 1000px) {
  .Banner { 
    flex-direction: column;
  }
}

/* ===================================== */