/* Aim Academy motd_main style sheet */

html, body {
	position: relative;
	background-image: url("http://mag.site.nfoservers.com/MMOTD/css/motd_main-Bg-2020.png");
	background-color: #141414;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	margin: 0 auto;
	bottom: 0;
	max-height: 540px;
	max-width: 1080px;
	min-width: 1080px;
	overflow: hidden;
	font-size: 14px;
	font-weight: bold;
	font-family: Tahoma, Geneva, sans-serif;
	text-align: center;
	z-index: -99;
	/* font-family: 'Roboto Condensed'; */
}

.pulse {
    position: absolute;
	background-image: url("http://mag.site.nfoservers.com/MMOTD/css/motd_main-Bg-2020_Light.png");
    max-width: 1080px;
    min-width: 1080px;
    height: 100%; 
    background-repeat: no-repeat;
    overflow: hidden;
	z-index: -98;
	top: 0;

	-webkit-animation-delay: 3.50s;
	-webkit-animation-duration: 4s;
	-webkit-animation-name: fadeillum;
	-webkit-animation-direction: alternate;
	-webkit-animation-iteration-count: infinite;
	animation-delay: 0.0s;
	animation-duration: 4.0s;
	animation-name: fadeillum;
	animation-direction: alternate;
	animation-iteration-count: infinite;
}


@keyframes fadeillum {
	0% {opacity: 0.0;}
	100% {opacity: 1.0;}
}

@-webkit-keyframes fadeillum {
	0% {opacity: 0.50;}
	100% {opacity: 1.0;}
}


#li-1 {
	animation: li-1 4.25s 1;
	animation-direction: normal;
	animation-delay: -1s;
}

#li-2 {
	animation: li-2 3.75s 1;
	animation-direction: normal;
	animation-delay: -1s;
}

#li-3 {
	animation: li-3 3.25s 1;
	animation-direction: normal;
	animation-delay: -1s;
}

#li-4 {
	animation: li-4 3.75s 1;
	animation-direction: normal;
	animation-delay: -1s;
}

#li-5 {
	animation: li-5 4.25s 1;
	animation-direction: normal;
	animation-delay: -1s;
}

@keyframes li-1 {
	0% {
		transform: translateY(-120px);
	}
	75% {
		transform: translateY(-120px);
	}
	100% {
		transform: translateY(0px);
	}
}

@-moz-keyframes li-1 {
	0% {
		transform: translateY(-120px);
	}
	75% {
		transform: translateY(-120px);
	}
	100% {
		transform: translateY(0px);
	}
}

@-webkit-keyframes li-1 {
	0% {
		transform: translateY(-120px);
	}
	75% {
		transform: translateY(-120px);
	}
	100% {
		transform: translateY(0px);
	}
}

@keyframes li-2 {
	0% {
		transform: translateY(-120px);
	}
	75% {
		transform: translateY(-120px);
	}
	100% {
		transform: translateY(0px);
	}
}

@-moz-keyframes li-2 {
	0% {
		transform: translateY(-120px);
	}
	75% {
		transform: translateY(-120px);
	}
	100% {
		transform: translateY(0px);
	}
}

@-webkit-keyframes li-2 {
	0% {
		transform: translateY(-120px);
	}
	75% {
		transform: translateY(-120px);
	}
	100% {
		transform: translateY(0px);
	}
}

@keyframes li-3 {
	0% {
		transform: translateY(-120px);
	}
	75% {
		transform: translateY(-120px);
	}
	100% {
		transform: translateY(0px);
	}
}

@-moz-keyframes li-3 {
	0% {
		transform: translateY(-120px);
	}
	75% {
		transform: translateY(-120px);
	}
	100% {
		transform: translateY(0px);
	}
}

@-webkit-keyframes li-3 {
	0% {
		transform: translateY(-120px);
	}
	75% {
		transform: translateY(-120px);
	}
	100% {
		transform: translateY(0px);
	}
}

@keyframes li-4 {
	0% {
		transform: translateY(-120px);
	}
	75% {
		transform: translateY(-120px);
	}
	100% {
		transform: translateY(0px);
	}
}

@-moz-keyframes li-4 {
	0% {
		transform: translateY(-120px);
	}
	75% {
		transform: translateY(-120px);
	}
	100% {
		transform: translateY(0px);
	}
}

@-webkit-keyframes li-4 {
	0% {
		transform: translateY(-120px);
	}
	75% {
		transform: translateY(-120px);
	}
	100% {
		transform: translateY(0px);
	}
}

