html{
	background: #333;
}
h1{
   font-family: var(--font-mono);
   display: table;
   margin: 3rem auto;
   color: #373737;
}
a{
   display: table;
   margin: 0 auto;
   background: var(--bg-baige);
   padding: 1rem;
   box-shadow: 0 7px 12px 3px rgba(9,14,11,0.2);
   transition: all 1s ease;
}
a:hover{
   box-shadow: 0 0 0 0 rgba(9,14,11,0);
}

.page1{
	border: 11px solid #eee;
	height: 100vh;
	background: var(--bg-purple);
	
	margin: 6rem 0 0 0;
	animation: BgTextTransform 0.85s ease 0s 1 normal forwards running;
   
   transform: translateY(0px);
}
.page2{
	border: 11px solid #eee;
	height: 100vh;
	background: var(--bg-skyblue);
	
	margin: 8rem 0 0 0;
	animation: BgTextTransform 0.85s ease 0s 1 normal forwards running;
   
   transform: translateY(0px);
}

@keyframes BgTextTransform{
	0% {
		transform: translateY(0px);
		opacity: 0;
	}
	100%{
		transform: translateY(-40px);
		opacity: 1;
	}
}

[class*="page"].disappear{
	opacity: 0;
   animation: disappeare 0.85s ease 0s 1 normal forwards running;
}
@keyframes disappear{
   0%{
      transform: translateY(-40px);
		opacity: 1;
   }
   100%{
      transform: translateY(0px);
		opacity: 0;
   }
}