/* capitalist fallacy & moral rescue */

* {
    box-sizing: border-box;
}

html {
	background: #009380; /*#1c364a; linear-gradient(55deg, indianred 0%, lightsalmon 51%, palevioletred 85%);*/
}

html, body {
	cursor : url('../heart.png'), crosshair;
}

body.capitalist-fallacy {
	color: white;
	background: transparent;
	max-width: 1000px;
	padding: 10px;
	margin: auto;
	padding-top: 100px;
}

body {
	max-width: 1400px;
	margin: auto;
}

h1 {
	margin-bottom: 50px;

}

p {
	color: white;
	position: relative;
	font-size: 34px;
	font-weight: 400;
	margin-left: 10%;
	margin-right: 10%;
	margin-bottom: 5rem;
	width: 80%;
	transition: margin 10s linear, color 5s linear
}

p:nth-child(3n + 1) {
	margin-left: 20%;
	margin-right: 0;
}

p:nth-child(3n) {
	margin-left: 0;
	margin-right: 20%;
}

p:hover {
	color: aquamarine;
}

p span {
	color: khaki;
}

.sidenote {
	color: white;
    font-size: 14px;
    display: block;
    text-align: right;
}

em {
	background: none;
	color: khaki;
}
.alt {
	color: lightsalmon;
	background: white;
	cursor: none;
	padding: 3px;
}
.definition {
	display: inline-block;
	padding: 20px;
	border-radius: 50%;
	border: 3px solid white;
}
.definition:hover {
	border: none;
	border-radius: 0;
	display: inline;
	padding: 3px;
}
.alt, .alt .alt-text {
	color: lightsalmon;
}

.opposition {
	color: black;
	font-weight: bold;
	filter: blur(1px);
	cursor: none;
}

.alert {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}
.alert p, .btn {
	background-color: lightsalmon;
	text-align: center;
	width: 100%;
	padding: .4em;
	margin: 0;
	transition: none;
}

@media (max-width: 767px) {
	body {
	}
	h1 {
		font-size: 38px;
	}
	p {
		font-size: 24px;
	}
}

@media (min-width: 992px) {
	.sidenote {
		width: 10%;
	    position: absolute;
	    bottom: 0;
	    left: -12.5%;
	}

	.sidenote-right, p:nth-child(3n) .sidenote {
	    left: unset;
	    right: -12.5%;
	    text-align: right;
	}
}

@media (min-width: 1440px) {
	body.capitalist-fallacy {
		max-width: 60%;
	}
	body.capitalist-fallacy p {
		max-width: 1000px;
	}
	body.capitalist-fallacy .alert p {
		max-width: 100%;
	}
	h2 {
	    position: absolute;
		left: calc((100vw - 1400px)/2 - 1em - 20px);
		writing-mode: vertical-lr;
		text-orientation: upright;
		height: max-content;
		line-height: 1;
		padding: 0;
		margin: 0;
		font-size: 40px;
	}
	h2.heading-right {
		left: unset;
		right: calc((100vw - 1400px)/2 - 1em - 20px);
	}
}