* {
  box-sizing: border-box;
}

html, body {
	background-color: gray;
}

@font-face {
    font-family: AkzidenzGroteskBQ-Reg;
    src: url('AkzidenzGrotesk-Regular.otf');
}

@font-face {
    font-family: Adobe Caslon Pro;
    src: url('ACaslonPro-Bold.otf');
}

.wrapper {
	max-width: 100%;
}

.side-by-side {
	height: 100%;
	position: fixed;
	overflow-y: auto;
}

.one-half { 
	width: 50%;
}

#left {
	left: 0;
	background-color: gray;
	background: linear-gradient(gray, white);
	color: black;
	padding: 50px 25px 37px;
}

#right {
	right: 0;
	background-color: gray;
	background: linear-gradient(gray, black);
	color: white;
	padding: 50px 25px 37px;
}

.marginalia {
	font-family: 'AkzidenzGroteskBQ-Reg', 'Helvetica', sans-serif;
	font-size: 12px;
	letter-spacing: .5px;
	z-index: 999;
	position: fixed;
}

.marginalia a {
	text-decoration: none;
	color: inherit;
}

.marginalia a:hover {
	text-decoration: none;
	border-bottom: 1px solid black;
}

.title {
	top: 2.2%;
	right: 2%;
	color: black;
	font-weight: 400;
}

.author {
	top: 2.2%;
	right: 52%;
	color: white;
	font-weight: 400;
}

.extra {
	top: 2.2%;
	left: 25%;
	color: white;
	font-weight: 400;
}

p {
	text-indent: 40px;
	font-family: 'Adobe Caslon Pro';
	font-size: 35pt;
	font-weight: 800;
	letter-spacing: -.5px;
	line-height: 1.1em;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
}

.no-indent {
	text-indent: 0;
}

#left a:link {
	text-decoration: none;
	color: inherit;
	background-color: red;
	background: linear-gradient(to left, transparent, red);	
}

#right a:link {
	text-decoration: none;
	color: inherit;
	background-color: blue;
	background: linear-gradient(to left, transparent, blue);	
}

a:visited {
	text-decoration: none;
	color: inherit;
	background-color: blue;
}

#left a:hover {
	text-decoration: none;
	color: inherit;
	background-color: transparent;
	background: linear-gradient(to left, transparent, red);
	/*animation*/
	animation-name: hover-l;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-duration: 3s;
/*	animation-timing-function: ease-in-out;*/
}

#right a:hover {
	text-decoration: none;
	color: inherit;
	background-color: transparent;
	background: linear-gradient(to left, transparent, blue);
	/*animation*/
	animation-name: hover-r;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-duration: 3s;
/*	animation-timing-function: ease-in-out;*/
}

a:active {
	text-decoration: none;
}

@keyframes hover-l {
    0%   {background-color: cyan;}
    34%  {background-color: deepPink;}
    67%  {background-color: navy;}
    100% {background-color: crimson;}
 }

@keyframes hover-r {
    0%   {background-color: deepPink;}
    34%  {background-color: cyan;}
    67%  {background-color: crimson;}
    100% {background-color: navy;}
 }

#right ::selection {
	background-color: transparent;
	color: black;
}

#left ::selection {
	background-color: transparent;
	color: white;
}

#left a:target {
	text-decoration: none;
	color: inherit;
	background-color: transparent;
	background: linear-gradient(to left, transparent, blue);
	/*animation*/
	animation-name: hover-r;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-duration: 3s;
}

#right a:target {
	text-decoration: none;
	color: inherit;
	background-color: transparent;
	background: linear-gradient(to left, transparent, red);
	/*animation*/
	animation-name: hover-l;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-duration: 3s;
}

sup {
	font-size: 10px;
	font-family: 'AkzidenzGroteskBQ-Reg', 'Helvetica', sans-serif;
	font-weight: 500;
	position: relative;
	top: -30px;
	padding-right: 3px;
}