@keyframes li-5 {
	0% {
		transform: translateY(-120px);
	}
	75% {
		transform: translateY(-120px);
	}
	100% {
		transform: translateY(0px);
	}
}

@-moz-keyframes li-5 {
	0% {
		transform: translateY(-120px);
	}
	75% {
		transform: translateY(-120px);
	}
	100% {
		transform: translateY(0px);
	}
}

@-webkit-keyframes li-5 {
	0% {
		transform: translateY(-120px);
	}
	75% {
		transform: translateY(-120px);
	}
	100% {
		transform: translateY(0px);
	}
}

.svg-wrapper {
	position: relative;
	top: 50%;
	margin: 0 auto;
	height: 45px; 
	width: 183;  
	background-color: rgba(10, 10, 10, 0.25);
	backdrop-filter: blur(2px);
}

.shape-left {
	stroke-dasharray: 120 540;
	stroke-dashoffset: -263;
	stroke-width: 6px;
	stroke: rgb(0, 255, 255);
	border-bottom: 5px solid black;
	transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
	fill: transparent;
	/* fill: #000;
	   fill-opacity: 0.3; */
}

.shape-center {
	stroke-dasharray: 120 540;
	stroke-dashoffset: -263;
	stroke-width: 6px;
	stroke: rgb(0, 255, 255);
	border-bottom: 5px solid black;
	transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
	fill: transparent;
	/* fill: #000;
	   fill-opacity: 0.3; */
}

.shape-right {
	stroke-dasharray: 120 540;
	stroke-dashoffset: -263;
	stroke-width: 6px;
	stroke: rgb(0, 255, 255);
	border-bottom: 5px solid black;
	transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
	fill: transparent;
	/* fill: #000;
	   fill-opacity: 0.3; */
}

.text {
	font-family: 'Roboto Condensed';
	/* font-family: 'FoughtKnight'; */
	font-size: 12px;
	line-height: 50px;
	letter-spacing: 5px;
	color: #fff;
	top: -48px;
	position: relative;
}

.svg-wrapper:hover .shape-left {
	stroke-width: 2px;
	stroke-dashoffset: 0;
	stroke-dasharray: 455; // 150 for open top/bottom rotation
}

.svg-wrapper:hover .shape-center {
	stroke-width: 2px;
	stroke-dashoffset: 0;
	stroke-dasharray: 455; // 150 for open top/bottom rotation
}

.svg-wrapper:hover .shape-right {
	stroke-width: 2px;
	stroke-dashoffset: 0;
	stroke-dasharray: 455; // 150 for open top/bottom rotation
}

a {
	display: block;
	padding-left: 2px;
	height: 48px;
	width: 180px;
	z-index: 99;
}

a.glow, a.glow:hover, a.glow:focus {
	text-decoration: none;
	color: #ddd;
	text-shadow: 2px 2px 1px #000;
	-webkit-transition: 425ms linear 0s;
	-moz-transition: 425ms linear 0s;
	-o-transition: 425ms linear 0s;
	transition: 425ms linear 0s;
	outline: 0 none;
}

a.glow:hover, a.glow:focus {
	color: #eee;
	text-shadow: -1px 1px 8px #00FFFF, 1px -1px 8px #00FFFF;
}

a.ext {
	display: inline;
}

