* {
	box-sizing: border-box;
}

:root {
	--white: #dbecff;
	--pink: #ffc0cb;
	--long: 560px;
	--wide: 420px;
	--wide2: 840px;
	--left: 32.2%;
}

html {
	scrollbar-color: #ffc0cb #dbecff;
}

body {
	background: url(assets/bg.png);
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
	padding: 0px;
	margin: 0px;
	font-family: arial;
	font-size: 14px;
}

::selection {
	background: pink;
	color: black;
}

h1 {
	color: white;
	text-transform: uppercase;
	margin: 0px;
	padding: 70px 0 20px 0;
	font-size: 38px;
	letter-spacing: 4px;
}

h2,
h3,
h4 {
	color: pink;
}

a {
	text-decoration: wavy underline;
	color: #0086e4;
}

a:hover {
	color: pink;
}

#cover {
	left: var(--left);
	margin-left: 70px;
	margin-top: 60px;
	border-radius: 2px 20px 20px 2px;
	text-align: center;
	position: absolute;
	width: var(--wide);
	height: var(--long);
	background: #ebbb3f;
	z-index: 2;
	cursor: grab;
	box-shadow: 2px 2px 1px white;
	border: 1px grey solid;
}

#cover img {
	width: 64%;
}

#passport-opened {
	background: white;
	display: none;
	left: var(--left);
	position: absolute;
	z-index: 1;
	margin-top: 0px;
	width: var(--long);
	height: var(--wide2);
	border-radius: 20px;
	overflow: hidden;
	border: 2px solid var(--pink);
}

#page-1 {
	height: 100%;
}

#page-2 {
	height: 100%;
}

.page {
	background: white;
}

#page-1 .down p {
	font-size: 13px;
	font-weight: bold;
}

.up {
	padding: 30px;
	display: block;
	height: var(--wide);
	border-bottom: 2px dashed grey;
	overflow: auto;
}

.down {
	padding: 30px;
	display: block;
	height: var(--wide);
	overflow: auto;
}

/*navigation buttons that pop up when you open (click) on the passport*/

#buttons {
	text-align: center;
	width: 250px;
	margin: auto;
	margin-top: 10px;
	margin-bottom: 10px;
}

button.navBtns {
	display: none;
	margin: 4px;
	background: pink;
	font-family: inherit;
	font-style: italic;
	border-radius: 4px;
	border: 2px inset var(--yellow);
}

button.navBtns:hover {
	background: black;
	color: pink;
	border: 2px outset var(--yellow);
}

/*a spacer for the end of the page */

#spacer {
	position: absolute;
	height: 50px;
	width: 10px;
	top: 900px;
}

/*the look of the page 1 info table*/

#page-1 .down {
	font-size: 14px;
	text-transform: uppercase;
	display: grid;
	grid-template-areas:
		"header header header"
		"img info1 info2"
		"footer footer footer";
	grid-template-columns: 40% 35% 25%;
	grid-template-rows: 10% 80% 10%;
	overflow: hidden;
}

#page-1 .down h3 {
	color: pink;
	font-size: 12px;
}

.header {
	grid-area: header;
}

.header h2 {
	display: inline-block;
	margin: 5px;
	color: pink;
}

.portrait {
	grid-area: img;
	padding: 10px;
	overflow: hidden;
}

.portrait img {
	width: 100%
}

.info1 {
	padding: 10px;
	grid-area: info1;
	overflow: auto;
}

.info2 {
	grid-area: info2;
	padding: 10px;
	overflow: auto;
}

.info1 h3,
.info2 h3 {
	text-transform: none;
}

.footer {
	grid-area: footer;
	padding-top: 4px;
	text-align: center;
	overflow: hidden;
	color: pink;
}

/*this is the tooltip aka the title pop up*/
#s-m-t-tooltip {
	font-weight: normal;
	max-width: 200px;
	text-align: center;
	z-index: 9999;
	margin: 30px 15px 7px 12px;
	padding: 5px;
	border-radius: 10px;
	border: 1px dashed black;
	font-size: 16px;
	font-style: italic;
	letter-spacing: 3px;
	text-shadow: 1px 1px 1px black;
	color: var(--yellow);
	background: white;
}

/*animations*/

.passportANI {
	animation-name: passport;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	animation-timing-function: ease;
}

@keyframes passport {
	0% {
		transform: rotate(0deg);
		margin-top: 60px;
		opacity: 1;
	}

	50% {
		transform: rotate(-90deg);
		margin-top: -20px;
		opacity: 1;
	}

	100% {
		transform: rotate(-90deg);
		margin-top: -65px;
		opacity: 0;
		z-index: -1;
	}
}

.passportCloseANI {
	animation-name: passportclose;
	animation-duration: 1.7s;
	animation-fill-mode: forwards;
	animation-timing-function: ease;
}

@keyframes passportclose {
	0% {
		transform: rotate(-90deg);
		margin-top: -65px;
		opacity: 0.3;
	}

	50% {
		transform: rotate(-90deg);
		margin-top: -20px;
		opacity: 1;
	}

	100% {
		transform: rotate(0deg);
		margin-top: 60px;
		opacity: 1;

	}
}

.pageANI {
	animation-name: pageanimation;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	animation-timing-function: ease;
}

@keyframes pageanimation {
	0% {
		margin-top: 130px;
		opacity: 0;
	}

	50% {
		margin-top: 50px;
		opacity: 0;
	}

	100% {
		margin-top: 0px;
		opacity: 1;
	}
}

/* animation when turning page */
.pageTurnANI1 {
	animation-name: pageturnanimation1;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	animation-timing-function: ease;
}

.pageTurnANI2 {
	animation-name: pageturnanimation2;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	animation-timing-function: ease;
}

@keyframes pageturnanimation1 {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes pageturnanimation2 {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/*to make it somewhat mobile compatible...*/

#hide {
	display: none;
	padding: 10px;
	background: white;
	color: black;
	width: 200px;
}

@media only screen and (max-width:920px) {
	:root {
		--left: 170px;
	}
}

@media only screen and (max-width:600px) {
	#hide {
		display: block;
	}
}