/* NAV */
.nav-bar{
  height: 40px;
  display: flex;
  background-color: #2b3035;
}

.nav-bar .nav-half{
  width: 50%;

  display: flex;
}

/* NAV LEFT */
.nav-bar .nav-half.screen div{
  width: 33.3%;

  color: #FFFFFF;
  font-size: clamp(10px, 4vw, 24px);

  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-bar .nav-half.screen div a{
  width: 100%;
  height: 100%;

  text-decoration: none;

  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-bar .nav-half.screen div a:hover{
  color:#FFFFFF;
}

.nav-bar .nav-half.screen div:hover{
  background-color: rgba(100,100,100,0.5);
  border-radius: 30px 30px 0px 0px;
}

.nav-bar .nav-half.screen div.no-hover{
  pointer-events: none;
}

.nav-bar .nav-half.screen div.selected a{
  background-color: #dcdcdc;
  color: #000000;

  border-radius: 50px 50px 0px 0px;
}

.nav-bar .nav-half.screen div.selected a.code{
  background-color: #FFFFFF;
  color: #000000;

  border-radius: 50px 50px 0px 0px;
}

/* NAV RIGHT */
.nav-bar .nav-half.create{
  display: flex;
  justify-content: flex-end;
}

.nav-bar .nav-half.create div{
  width: 40px;
  color: #FFFFFF;

  margin-right: 5px;

  display: flex;
  justify-content: center;
  align-items: center;

  cursor: pointer;
}

.nav-bar .nav-half.create div img{
  width: 25px;
}

.info-window{
  position: fixed;

  top:0;
  left:0;

  z-index: 100;

  width: 100%;
  height: 100%;
  background-color: #dcdcdc;

  overflow-y: auto;
}

.close-info-window{
  position: fixed;
  top:0;
  right:0;
  
  width: 35px;
  height: 35px;

  border: solid 3px #000000;

  cursor: pointer;
}

.close-info-window img{
  width: 100%;
  height: 100%;
}

.info-container{
  padding: 3vw;
  min-height: 1300px;
}

.info-container h2{
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 0px;

  border-radius: 5px;
  padding: 15px 15px;
  background-color: #2a2a2e;
  color: #e0e0e0;
}

.info-container h3{
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0px;
  text-decoration: underline;
  background-color:#2a2a2e;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
  padding: 15px 15px;
  cursor:pointer;

  color: #e0e0e0;

  margin-top: 45px;
}

.info-container .page
{
   display:none;
   border: 3px solid #2a2a2e;
   border-bottom-left-radius:5px;
   border-bottom-right-radius:5px;
   padding: 12px;
}

.info-container h4{
  font-size: var(--bs-body-font-size);
  font-weight: bold;
  margin-bottom: 15px;
  text-decoration: underline;
  cursor: pointer;

  background-color:#2a2a2e;
  color: #e0e0e0;

  padding: 7px;
  border-radius: 3px;
}

.info-container .sub-topic{
  display: none;
}
.info-container p{
  font-size: var(--bs-body-font-size);
  margin-bottom: 30px;

  padding: 0px 7px;
}

.info-container .sub-link {
  color: rgb(8, 117, 153);
  text-decoration: underline;
  cursor: pointer;
}

.info-container img{
  width: 20px;
  height: 20px;
  filter: brightness(0%);
}

.info-container ul{
  list-style-type: disc;
  margin: 0 0 30px 30px;

}

.info-container li:not(:last-child) {
  margin-bottom: 7px;
  line-height: 120%;
}
.info-container li::marker {
  color:#2a2a2e;
}