:root {
  --primary-color: #EF313C;
  --priamry-dark: #A7152C; 
  --white: #ffffff;
  --dark: #231F20;
  --bg-light: #fafafa;
  --bg-dark: #232323;
  --bg-default: #161B3B;
}

*{
  font-family: 'Roboto', sans-serif;
  color: var(--white);
}

html{
  scroll-behavior: smooth;
}

.default-background{
  background-color: var(--bg-default);
  background-image: url("../images/stars.png");
  background-size: cover;
  background-repeat: repeat-y;
}

.hide{
  display: none;
}

.close span{
  color: #155724 !important;
}

.vh-100{
  height: 100vh;
}

.vw-100{
  width: 100vw;
}

.w-100{
  width: 100%;
  max-width: 400px;
}

.h-100{
  height: 100%;
}

.jh-font{
  font-family: 'Fira Sans', sans-serif;
  font-weight: 600;
  font-size: 3.2em;
}

.j-input-btn{
  color: var(--white);
  background: var(--primary-color);
  border-color: var(--primary-color);
}

.j-input-btn:hover{
  background: var(--priamry-dark);
  color: var(--white);
  border-color: var(--priamry-dark);
}

.h-font{
  font-family: 'Fira Sans', sans-serif;
  font-weight: 600;
  font-size: 2em;
  line-height: 1.3em;
}

.sh-font{
  font-family: 'Fira Sans', sans-serif;
  font-weight: 600;
  font-size: 1.4em;
  line-height: .8em;
}

.navbar-light .navbar-nav .nav-link{
  font-weight: 800;
  color: var(--dark);
  font-size: .85em;
}

.navbar-light .navbar-nav .nav-link:hover{
  color: var(--primary-color);
}

.navbar-brand img{
  height: 36px !important;
}

.lead{
  text-align: justify;
  font-size: 1.2em;
}

.jumbotron{
  padding: 6rem 2rem;
  height: 100%;
  background: none;
}

.brand{
  color: var(--white);
  font-weight: 800;
  font-family: 'Fira Sans', sans-serif;
}


.green-planet{
  position: absolute;
  top: 50px;
  right: 200px;
  z-index: -1;
  display: block;
}

.red-planet{
  position: absolute;
  top: 590px;
  left: 70px;
  z-index: -1;
  display: block;
}

.purple-planet{
  position: absolute;
  /* top: 100px; */
  bottom: 0;
  left: 670px;
  z-index: -1;
  display: block;
}

.v-center{
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.sub-section{
  margin: 0px;
}

@media screen and (min-width: 200px) and (max-width: 450px){
  .jumbotron{
    padding: 0;
    margin: 0;
    background: none;
  }

  .jh-font{
    font-family: 'Fira Sans', sans-serif;
    font-weight: 600;
    font-size: 2.2em;
  }

  .lead{
    text-align: justify;
    font-size: .85em;
  }

  .green-planet{
    display: none;
  }

  .red-planet{
      display: none;
  }

  .purple-planet{
    display: none;
  }

}

/* Ipad Screens Horizontal */
@media screen and (min-height: 700px) and (max-width: 1370px){
  .jumbotron{
    /* padding: 0; */
    margin: 0;
    background: none;
  }

  .jh-font{
    font-family: 'Fira Sans', sans-serif;
    font-weight: 600;
    font-size: 2.8em;
  }

  .lead{
    text-align: justify;
    font-size: 1.2em;
  }
  
  .sub-section{
    margin: 100px 0px;
  }

    .green-planet{
    display: none;
  }

  .red-planet{
      display: none;
  }

  .purple-planet{
    display: none;
  }

}

/* Ipad Screens Vertical */
@media screen and (min-height: 1024px) and (max-width: 1370px){
  .jumbotron{
    /* padding: 0; */
    margin: 0;
    background: none;
  }

  .jh-font{
    font-family: 'Fira Sans', sans-serif;
    font-weight: 600;
    font-size: 3.2em;
  }

  .lead{
    text-align: justify;
    font-size: 1.2em;
  }
  
  .sub-section{
    margin: 100px 0px;
  }

    .green-planet{
    display: none;
  }

  .red-planet{
      display: none;
  }

  .purple-planet{
    display: none;
  }

}