.nav-link {
  color: white;
  text-shadow: -0.5px 0 black, 0 0.5px black, 0.5px 0 black, 0 -0.5px black;
  font-size: 22;
}
  
.active {
  color: #ccba78 !important;
  font-weight: bold;
  border-style: solid;
  border-left-color: #ccba78;
  border-right: 1px;
  border-top: 1px;
  border-bottom: 1px;
  margin-left: -3px;
}

a:hover {
  color: gold;
}

.position{
  border-style: solid;
  border-right: 1px;
  border-top: 1px;
  border-bottom: 1px;
  border-left-color: white;
}

.custom-navbar {
  width: 15%;
  white-space: nowrap;
  margin-left: 2%;
}
  
.navbar-brand {
  margin-top: 10%;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  font-weight: 700;
  font-size: 4rem;
  /*
  background: rgba(0,0,0, 1);
  border-radius: 1.5rem;
  padding-left: 2rem;
  padding-right: 2rem;
  */
}
  
.navbar-items {
  margin-left: 2%;
  margin-top: 80%;
  width: 10%;
}
@media screen and (max-width: 980px) {
  .position {
    display: none;
  }
}
@media screen and (max-height: 880px) {
  .position {
    bottom: 20% !important;
  }
   a {
    font-size: 15px!important;
}
}

@media screen and (max-width: 1920px) {
  .navbar-brand {
    font-size: 3rem !important;
  }
}

@media screen and (max-width: 1280px) {
  .navbar-brand {
    font-size: 2rem !important;
  }
}
@media screen and (max-height: 545px) {
  .position {
    bottom: 5% !important;
  }
   a {
    font-size: 15px!important;
}}

@media screen and (max-height: 455px) {
  .navbar-brand{
    font-size: 2rem!important;
  }
  .navbar-subtitle{
    font-size: 15px!important;
  }
  .position {
    bottom: 0% !important;
  }
   a {
    font-size: 10px!important;
}}

@media screen and (max-height: 350px) {
  .navbar-brand{
    font-size: 1.5rem!important;
  }
  .navbar-subtitle{
    font-size: 12px!important;

  top: -15px !important;
  }
   a {
    font-size: 8px!important;
}}