body
{
	height:100vh;
	display:flex;
	flex-direction:column;
	font-family:Verdana, Geneva, Tahoma, sans-serif;
	margin:0;
}

/* Guide row */

.guide
{
	box-sizing:border-box;
	display:flex;
	width:100%;
	max-width:1024px;
	margin:0 auto;
	padding:0.5rem;
}

.guide-col
{
	display:flex;
	align-items:center;
	width:33.3%;
}

.guide-img
{
	display:inline-block;
	background-size:100%;
	width:20%;
	aspect-ratio: 93 / 98;
	margin-right:0.5rem;
}

.guide-img-1
{
	background-image:url("img/guide-1.png");
}

.guide-img-2
{
	background-image:url("img/guide-2.png");
}

.guide-img-3
{
	background-image:url("img/guide-3.png");
}

.guide-message
{
	flex:1;
}

.guide-spacer
{
	width:0.5rem;
}

/* Toolbar */

.toolbar
{
	padding:0.5rem;
	text-align:center;
	background:gainsboro;
}

/* Main */

.main
{
	flex:1;
	padding:1rem;
	display:flex;
}

.ringbinder-area
{
	flex:1;
	width:100%;
	max-width:1024px;
	margin:0 auto;
	position:relative;
}

.ringbinder
{
	position:absolute;
	box-sizing:border-box;
	background-image:url("img/planner-background.png");
	border-top:solid 4px rgba(255,255,255,0.25);
	border-left:solid 4px rgba(255,255,255,0.25);
	border-bottom:solid 4px rgba(0,0,0,0.25);
	border-right:solid 4px rgba(0,0,0,0.25);
	padding:1rem;
	display:flex;
}

/* Ringbinder Left Page */

.left-page
{
	z-index:10;
	height:100%;
	border:solid 1px grey;
	background-color:white;
	aspect-ratio: 148 / 210;
	display:flex;
}

.left-page-contents
{
	flex:1;
	height:100%;
}

.left-page-holes
{
	height:100%;
	width:10%;
}

.spacer
{
	width:1rem;
}

/* Ringbinder Right Page */

.right-page
{
	z-index:10;
	height:100%;
	border:solid 1px grey;
	background-color:white;
	aspect-ratio: 148 / 210;
	display:flex;
}

.right-page-holes
{
	height:100%;
	width:10%;
}

.right-page-contents
{
	flex:1;
}

/* Ringbinder Floaters */

.panel-line-1
{
	position:absolute;
	top:0;
	left:47%;
	margin-left:-2px;
	width:4px;
	height:100%;
	background-color:rgba(0,0,0,0.25);
}

.panel-line-2
{
	position:absolute;
	top:0;
	left:53%;
	margin-left:-2px;
	width:4px;
	height:100%;
	background-color:rgba(0,0,0,0.25);
}

.clip-fing
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
}

.clip-fing-background-image
{
	display:inline-block;
	position:relative;
	width:4%;
	height:55%;
	background:url("img/clip-fing.png");
	background-size:100% 100%;
}

/* Footer */

.foot
{
	padding:0.5rem;
	text-align:center;
	background:gainsboro;	
}