body {
  overflow-x: hidden;
  font-family: 'Lato', sans-serif;
  color: white;
  background-color: #1b1327;
}

/*============= LANDING PAGE =============*/
.landing{
  height: 100vh;
  background-color: #1b1327;
}

.home-inner{
  background-image: url("../img/mountain.jpg");
  opacity: .55;
  position: fixed;
}
/*-- Landing Page Caption --*/
.caption{
  width: 100%;
  max-width: 100%; /*smaller devices???*/
  position: absolute;
  top: 25%;
  z-index: 1;
}
.yin{
  display: none;
}
.caption h1 {
  font-size: 5.5rem;
  letter-spacing: .2rem;
  text-shadow: .2rem .2rem .8rem black;
  padding-bottom: 1.2rem;
}
.caption h3 {
  font-size: 4rem;
  letter-spacing: 1rem;
  text-shadow: .2rem .2rem .8rem black;
  padding-bottom: 1rem;
}
/*-- Dark Mode Switch --*/
.slider {
  background-color: #6e6e6e;
  transition: .3s;
  box-shadow: .1rem .1rem .8rem black; /*shadow of button*/
}
.slider:before {
  background-color: white;
  transition: .3s;
}
input:checked + .slider {
  background-color: #1849ab;
}
h1{
  font-size: 35px;
  padding-bottom: 25px;
}
/*============= MEDIA QUERIES =============*/

/* mobile */
@media (max-width: 767.98px) {
  .caption {
    max-width: 100%
  }
  .caption h1 {
    font-size: 3rem;
    letter-spacing: .1rem;
    padding-bottom: .5rem;
  }
  .caption h3 {
    font-size: 2rem;
    letter-spacing: .3rem;
    padding-bottom: .5rem;
  }
  h1{
    font-size: 25px;
    padding: 25px 20px 25px 20px;
  }
}




/*--- Fixed Landing Page Section --*/
.landing {
  position: relative;
  width: 100%;
  display: table;
  z-index: -1;
}
.home-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.home-inner {
  display: table;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
}

/*-- Dark Mode Switch --*/
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
  outline: none;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
}
input:focus + .slider {
  box-shadow: 0 0 0 4px rgba(21, 156, 228, 0.7);
  outline: none;
}
input:checked + .slider:before {
  transform: translateX(26px);
}
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}