a.ext:link    { text-decoration:underline; color: #00FFFF;}
a.ext:visited { text-decoration:underline; color: #00FFFF;}
a.ext:hover   { text-decoration:underline; color: #AAFFFF;}
a.ext:focus   { text-decoration:underline; color: #00FFFF;}
a.ext:active  { text-decoration:underline; color: #00FFFF;}

ul {
	display: inline-block;
	list-style-type: none;
  
	margin-left: 5px;
	padding-left: 5px;
	margin-right: 5px;
	padding-right: 5px;
	margin-top: 0px;
	padding-top: 4px;
	margin-bottom: 5px;
	padding-bottom: 5px;
	overflow: auto;
}

li {
	float: left;
}

.logo {
	content: url("http://mag.site.nfoservers.com/MMOTD/css/motd_main-Logo-2020.png");
	z-index: 90;
	position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -7%);
	pointer-events: none; /* Allow plexus interactivity while keeping logo 3D */
}

.container_avatar {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin: 0px;	
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	margin: 0 auto;
}

.bg-illum {
	opacity: 0.50;
	-webkit-animation-delay: 3.50s;
	-webkit-animation-duration: 3s;
	-webkit-animation-name: fadeillum;
	-webkit-animation-direction: alternate;
	-webkit-animation-iteration-count: infinite;
	animation-delay: 0.0s;
	animation-duration: 3.0s;
	animation-name: fadeillum;
	animation-direction: alternate;
	animation-iteration-count: infinite;
}

@keyframes fadeillum {
	0% {opacity: 0.25;}
	100% {opacity: 1.0;}
}

@-moz-keyframes fadeillum {
	0% {opacity: 0.25;}
	100% {opacity: 1.0;}
}

@-webkit-keyframes fadeillum {
	0% {opacity: 0.50;}
	100% {opacity: 1.0;}
}

.bottom-div {
	bottom: 0;
	margin-bottom:3px;
    position: absolute;
    margin-left: 50%;
	transform: translate(-50%, -50%);
	max-height: 6px;
	min-height: 6px;
	max-width: 1080px;
	font-size: 8px;
	color: #0aa;
	text-shadow: 1px 1px 8px #000, -1px -1px 8px #000, 1px -1px 8px #000, -1px 1px 8px #000;
	z-index: 102;
}


/* Top Ranked Player Avatar - Center Orientation */
.avatar::before, .avatar::after, .avatar .container_avatar{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	min-width: 214px;
}

.avatar {
	display: inline-block;
	text-align: center;
	width: 194px;
	height: 194px;
	top: 0;
	margin-top: 12.35em;
	background: url("https://avatars.fastly.steamstatic.com/ee780f45e71507bc3aeca3a9a86ee2d309e6d16b_full.jpg") no-repeat 50%/70% rgba(0, 0, 0, 0.1);	box-shadow: inset 0 0 0 1px rgba(0, 153, 153, 0.5);
	z-index: 99;
	position: fixed;
	pointer-events: none; /* Allow plexus interactivity while keeping logo 3D */
}

.avatar::before, .avatar::after {
	content: "";
	z-index: -1;
	margin: -5%;
	box-shadow: inset 0 0 0 2px;
	animation: clipMe 8s linear infinite;
	color: cyan;
}

.avatar::before {
	animation-delay: -4s;
}

@keyframes clipMe {
	0%, 100% {
		clip: rect(0px, 214px, 2px, 0px);
	}
	25% {
		clip: rect(0px, 2px, 214px, 0px);
	}
	50% {
		clip: rect(210px, 214px, 214px, 0px);
	}
	75% {
		clip: rect(0px, 214px, 214px, 210px);
	}
}

@-moz-keyframes clipMe {
	0%, 100% {
		clip: rect(0px, 204px, 2px, 0px);
	}
	25% {
		clip: rect(0px, 2px, 204px, 0px);
	}
	50% {
		clip: rect(200px, 204px, 204px, 0px);
	}
	75% {
		clip: rect(0px, 204px, 204px, 200px);
	}
}

@-webkit-keyframes clipMe {
	0%, 100% {
		clip: rect(0px, 204px, 2px, 0px);
	}
	25% {
		clip: rect(0px, 2px, 204px, 0px);
	}
	50% {
		clip: rect(200px, 204px, 204px, 0px);
	}
	75% {
		clip: rect(0px, 204px, 204px, 200px);
	}
}

.container_avatar {
	flex-direction: row;
	justify-content: center;
}

.avatar {
	animation: avatar 4s 1;
	animation-direction: normal;
	animation-delay: -.6s;
}

@keyframes avatar {
	0% {
		transform: translateY(-400px) /* rotateX(0deg) */ rotateY(0deg);
	}
	10% {
		transform: translateY(-400px) /* rotateX(0deg) */ rotateY(0deg);
	}
	100% {
		transform: translateY(0px) /* rotateX(360deg) */ rotateY(360deg);
	}
}

@-moz-keyframes avatar {
	0% {
		transform: translateY(-400px) /* rotateX(0deg) */ rotateY(0deg);
	}
	10% {
		transform: translateY(-400px) /* rotateX(0deg) */ rotateY(0deg);
	}
	100% {
		transform: translateY(0px) /* rotateX(360deg) */ rotateY(360deg);
	}
}

@-webkit-keyframes avatar {
	0% {
		transform: translateY(-400px) /* rotateX(0deg) */ rotateY(0deg);
	}
	10% {
		transform: translateY(-400px) /* rotateX(0deg) */ rotateY(0deg);
	}
	100% {
		transform: translateY(0px) /* rotateX(360deg) */ rotateY(360deg);
	}
}

/* Top Ranked Player Avatar - Bottom Orientation
.avatar::before, .avatar::after, .avatar {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.avatar {
	width: 112px;
	height: 112px;
	margin-left: 37.6%;
	margin-top: 380px;
	background: url("https://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/cc/cc86c8f1821d6f04fbbb3f697916a337a1c6ea20_full.jpg") no-repeat 50%/70% rgba(0, 0, 0, 0.1);	color: #00FFFF;
	box-shadow: inset 0 0 0 1px rgba(0, 153, 153, 0.5);
	z-index: 99;
	position: fixed;
}
.avatar::before, .avatar::after {
	content: "";
	z-index: -1;
	margin: -5%;
	box-shadow: inset 0 0 0 2px;
	animation: clipMe 8s linear infinite;
}
.avatar::before {
	animation-delay: -4s;
}

@keyframes clipMe {
	0%, 100% {
		clip: rect(0px, 2px, 124px, 0px);
	}
	25% {
		clip: rect(0px, 124px, 2px, 0px);
	}
	50% {
		clip: rect(0px, 124px, 124px, 120px);
	}
	75% {
		clip: rect(120px, 124px, 124px, 0px);
	}
}

@-moz-keyframes clipMe {
	0%, 100% {
		clip: rect(0px, 2px, 124px, 0px);
	}
	25% {
		clip: rect(0px, 124px, 2px, 0px);
	}
	50% {
		clip: rect(0px, 124px, 124px, 120px);
	}
	75% {
		clip: rect(120px, 124px, 124px, 0px);
	}
}

@-webkit-keyframes clipMe {
	0%, 100% {
		clip: rect(0px, 2px, 124px, 0px);
	}
	25% {
		clip: rect(0px, 124px, 2px, 0px);
	}
	50% {
		clip: rect(0px, 124px, 124px, 120px);
	}
	75% {
		clip: rect(120px, 124px, 124px, 0px);
	}
}
*/


/* Terminal - Center Orientation */
body {
	background-color: #111;
	color: #ccc;
	text-shadow: 1px 1px 1px black;
}

.var-highlight {
	color: #FC7215;
}

.string-highlight {
	color: #00c8c8;
	text-shadow: 0px 0px 1px black;
	font-weight: 900;
}

.string-name-highlight {
	color: cyan;
	text-shadow: 0px 0px 4px aqua;
	font-weight: 900;
}

pre {
	background-color: rgba(10, 10, 10, 0.25);
	backdrop-filter: blur(2px);
	max-width: 466px;
	z-index: 99;
}

@font-face {
	font-family: "Inconsolata-Regular";
	src: url("fonts/Inconsolata-Regular.ttf") format("truetype");
}

#coder {
	font-size: 0.9em;
	font-family: "FSEX300";
	font-family: "Inconsolata-Regular";
	font-family: "Courier New";
	text-align: left;
	bottom: 0;
    position: absolute;
    margin-left: 50%;
	transform: translate(-50%, 0%);
	font-weight: 1;
	z-index: 100;
	pointer-events: none; /* Allow plexus interactivity while keeping logo 3D */
}
#coder:after {
	content: "_";
	color: cyan;
	animation: blink 500ms linear infinite alternate;
	text-shadow: 0px 0px 4px cyan;
	font-weight: 900;
}

@keyframes blink {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-moz-keyframes blink {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes blink {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* Terminal - Bottom orientation
body {
	background-color: #111;
	color: #ccc;
	text-shadow: 1px 1px 1px black;
}

.var-highlight {
	color: #FC7215;
}

.string-highlight {
	color: #00c8c8;
	text-shadow: 0px 0px 1px black;
	font-weight: 900;
}

.string-name-highlight {
	color: cyan;
	text-shadow: 0px 0px 4px cyan;
	font-weight: 900;
}

pre {
	background-color: rgba(20, 20, 20, 0.45);
	max-width: 466px;
}

#coder {
	font-size: 0.9em;
	margin: 0;
	font-family: "Courier New";
	text-align: left;
	margin-top: 335px;
	margin-left: 50.7%;
}
#coder:after {
	content: "_";
	color: cyan;
	animation: blink 500ms linear infinite alternate;
	text-shadow: 0px 0px 4px cyan;
	font-weight: 900;
}

@keyframes blink {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-moz-keyframes blink {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes blink {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
*/

/* PLEXUS */
.container_particles-js {
	position: absolute;
	top: 0;
	left: 50%;
	max-width: 1080px;
	max-height: 516px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	float: left;
	/* padding-top: 4.5%; */
	z-index: -97;
}

#particles-js {
	max-width: 1080px;
	width: 85.25%;
	height: calc(vw * .5);
	max-height: 516px;
	position: fixed;
	display: flex;
	flex-direction: row;
	justify-content: center;
	z-index: 98;
	float: left;
}