/* GLOBAL STYLES
-------------------------------------------------- */

html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}
body {
	margin: 0;
	font-weight: 500;
	background-color: #FFAFA1;
}
body, html {
	padding-bottom: 0px;
	color: #fff;
	font-family: 'Work Sans', sans-serif;
	line-height: 1.4;
	font-size: 100%;
}


::-moz-selection {
	background: #000;
	text-shadow: none;
	color: #fff;
}
p {
	margin: 0 0 10px;
}
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
::selection {
	background: #000;
	text-shadow: none;
	color: #fff;
}




/* ==========================================================================
   STYLES
   ========================================================================== */

.highlight {
	color: #2b00f7
}
.quote {
	margin-bottom: 100vh;
	font-size: 200%
}
.container {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}


header {padding: 30px 30px 50px 30px;position:fixed;top:0px;z-index:99999999999;
    transition: top 0.2s ease-in-out;
	    top: 0;
		height:74px;
	    transition: top 0.2s ease-in-out;}
	
	.nav-up {
	    top: -74px;
	}

.content {
	padding: 0 30px 50px 30px;
	margin-top: 80vh
}
.links-container {
	border: 5px solid rgba(255, 255, 255, 0.4);
	padding: 30px 50px;
	font-size: 200%;
	margin-top:40px;
}

p.link-title {margin-bottom:6px;}
p.link-source {font-size:50%;}

.fold-text p {
	animation: bounce 2s infinite;
	-webkit-animation: bounce 2s infinite;
	-moz-animation: bounce 2s infinite;
	-o-animation: bounce 2s infinite;
}






@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		-webkit-transform: translateY(0);
	}
	40% {
		-webkit-transform: translateY(-30px);
	}
	60% {
		-webkit-transform: translateY(-15px);
	}
}
@-moz-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		-moz-transform: translateY(0);
	}
	40% {
		-moz-transform: translateY(-30px);
	}
	60% {
		-moz-transform: translateY(-15px);
	}
}
@-o-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		-o-transform: translateY(0);
	}
	40% {
		-o-transform: translateY(-30px);
	}
	60% {
		-o-transform: translateY(-15px);
	}
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-30px);
	}
	60% {
		transform: translateY(-15px);
	}
}
.fold-text p {
	position: fixed;
	bottom: 0;
	right: 0;
	text-align: right;
	color: #fff;
	margin: 0 20px 40px 0;
	background-color: #2b00f7;
	padding: 5px 10px;
	font-size:1.6em;
}
.colophon {
	margin: 60px 0 30px;
	font-size: 80%;
}
.colophon p {
	margin-bottom: 5px
}

a.btn     {background: #2b00f7;
    display: inline-block;
    padding: 10px 30px;
    text-decoration: none;
    color: #ffffff;
    font-size: 0.6em;
}

p.advert-header {
	font-size: 50%;
	margin-bottom: 0
}
p.advert-title {
	margin-bottom: 10px
}
p.advert-sub-text {
	font-size: 75%;
	margin-bottom: 0
}
hr {
	border: none;
	border-top: 10px dashed #2b00f7;
	color: #fff;
	background-color: none;
	height: 1px;
	width: 100%;
	margin: 0;
	position: fixed;
	bottom: 0;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: 500;
	margin-top: 20px;
	margin-bottom: 20px;
	line-height: 1
}
h1 {
	font-size: 4em;
	margin-bottom: 4em;
	font-weight: 800;
	/*text-shadow: 0.05em 0.05em 0 rgba(0,0,0, 0.1)*/
}
h2 {
	font-size: 1em;
	margin-bottom: 2em;
}
h3 {
	font-size: 1.3em
}
h4 {
	font-size: 1.1em;
	margin-top: 5px
}
h5 {
	font-size: 0.9em;
	margin-bottom: 0
}
h6 {
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
	padding: 20px 0
}
a {
	color: #2b00f7;
	-moz-transition: all 0.23s ease-in;
	-o-transition: all 0.23s ease-in;
	-webkit-transition: all 0.23s ease-in;
	-ms-transition: all 0.23s ease-in;
	transition: all 0.23s ease-in;
	text-decoration: underline;
}


a:hover {
	color: #000;
}


/* ==========================================================================
   DARK MODE
   ========================================================================== */
@media (prefers-color-scheme: dark) {
	
	body {background-color: #291F33;}
	.highlight, a {color: #00E5E5}
	a:hover {color:#ffffff;}
	.fold-text p {background-color: #00E5E5;}
	a.btn     {background: #00E5E5;}
	hr {border-top: 10px dashed #00E5E5;}
}


/* ==========================================================================
   OTHER STYLES
   ========================================================================== */

p {
	margin: 0 0 1em;
}
.linethrough {
	text-decoration: line-through;
	color: #000
}
.share {
	margin: 3em 0;
	font-size: 100%
}
.nextto {
	display: inline-block;
	width: auto;
	vertical-align: top;
	font-size: 100%
}
.round {
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}
.button {
	font-size: 2em;
	border: 2px solid black;
	text-decoration: none;
	padding: 10px 30px
}
.padding {
	padding: 30px 80px
}
.clear {
	clear: both;
	padding: 0;
	margin: 0;
}
.clear-right {
	clear: right;
}
.clear-left {
	clear: left;
}
.hidden {
	display: none !important;
}
.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}
.invisible {
	visibility: hidden;
}
.clearfix:before, .clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after {
	clear: both;
}

/* RESPONSIVE CSS
-------------------------------------------------- */


/* Extra small devices (phones, less than 768px) */

@media only screen and (max-width:767px) {
	header {padding: 20px 20px 20px;}
	.content {
		padding: 0 20px 20px;margin-top: 80vh
	}
	.links-container {
		padding: 10px 20px;
		font-size: 100%;
			border: 2px solid rgba(255, 255, 255, 0.4);
	}
	.quote {
		font-size: 100%;
		margin-bottom: 50vh
	}
	.colophon {
		margin: 60px 0 60px
	}
	p.advert-header, p.link-source {
		font-size: 80%
	}
	p.advert-title {}
	p.advert-sub-text {
		font-size: 100%;
		margin-bottom: 0
	}
	
	.fold-text p {
		font-size:1.2em;
	}
	

	
	
	/*body, html {background-color:#8cbdd6}*/
	
}

/* Small devices (tablets, 768px and up) */

@media only screen and (min-width:768px) {}

/* Medium devices (desktops, 992px and up) */

@media only screen and (min-width:992px) {}

/* Large devices (large desktops, 1200px and up) */

@media only screen and (min-width:1200px) {}

/* Extra Large devices (extra large desktops, 1366px and up) */

@media only screen and (min-width:1365px) {}

/* Extra Large devices (extra large desktops, 1600px and up) */

@media only screen and (min-width:1599px) {}