html { 
	width:100%; 
	height:100%; 
	background-color: #000000;
	overflow-x: hidden;
	overflow-y: hidden; 
  position: relative;
	margin: 0px;
}

body {	
	margin: 0px;
	background-image: url("/assets/image/background.png");
	background-position: center;
	background-size: auto 100%;
	background-repeat: no-repeat, repeat;	
}

p {
	font-family: "Trebuchet MS", Helvetica, sans-serif;
}

.HELP_COLOR	{
	color: rgb(127, 127, 127);
}
.PROMPT_BG_COLOR {
	color: rgb(56, 56, 56);
}
.PROMPT_TEXT_COLOR {
	color: rgb(240, 180, 24);
}
.PROMPT_TITLE_COLOR	{
	color: rgb(255, 255, 255);
}
.INPUT_TEXT_COLOR {
	color: rgb(240, 180, 24);
}
.INPUT_BG_COLOR	{
	color: rgb(56, 56, 56);
}
.REFRESH_TITLE_COLOR {
	color: rgb(240, 180, 24);
}
.REFRESH_TEXT_COLOR	{
	color: rgb(255, 255, 255);
}
.REFRESH_BG_COLOR	{
	color: rgb(56, 56, 56);
}

.console {
	z-index: 99 !important;
	position: absolute;

	margin: 0px;
	background-image: url("../image/console.png");
	background-size: 100% 100%;
	background-repeat: no-repeat, repeat;	
	
	overflow-x: hidden;
	overflow-y: hidden; 

	width: 100%;
	height: 50%;
}

.console-msg {
	overflow-x: hidden;
	overflow-y: scroll; 
	width: 100%;
	height: 90%;
	margin-left: 25px; 
}

.CONSOLE_TEXT {
	font-family: "Arial";
	color: rgb(240, 180, 24);
	font-size: var(--fontSize, 0.875rem); 
	font-weight:0;
}
	
.dev-tag {
	color: rgb(240, 180, 24);
	
	text-shadow: 0 0 5px rgb(240, 180, 63, 2);
	
	font-size: var(--fontSize, 0.675rem); 
	font-weight: var(--fontWeight, 600); 

	-webkit-animation: HL_TITLE 1s ease-in-out infinite alternate;
	-moz-animation: HL_TITLE 1s ease-in-out infinite alternate;
	animation: HL_TITLE 1s ease-in-out infinite alternate;
}
	
.top10-tag {
	color: rgb(240, 180, 24);
	
	text-shadow: 0 0 5px rgb(240, 180, 63, 2);
	
	font-size: var(--fontSize, 0.6rem); 
	font-weight: var(--fontWeight, 600); 
}
	
.HL_TITLE {
	margin: auto;
	color: rgb(240, 180, 24);
	
	text-shadow: 0 0 5px rgb(240, 180, 63, 2);
	
	font-size: var(--fontSize, 1.675rem); 
	font-weight: var(--fontWeight, 600); 

	position: absolute; 
	top:15%;
	width:100%; 
	text-align: center; 

	-webkit-animation: HL_TITLE 1s ease-in-out infinite alternate;
	-moz-animation: HL_TITLE 1s ease-in-out infinite alternate;
	animation: HL_TITLE 1s ease-in-out infinite alternate;
}
	
.HL_TITLE_OTHER {
	margin: auto;
	color: rgb(240, 180, 24);
	
	text-shadow: 0 0 5px rgb(240, 180, 63, 2);
	
	font-size: var(--fontSize, 1.675rem); 
	font-weight: var(--fontWeight, 600); 

	-webkit-animation: HL_TITLE 1s ease-in-out infinite alternate;
	-moz-animation: HL_TITLE 1s ease-in-out infinite alternate;
	animation: HL_TITLE 1s ease-in-out infinite alternate;
}

.HL_TITLE_ALT {
	margin: auto;
	color: rgb(240, 180, 24);
	
	text-shadow: 0 0 5px rgb(240, 180, 63, 2);
	
	font-size: var(--fontSize, 1.675rem); 
	font-weight: var(--fontWeight, 600);
}

@keyframes HL_TITLE {
	from {
		text-shadow: 0 0 5px rgb(240, 180, 63);
	}
	to {
		text-shadow: 0 0 5px rgb(240, 180, 63), 0 0 5px rgb(240, 180, 63);
	}
  }

