body {
      background: url(https://i.pinimg.com/736x/59/72/25/597225065a24760f17ce82195b3ef497.jpg)  ;  
}


.page {
  display: none;
}
.page:target {
  display: block;
}
  
  ul {
		list-style: none;
		padding: 0;
		display: inline;
		border-bottom: 1px Solid Black;
		}

  ul li {
		width: 50px;
		margin-right: 10px;
		position: absolute;
		top: 50px;
		left: 50%;
		transform: translate(-50%, -50%);
		}
  
  ul li a { 
    position: absolute;
		top: 50px;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100px;
		background: #000;
		border: 1px Solid #fff;
		border-radius: 5px;
		text-decoration: none;
		color: white;
		}


		.actual {
		width: 100px;
		display: block;
		background: #000;
		border-top: 1px Solid #000;
		border-bottom: 1px Solid #77BADB;
		text-decoration: none;
		}
  
  #page1 {
  position: absolute;
    top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 750px;
		background: #000;
		float: left;
		margin: 0;
		border-left: 2px Solid #fff;
		border-bottom: 2px Solid #fff;
		border-right: 2px Solid #fff;
		color: #fff;
		}
		
		#page2 {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 750px;
		background: #000;
		float: left;
		margin: 0;
		border-left: 2px Solid #fff;
		border-bottom: 2px Solid #fff;
		border-right: 2px Solid #fff;
		color: #fff;
		
		}