@font-face {
  font-family: 'Nehanda-SpiritMedium';
  src: url('../font/Nehanda-SpiritMedium.ttf') format('truetype');
}

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

body {
  margin: 0;
  padding: 0;
  font-family: 'Nehanda-SpiritMedium', sans-serif;
  letter-spacing: 0.12em;
}

a,
a:hover,
a:visited {
  color: white;
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: red;
}

::-webkit-scrollbar-thumb:hover {
  background: red;
}

#map {
  top: 0;
  height: 100vh;
  width: 100vw;
  position: fixed;
  z-index: -5;
}

#headerbox {
  margin: 5vh auto 5vh auto;
  width: 90vw;
  height: 90vh;
  padding: 1vh;
  text-align: center;
  background-color: rgba(0, 0, 0, 1);
  outline: 2px solid #CCC;
  outline-offset: 10px;
  position: relative;
  /* display: none; */
}

#header {
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

#box {
  margin: 5vh auto;
  width: 90vw;
  height: 90vh;
  padding: 2vh;
}

#footer {
  margin: 5vh auto 5vh auto;
  width: 90vw;
  height: 90vh;
  padding: 1vh;
  text-align: center;
  line-height: 25px;
  font-size: 13px;
  font-family: 'IBM Plex Mono', sans-serif;
  letter-spacing: 0px;
  background-color: black;
  color: white;
  outline: 2px solid #CCC;
  outline-offset: 10px;
  position: relative;

}

#features {
  padding-top: 20vh;
  padding-bottom: 10vh;
  z-index: 100;
}

#image {
  width: 15vw;
  /* //position: absolute; */
}

#bylineText {
  /* //padding-top: 2vh;
  //padding-bottom: 4vh; */
  color: #d4cbcb;
  font-size: 12px;
  font-weight: bold;
  margin: 5vh 12vw;
}

#bylineDescription {
  font-family: 'IBM Plex Mono', sans-serif;
  font-size: 0.8em !important;
  letter-spacing: 0;
}

#titleText {
  color: #fafafa;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 48px;
  padding-top: 1vh;
  padding-bottom: 1vh;
  margin: auto 12vw;
}

#subtitleText {
  color: #fffcfc;
  text-transform: uppercase;
  /* //font-style: italic; */
  font-weight: bold;
  font-size: 24px;
  padding-top: 1vh;
  padding-bottom: 1vh;
  margin: auto 12vw;
}

#blink {
  color: #fafafa;
  text-transform: uppercase;
  font-weight: bold;
  padding-top: 5vh;
  font-size: 24px;
  animation: blink-animation 1s steps(3, start) infinite;
  -webkit-animation: blink-animation 1s steps(3, start) infinite;
}

@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

#bylineDescription {
  color: #d4cbcb;
  font-size: 12px;
  font-style: italic;
  /* //font-weight: bold; */
  line-height: 1.3;
  margin: 2vh 12vw;
}

.centered {
  width: 50vw;
  margin: 0 auto;
}

.lefty {
  width: 33vw;
  margin-left: 5vw;
}

.righty {
  width: 33vw;
  margin-left: 62vw;
}

.fully {
  width: 100%;
  margin: auto;
}

.light {
  color: #444;
  background-color: #fafafa;
}

.dark {
  color: #fafafa;
  background-color: #444;
}

.step {
  padding-bottom: 50vh;
  /* margin-bottom: 10vh; */
  opacity: 0.25;
}

.step.active {
  opacity: 0.95;
}

.step.active a {
  color: black;
}

.step div {
  padding: 25px 50px;
  line-height: 25px;
  font-size: 13px;
  outline: 2px solid #CCC;
  outline-offset: 10px;

}

.step img {
  width: 100%;
}

h3 {
  line-height: 1.35;
}

p {
  font-size: 11px;
  line-height: 1.2;
}

h1 {}

h2 {}

h4 {}

h5 {}

h6 {}

tr {
  font-size: 10px;
  line-height: 1.15;
}

table {
  border-spacing: 12px 2px;
}

.field {
  color: red;
}

#description {
  font-family: 'IBM Plex Mono', sans-serif !important;
  letter-spacing: 0;
  font-weight: 400;
  line-height: 1.3;
}

.dot {
  height: 12px;
  width: 12px;
  border-radius: 50%;
  display: inline-block;
}

.halfdot {
  height: 12px;
  width: 6px;
  border-bottom-left-radius: 12px;
  border-top-left-radius: 12px;
  display: inline-block;
}

.color-1 {
  background-color: #2c0595;
}

.color-2 {
  background-color: #5900a5;
}

.color-3 {
  background-color: #8305a7;
}

.color-4 {
  background-color: #a72197;
}

.color-5 {
  background-color: #c53f7e;
}

.color-6 {
  background-color: #dc5e66;
}

.color-7 {
  background-color: #f07e4f;
}

.color-8 {
  background-color: #fca338;
}

.mapboxgl-ctrl.mapboxgl-ctrl-attrib {
  display: none !important;
}

@media (max-width: 750px) {
  #features {
    width: 90vw;
    margin: 0 auto;
  }

  #subtitleText {
    font-size: 18px;
    margin: auto 10vw;
  }

  #titleText {
    font-size: 18px !important;
  }

  #bylineDescription {
    font-size: 12px !important;
  }

  #image {
    display: none;
  }

  #footer {
    height: 250%;
  }

  .mapboxgl-ctrl-bottom-right {
    display: none;
  }

}