*{
	margin: 0;
	padding: 0;
  }
  body{
	min-height: 100vh;
	background: url('laptop.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  nav{
	 background: white;
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
  }
  nav ul{
	width: 100%;
	list-style: none;
	display: flex;
	justify-content: flex-end;
	align-items: center;
  }
  nav li{
	height: 50px;
  }
  nav a{
	height: 100%;
	padding: 0 30px;
	text-decoration: none;
	display: flex;
	align-items: center;
	color: black;
  }
 /* (incia efecto de botones)  */
nav a:hover { 
font-size: 2rem; 
color: #ffffff; position: relative;
display: inline-block; } 

nav a:hover::after, nav a:hover::before 
{ 
content: ''; position: absolute;
width: 100%; height: 2px; 
background: linear-gradient(to right, #ff0000, #00ffff);
bottom: -5px; 
left: 0; transform: scaleX(0); 
transform-origin: right; transition: transform 0.4s ease-out;
} 

nav a:hover::before 
{ 
    top: -5px; transform-origin: left; 
    
} 

nav a:hover::after, nav a:hover::before 
{ 
    transform: scaleX(1);
    
}

/* --- Mostrar el submenú al pasar el mouse --- */
nav ul li:hover > ul {
  display: flex;
}

nav ul li ul li a:hover {
  background: #555;
}
  
/* (termina efecto de botones)  */
  nav li:first-child{
	margin-right: auto;
  }
  .sidebar{
	position: fixed;
	top: 0; 
	right: 0;
	height: 100vh;
	width: 250px;
	background-color: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(12px);
	box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
	list-style: none;
	display: none;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
  }
  .sidebar li{
	width: 100%;
  }
  .sidebar a{
	width: 100%;
  }
  .menu-button{
	display: none;
  }
  @media(max-width: 800px){
	.hideOnMobile{
	  display: none;
	}
	.menu-button{
	  display: block;
	}
  }
  @media(max-width: 400px){
	.sidebar{
	  width: 100%;
	}
  }