.HL_BUTTON {
	color: rgb(240, 180, 63);
    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma;
    font-size: var(--fontSize, 1.375rem);
    font-weight: var(--fontWeight, 600);
    letter-spacing: 0.05em;
    text-align: center;
	user-select: none;
	text-decoration: none;
}

.HL_BUTTON:hover {
	text-shadow: 0 0 5px rgb(240, 180, 63), 0 0 5px rgb(240, 180, 63), 0 0 5px rgb(240, 180, 63, 2), 0 0 5px rgb(240, 180, 63, 2);
	color: rgb(255, 242, 66);
	filter: blur(3px);
	-webkit-filter: blur(3px);
 }
 
.HL_BUTTON_SMALL {
	color: rgb(240, 180, 63);
    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma;
    font-size: var(--fontSize, 0.987rem);
    font-weight: var(--fontWeight, 600);
    letter-spacing: 0.05em;
    text-align: center;
	user-select: none;
	text-decoration: none;
}

.HL_BUTTON_SMALL:hover {
	text-shadow: 0 0 5px rgb(240, 180, 63), 0 0 5px rgb(240, 180, 63), 0 0 5px rgb(240, 180, 63, 2), 0 0 5px rgb(240, 180, 63, 2);
	color: rgb(255, 242, 66);
	filter: blur(3px);
	-webkit-filter: blur(3px);
 }

.twitter-timeline-continer {
	opacity: 1;
}

.version {
	padding-top: 10px;
}

@media only screen and (max-width: 600px) {
  .twitter-timeline-continer { opacity: 0; }
  .version { padding-top: 35px; }
}

@media only screen and (min-width: 600px) {
  .twitter-timeline-continer { opacity: 0; }
  .version { padding-top: 35px; }
}

@media only screen and (min-width: 768px) {
   .twitter-timeline-continer { opacity: 0; }
   .version { padding-top: 10px; }
} 

@media only screen and (min-width: 992px) {
  .twitter-timeline-continer { opacity: 0; }
  .version { padding-top: 10px; }
} 

@media only screen and (min-width: 1200px) {
  .twitter-timeline-continer { opacity: 1; }
  .version { padding-top: 10px; }
}

.squid-main {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 584px;
	height: 190px;
	margin-left: -292px;
	margin-top: -95px;
}

.squid {
	animation: rotation 5s infinite linear; 
	z-index: -100;
	
	transition: all 1s;
}

@keyframes rotation {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(359deg);
	}
}

.alignleft {
	float: left;
}

.alignright {
	float: right;
	margin-left: -250px; 
}

.footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	color: white;
	text-align: center;
}

#stats {
	font-family: 'Roboto', sans-serif;
	border-collapse: collapse;
	width: 100%;
}

#stats td, #stats th {
	border: 1px solid #ddd;
	padding: 8px;
}

#stats tr {
	color: white;
}

#stats tr:hover {
	color: black;
	background-color: #ddd;
}

#stats th {
	padding-top: 12px;
	padding-bottom: 12px;
	text-align: left;
	background-color: rgb(240, 180, 24);
	color: white;
}

.table-wrapper{
  overflow-y: scroll;
  height: 150px;
}

.table-wrapper th{
    position: sticky;
    top: 0;
}

table{
	border-collapse: collapse;
	width: 100%;
}

td,th{
	padding: 10px;
	text-align: center;
}

.c4a1 {
    color: var(--fillColorAfter, #656463);
    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode",
        "Lucida Sans", Tahoma;
    font-size: var(--fontSize, 1.175rem);
    text-transform: uppercase;
    font-weight: var(--fontWeight, 600);
    letter-spacing: 0.05em;
    text-align: center;
    user-select: none;
}

.c4a1--fixed {
    position: fixed;
    transform: translateY(65vh);
    width: 100%;
}

.c4a1 .char {
    --sp: var(--speed, 10);
    --delay: calc(1ms * var(--sp) * var(--char-index));
    animation: c4_fadeIn 0s linear var(--delay) both,
        c4_fillColor calc(var(--fillSpeed, 250) * 1ms) linear var(--delay) both,
        c4_fadeOut 2s linear
            calc(var(--totalCharacters) * var(--sp) * 1ms + 4000ms) forwards;
}

@keyframes c4_fadeIn {
    from {
        opacity: 0;
    }
}

@keyframes c4_fadeOut {
    to {
        opacity: 0;
    }
}

@keyframes c4_fillColor {
    from {
        color: var(--fillColor, #b76a35);
    }
}