@font-face {
	/* https://fonts.google.com/specimen/Exo */
    font-family: "Exo";
    src: url("../font/Exo/Exo-VariableFont_wght.ttf");
}

body
{
	background-color: #000000;
	color: #ffffff;
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	font-family: "Exo", sans-serif;
	font-optical-sizing: auto;
}

/* pointer-events: none -- keeps clicking on links working */
body::before
{
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('../img/bgcode.png');
	background-repeat: repeat;
	background-size: 500px auto; /* "zoom" level */
	opacity: 0.1;
	pointer-events: none;
	z-index: 1;
}

/* second div should fill up any leftover vertical space, so the bottom (and top) elements always are affixed in their places */
body > div:nth-of-type(2)
{
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

body div
{
	text-align: center;
}

a:link,
a:visited
{
	color: #4eb1ef;
}
a:hover,
a:focus,
a:active
{
	color: #81c0dd;
}

p
{
	text-shadow: #060505 0 0 1em;
}

/* main content blocks padding */
body > div
{
	padding: 1.5em 4em;
}

/* fade the edges of each block into each other */
body > div:nth-of-type(odd)
{
	background-color: #000000;
}

body > div:nth-of-type(even)
{
	background-image: linear-gradient(
		to bottom,
		#000000 0,
		#151515 1.5em,
		#151515 calc(100% - 1.5em),
		#000000 100%
	);
}

/* last block shouldn't fade back to black, looks weird */
body > div:nth-of-type(even):last-of-type
{
	background-image: linear-gradient(
		to bottom,
		#000000 0,
		#151515 1.5em,
		#151515 100%
	);
}


#content_block #content_inner_block
{
	max-width: 75%;
	margin: 0 auto;
}


.sp_title
{
	font-size: 400%;
	text-shadow: #4eb1ef .1em .1em .5em, #6f53ca -.1em -.1em .5em; /*color | offset-x | offset-y | blur-radius*/
}

.sp_title_first
{
	font-style: normal;
}

.sp_title_second
{
	font-style: oblique 50deg;
	color: #53adb1;
}

/*
-------------------
word_carousel items
-------------------
*/

.word_carousel
{
	display: flex;
	justify-content: center;
	align-items: center;
	/*background-color: #fff;
	border: 1px solid #e8e8e8;*/
	border-radius: 0.3rem;
	padding: 1em 3rem;
	box-shadow: 0 5px 5px #0005;
	text-align: left;

	font-size: 150%;
}

/* need to reset ul for webkit to work */
ul
{
	margin: 0;
	padding: 0;
}

.word_carousel ul
{
	overflow: hidden;
	position: relative;
	line-height: 2rem;
	height: 2rem;
}

li
{
	display: block;
	height: 100%;
	padding-left: .5rem;
	color: #53adb1;
	font-style: oblique 50deg;
	animation: rotate-the-words 34s infinite;
}


@media (max-width: 600px) {
  .word_carousel {
    flex-direction: column;
  }
}

@keyframes rotate-the-words {
  0%,      4.706%  { transform: translateY(0%); }
  5.882%,  10.588% { transform: translateY(-100%); }
  11.765%, 16.471% { transform: translateY(-200%); }
  17.647%, 22.353% { transform: translateY(-300%); }
  23.529%, 28.235% { transform: translateY(-400%); }
  29.412%, 34.118% { transform: translateY(-500%); }
  35.294%, 40.000% { transform: translateY(-600%); }
  41.176%, 45.882% { transform: translateY(-700%); }
  47.059%, 51.765% { transform: translateY(-800%); }
  52.941%, 57.647% { transform: translateY(-900%); }
  58.824%, 63.529% { transform: translateY(-1000%); }
  64.706%, 69.412% { transform: translateY(-1100%); }
  70.588%, 75.294% { transform: translateY(-1200%); }
  76.471%, 81.176% { transform: translateY(-1300%); }
  82.353%, 87.059% { transform: translateY(-1400%); }
  88.235%, 92.941% { transform: translateY(-1500%); }
  94.118%, 98.824% { transform: translateY(-1600%); }
  100%             { transform: translateY(-1700%); }
}