:root {
  --charcoal: #282828;
  --cement: #ececec;
}

@font-face {
  font-family: 'Letter Gothic - Bold';
  src: url('fonts/LetterGothicStd-Bold.woff2') format('woff2');
  font-display: optional; /* If font not loaded, display nothing */
}

/* Visible only to Search Results */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

html{
  background-color: var(--cement);
  color: var(--charcoal);
  font-family: "Letter Gothic - Bold";
}

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

body {
  animation: fadeInAnimation ease 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

a{
  color: var(--charcoal);
}

a:hover{
  opacity: 0.35;
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

#loading-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--cement);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
  transition: opacity 1s ease;
}

#image-placeholder {
  display: inline-block;
  width: 100%;
  height: auto;
  margin: 0px 0px 50px 0px;
}

#navigation-image {
  max-width: 500px;
  width: 100%;
  height: auto;
  mix-blend-mode: darken;
  margin: 0px 0px 50px 0px;
}

#loading-bar {
  width: 100%;
  height: 2.5px;
  border: 1.75px solid var(--charcoal);
  margin-bottom: 50px;
  border-radius: 0px;
  overflow: hidden;
}

#loading-progress {
  height: 100%;
  background-color: var(--charcoal);
  width: 0;
  border-radius: 0px;
}

#start-button {
  padding: 15px 20px;
  background-color: var(--cement);
  color: var(--charcoal);
  border: 2px solid var(--charcoal);
  cursor: pointer;
  font-family: 'Letter Gothic - Bold', Roboto, sans-serif;
  font-size: 21px;
  letter-spacing: 5px;
  text-transform: uppercase;
  -webkit-text-stroke-width: 0.25px;
  -webkit-text-stroke-color: var(--charcoal);
  border-radius: 0px;
  opacity: 1;
  transition: opacity 1s ease;
}

#start-button:disabled {
  background: none;
  border: 2px solid var(--cement);
}

@keyframes loading-animation {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}

#start-button.loading-animation {
  animation: loading-animation 1s ease-in-out infinite alternate;
  transition: opacity 1s ease;
}

#start-button:hover:not(:disabled) {
  opacity: 0.25;
}

#start-button.fade-out {
  opacity: 0;
}

#start-button.fade-in {
  opacity: 1;
}

.a-enter-vr-button {
  display: none !important;
}

.vr-button-visible .a-enter-vr-button {
  display: block !important;
}

/*** 2D Centering ***/

.centered-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
}

.centered-content {
  max-width: 500px;
}