@import url("nexo.menu.css");

:root {

  --header-upper-bar-color: #393939;

}

header{

  width: 100%;

  height: 90px;

}

#headerWeb{

  position: fixed;

  width: 100%;

  z-index: 5;

  background-color: #fff;

  overflow: hidden;

}

/* STYLES OF UPPER BAR */

#upperBar {

  width: 100%;

  height: 30px;

  background-color: var(--header-upper-bar-color);

}

#upperBar .upperBarConsole {

  margin-top: 5px;

  font-family: "JetBrains Mono";

  color: #fff;

  display: inline-block;

}



#upperBar .upperBarConsole .upperBarConsole-text {

  display: inline-block;

  overflow: hidden;

  letter-spacing: 2px;

  animation: typing 7s steps(30, end) infinite, blink .75s step-end infinite;

  white-space: nowrap;

  font-size: 14px;

  font-weight: 700;

  border-right: 4px solid orange;

  box-sizing: border-box;

}

/* STYLES OF MEDIUM BAR */

#mediumBar{

  width: 100%;

  height: 70px;

  overflow: hidden;

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}

/* STYLES OF LOGO PORTAL */

#mediumBar #headerLogo{

  position: absolute;

  left: 0px;

}

#mediumBar #headerLogo div{

  margin-left: 10px;

  width: 300px;

  height: 73px;

  background-image: url("../assets/_logos/logo_portal.png");

  background-size: cover;

}

/* KEY FRAMES FOR ANIMATIONS */

@keyframes typing {

  0% {

    width: 0%

  }

  50% {

    width: 100%

  }

  60% {

    width: 100%

  }

  70% {

    width: 100%

  }

  80% {

    width: 100%

  }

  90% {

    width: 100%

  }

  100% {

    width: 100%

  }

}

@keyframes blink {

  from, to {

    border-color: transparent

  }

  50% {

    border-color: orange;

  }

}