@import "/assets/css/main.css";

:root {
  --navbarHeight: 5vh;
}

.headerContainer
{ 
  background-color: var(--mainBackground);
  position:fixed;
  top:0;
  height: var(--navbarHeight); 
  z-index:100;

  width: 100%;
}

.navBar
{
  box-sizing: content-box;

  width: var(--contentWidth);
  height: 100%;
  
  vertical-align:middle;

  margin-right:auto;
  margin-left:auto;
}

.homeTextContainer
{ 
  box-sizing: content-box;

  float:left;
  background-color: rgb(0, 0, 0);
  height: 100%;
  cursor: pointer;
  width: fit-content;
}

.homeText
{
  display: inline-block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);

  box-sizing: border-box;

  padding-right: 20px;
  padding-left: 20px;

  color: white;

  font-size: calc(var(--navbarHeight) * 0.5);
}

.headerPages
{
  float: right;
  width: fit-content;
  height: 100%;
}

.navbarLink
{  
  display: inline-block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);

  box-sizing: border-box;

  color: rgb(153, 153, 153, 0.5);

  padding-right: 10px;
  padding-left: 10px;

  transition: color .5s ease-in-out; 
  font-size: calc(var(--navbarHeight) * 0.4);
}

.dropdownLink
{
  display: inline-block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);

  box-sizing: border-box;

  color: rgb(153, 153, 153, 0.5);

  padding-right: 10px;
  padding-left: 10px;

  transition: color .5s ease-in-out; 
  font-size: calc(var(--navbarHeight) * 0.4);
}

.navbarLink:hover
{
    color: rgb(153, 153, 153, 1);
}

.dropdownLink:hover
{
  color: rgb(153, 153, 153, 1);
}

.dropdownLink:hover > .dropDownBar
{
  max-height: 500px;
}

.dropDownBar
{
  overflow: hidden;

  position: absolute;

  top: calc(var(--navbarHeight) * .70);

  max-height: 0px;
  transition: max-height 2s ease-in-out;
  
  background-color: black;
}

.dropDownBar div
{
  padding: 1vh;
}

a.anchor {
  display: block;
  position: relative;
  top: calc(var(--navbarHeight) * -1.5);
  visibility: hidden;
  scroll-behavior: smooth;
}