@import url('https://fonts.googleapis.com/css2?family=Allison&family=Bonheur+Royale&family=Lacquer&display=swap');

nav{
	position:fixed;
	top:4px; right:4px;
	background:rgba(255,255,255,0.5); 
	border-radius:4px;
	font-family: "Lacquer";
	z-index:2;
}

nav a{
	padding:5px;
	display:inline-block;
	width:50px;
	color:white;
	text-decoration:none;
	font-size:32px;
	margin-top:-8px;
	transition:all 1s ease;
}

nav div{
	position:relative;
	z-index:4;
	padding:5px; 
	background:rgba(255,255,255,0.5);
	font-weight:bold;
	font-size:22px;
}

nav a:hover{
	transform:scale(1.25, 1.25);
}

.envelope{
	position:fixed;
	left:64%;
	top:55%;
	transform:rotate(-45deg) scale(0.75, 0.75);
	transition:all 1s ease;
	filter:grayscale(25%);
	box-shadow:0 0 50px rgba(0, 0, 0, 0.175);
}

.envelope:hover{
	transform:rotate(5deg) scale(0.8, 0.8);
	filter:grayscale(0);
}

.magazine{
	overflow:hidden;
	box-shadow:0 0 50px rgba(0, 0, 0, 0.175);
	width:210mm; height:297mm;
	margin:auto;
	filter:grayscale(25%);
	transition:all 1s ease;
	position:fixed;
	left:20%;
}

.magazine:hover{
	transform:scale(1.125, 1.125);
	filter:grayscale(0);
	box-shadow:10px 10px 25px gray;
}

.magazine .page{
	overflow:hidden;
	position:absolute;
	top:0; left:0; right:0; bottom:0;
	border:none;
	width:100%; height:100%;
	box-shadow:0 0 25px rgba(0,0,0,0.125);
}

#resume{
	z-index:0;
	transform:rotate(-45deg);
	left:5%;
	top:10%;
}	

#resume:hover{
	left:0%;
	top:-5%;
	transform:rotate(-52deg);
}


#blog{
	z-index:0;
	transform:rotate(15deg);
	left:45%;
	top:15%;
}	

#blog:hover{
	left:50%;
	top:5%;
	transform:rotate(5deg);
}

body{
	text-align:center;
	padding:15mm;
	zoom:0.85;
	background-image:url("/.assets/img/marble-4700915_1280.jpg");
}

.blog{
	position:fixed;
	width:210mm; height:297mm;
	margin:auto;
	background:#e3e3e3;
	box-shadow:25px 25px 50px rgba(0,0,0,0.125);
	transition:all 1s ease;
}

.blog > .page{
	width:100%;
	height:100%;
}

.blog.cover, .p1, .p3, .p5, .p7, .p9{ 
	left:225mm;  
	z-index:2;
} 

.blog.inside, .p2, .p4, .p6, .p8, .p10{  
	z-index:1;
}

.blog.discuss{
	background-image:url("/.assets/img/legal-pad-979558_1280.png");
	left:380mm;
	transform:rotate(15deg);
	z-index:1;
	overflow:hidden;
	top:75mm;
}

.blog.discuss:hover{ 
	z-index:50; 
	transform:rotate(0deg) scale(1.075);
	top:0;
}

button#next{
	position:fixed;
	left:425mm;
	padding:25px;
	z-index:10;
	top:150mm;
	display:none;
	font-family: "Lacquer";
}

button#prev{
	position:fixed;
	left:5mm;
	padding:25px;
	z-index:10;
	top:150mm;
	display:none;
	font-family: "Lacquer";
}

.content-track{
	position:fixed;
	top:0; left:300vh; right:0; bottom:0;
	background-color:rgba(0,0,0,0.125);
	overflow:auto;
	opacity:0;
	transition:all 1s ease; 
	min-width:100vw;
	z-index:5;
}

.content-track.open{ 
	opacity:1;
	left:0;
}

#about-me .track{
	width:calc(9 * 214mm);
}

#message-me .track .page{
	float:right;
}

#blog-covers .track .page{
	transition:all 1s ease;
}

#blog-covers .track .page:hover{
	box-shadow:0 0 500px purple;
}

#blog-covers {
	background-image:url(/blog/assets/images/background1.webp);
	background-size:cover;
}

.content-track .track .page{
	float:left;
	overflow:hidden;
	box-shadow:25px 25px 50px rgba(0, 0, 0, 0.075);
	width:210mm; height:297mm;
	margin:4mm 2mm;
	filter:grayscale(25%);
	transition:all 1s ease; 
	border:none;  
} 

.btn-close{
	position:fixed;
	top:32px;
	padding:16px;
	right:18px;
	z-index:20;
	display:none;
	font-family: "Lacquer";
	font-size:32px;
}

.content-track.open .btn-close{
	display:block;
}

.back{
	position:fixed;
	top:0;left:0;
	transition:all 1s ease;
}

.back a{
	position:absolute;
	top:75px;
	left:22%;
	font-size:64px;
	color:#184a8f;
	text-decoration:none;
	line-height:1em;
	font-family: "Allison", cursive;
	transform:rotate(-12deg)
}

.back:hover{
	transform:scale(1.1) rotate(12deg);
}

.copyright, .cookie{
	position:fixed;
	bottom:-124px; left:-25px;
	font-family: "Bonheur Royale", cursive;
	color:#444444;
	transform:rotate(10deg);
	z-index:-1;
	transition:all 1s ease;
}

.cookie{
	top:0;
	right:0;
	bottom:auto;left:auto;
}

.copyright:hover{
	z-index:0;
	transform:rotate(8deg) scale(1.1);
}

.copyright .message h3{
	margin:0;
	font-size:55px;
	font-family: "Allison", cursive;
}

.copyright .message, .cookie .message{
	position:absolute;
	top:75px; left:75px; right:100px; bottom:0;
	padding:25px;
	line-height:1em;
	transform:rotate(-10deg);
	font-family: "Lacquer";
	font-size:25px;
}

img.back{
	left:250px;
	top:50px;
}

.cookie .message a{ color:#184a8f; }
.cookie .message a:hover{ color: blue; }