/* style.css */
body {
  background-color: #040627; /* Deep, moody blue */
  margin: 0;
  overflow: hidden; /* Prevents scrollbars */
}

#gatekeeper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000000; /* Match your site background */
  z-index: 10000; /* Sit on top of absolutely everything */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s ease;
}

.gatekeeper-ui {
  width: 250px;
  font-family: monospace;
  font-size: 16px;
  color: #ffffff;
}

.gatekeeper-track {
  width: 100%;
  height: 2px;
  background-color: #eee;
  margin-top: 8px;
}

#gatekeeper-bar {
  width: 0%;
  height: 100%;
  background-color: #ffffff;
  transition: width 0.1s linear;
}

.hero{
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 18fr 1fr;
  width: 100vw;
  height: 94vh;
}

.hero-mount {
  display: flex;
  width: 90vw;
  height: 94vh;
}

.hero-arrow {
  display: flex;
  width: 5vw;
  height: 94vh;
  cursor: pointer;
}

.nav-container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  position: sticky;
  top: 0;
  width: 100vw;
  height: 5vh;
  align-items: center;
  padding: 0.5vh 0px 0.5vh 0px;
  background-color: #010314;
}

.nav-item {
  width: 25vh;  
  height: 5vh;  
  cursor: pointer;
  z-index: 20;  
  /* border: 1px solid red; */
}

.nav-item-time {
  width: 25vh;  
  height: 5vh;  
  z-index: 20;  
  cursor: default;
  /* border: 1px solid red; */
}

.nav-left {
  display: flex;
  justify-content: left;
  align-items: center;
  padding-left: 10px;
}

.nav-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-right {
  display: flex;
  justify-content: right;
  align-items: center;
  padding-right: 10px;
}

@font-face {
    font-family: 'NVMono';
    src: url('./fonts/NVMono.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    font-family: 'NVMono', monospace;
}