<style type="text/css">
	.hoverable{
  display:inline-block;
  backface-visibility: hidden;
  vertical-align: middle;
  position:relative;
  box-shadow: 0 0 1px rgba(0,0,0,0);
  tranform: translateZ(0);
  transition-duration: .3s;
  transition-property:transform;
}

.hoverable:before{
  position:absolute;
  pointer-events: none;
  z-index:-1;
  content: '';
  top: 100%;
  left: 5%;
  height:10px;
  width:90%;
  opacity:0;
  background: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 80%);
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 80%);
  /* W3C */
  transition-duration: 0.3s;
  transition-property: transform, opacity;
}

.hoverable:hover, .hoverable:active, .hoverable:focus{
  transform: translateY(-5px);
}
.hoverable:hover:before, .hoverable:active:before, .hoverable:focus:before{
  opacity: 1;
  transform: translateY(-5px);
}



@keyframes bounce-animation {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }

  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }

  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }

  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }

  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.bounce {
  animation-name: bounce-animation;
  animation-duration: 2s;
}

.navbar {
	background-color: #198754;
}

.nav-item a{
	color:  white;
}

.dropdown-menu a{
	color: black;
}

.nav-link:hover{
	color: white !important;
}


</style>
<?php
    if (!isset($_SESSION["user"])){
        echo '
			<meta http-equiv="refresh" content="0; url=index.html">
		';
    }
?>
<header>
	<nav class="navbar navbar-expand-lg navbar-light-bg-light">
		<div class="container-fluid">
			<!--<a class="navbar-brand" href="#"><img src="images/logo.jpeg" style="height: 100px;"></a>-->
			<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" style="background-color: '#8092aa' !important">
			    <span class="navbar-toggler-icon">≡</span>
			</button>
			<div class="collapse navbar-collapse" id="navbarSupportedContent">
				<ul class="navbar-nav me-auto mb-2 mb-lg-0 nav">
					<li class="nav-item">
			            <a class="nav-link hoverable" href="inicio.php">Inicio</a>
			        </li>
			        <li class="nav-item">
			            <a class="nav-link hoverable" href="movimientos0.php">Movimientos</a>
			        </li>
			        <li class="nav-item">
			            <a class="nav-link hoverable" href="recurrentes0.php">Recurrentes</a>
			        </li>
			        <li class="nav-item">
			            <a class="nav-link hoverable" href="proyecciones0.php">Proyecciones</a>
			        </li>
    <?php
        session_start();
        if ($_SESSION["user"] == "Fernando"){
            echo '
			        <li class="nav-item">
			            <a class="nav-link hoverable" href="catTipos.php">Catálogo tipos</a>
			        </li>
		    ';
        }
    ?>
        </ul>
			</div>
		</div>
	</nav>
</header>

