/* HTML */

@-webkit-keyframes blinker {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

.blink {
  animation: blinker 2s linear infinite;
}

pre {
	white-space: pre-wrap;
	/* css-3 */
	white-space: -moz-pre-wrap;
	/* Mozilla, since 1999 */
	white-space: -pre-wrap;
	/* Opera 4-6 */
	white-space: -o-pre-wrap;
	/* Opera 7 */
	word-wrap: break-word;
	/* Internet Explorer 5.5+ */
	text-align: left;
}

* {
  box-sizing: border-box;
}

body {
    color: #e4e7eb;
    font-family: Hack Nerd Font,Trispace,monospace,sans-serif;
	font-size: 1rem;
    line-height: 1.5;
	margin: 0;
	
}

a {
    color: #1adeca;
    font-family: Hack Nerd Font,Trispace,monospace,sans-serif;
	font-weight: 700;
    word-break: break-all;
}

a:hover {
	color: #efc9a3;
}

.text {
	color: #1adeca;
}

.center {
	text-align: center;	
}

.left {
	text-align: left;	
}

.right {
	text-align: right;
}

#background {
    padding-top: 20vh;
    z-index: -1;
}

#background, #overlay {
    height: 100%;
    position: fixed;
}

#background:after {
    background: rgba(31,41,51,.75);
    content: "";
    height: 100vh;
    left: 0;
    position: absolute;
    top: 0;
    width: 100vw;
}

#bg-1,#bg-2 {
    border-radius: 100%;
    box-shadow: 70vw 40vh 70vw #1adeca;
    height: 40vh;
    -webkit-transform: translate(-70vw,-40vh);
    transform: translate(-70vw,-40vh);
    width: 70vw;
}

#bg-2 {
    box-shadow: 70vw 30vh 70vw #0f8377;
    height: 30vh;
    -webkit-transform: translate(-50vw,-35vh);
    transform: translate(-50vw,-35vh);
}

.fa-rotate {
	vertical-align: super;
}

/* width */
::-webkit-scrollbar {
  width: 1px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #172329;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #1ADECA;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #1ADECA;
}

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 10px; /* Place the button at the bottom of the page */
  right: 10px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #1ADECA; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 5px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
    font-family: Hack Nerd Font,Trispace,monospace,sans-serif;
	font-size: 1rem;
    line-height: 1.5;
  width: 100px;
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* PAGE */

.page {
    padding: 30px;
	background: #23343d;
	border: 0.1rem solid #323f4b;
	border-radius: 30px;
	margin: 30px;
	opacity: 0.8;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* LAYOUT */

/* Header/logo Title */
.header {
  padding: 20px;
  text-align: center;
/* background: #1abc9c; */
  color: #e4e7eb;
}

/* Increase the font size of the heading */
.header h1 {
  font-size: 40px;
}

/* Sticky navbar - toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). The sticky value is not supported in IE or Edge 15 and earlier versions. However, for these versions the navbar will inherit default position */
.navbar {
  overflow: hidden;
  background-color: #000000;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 1;
}

/* Style the navigation bar links */
.navbar a {
  float: left;
  display: block;
  color: #e4e7eb;
  font-family: Hack Nerd Font,Trispace,monospace,sans-serif;
  font-weight: 300;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}


/* Right-aligned link */
.navbar a.right {
  float: right;
}

/* Change color on hover */
.navbar a:hover {
  background-color: #1adeca;
  color: #000000;
}

/* Active/current link */
.navbar a.active {
  background-color: #666;
  color: #e4e7eb;
}

/* Column container */
.row {  
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  -ms-flex: 20%; /* IE10 */
  flex: 12%;
/* background-color: #1ABC9C; */
  padding: 10px;
  border-right: 0.1rem solid #323f4b;
  padding-right: 30px;
}

/* Main column */
.main {   
  -ms-flex: 80%; /* IE10 */
  flex: 88%;
/* background-color: white; */
  padding-left: 10px;
}

/* Fake image, just for this example */
.fakeimg {
  background-color: #aaaaaa;
  width: 100%;
  padding: 20px;
}

/* Footer */
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 15px;
  text-align: center;
  background: #000000;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .row {   
    flex-direction: column;
  }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .navbar a {
    float: none;
    width: 100%;
  }
}

/* Profile divider */

.divider {
  font-weight: 700;
  display: flex;
  align-items: center;
}

.divider::before, .divider::after {
  flex: 1;
  content: '';
  padding: 1px;
  background-color: #323f4b;
  margin: 15px;
}

/* CLASSES */

.bot_color {
    color: #FF00FF;
}

.sysop_color {
    color: #1ADECA;
}

.administrator_color {
    color: #ff6347;
}

.super_moderator_color {
    color: #A284E0;
}

.moderator_color {
    color: #3199D9;
}

.uploader_color {
    color: #00FF00;
}

.vip_color {
    color: #FFFF00;
}

.power_user_color {
    color: #D2B48C;
}

.member_color {
    color: #E4E7EB;
}

/* Avatar */	

.uk-border-circle {
  vertical-align: middle;
  border-radius: 50%;
}

/* About Page */

.bar {
	width: 100%;
	height: 10px;
	border-radius: 10px;
	background-color: #b3b3b3;
	color: white;
	text-align: center;
}

.PHP {
	width: 82.3%;
	height: 100%;
	background-color: #4F5D95;
	float: left;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

.CSS {
	width: 11.6%;
	height: 100%;
	background-color: #563D7C;
	float: left;
}

.TSQL {
	width: 5.7%;
	height: 100%;
	background-color: #E38C00;
	float: left;
}

.JS {
	width: 0.4%;
	height: 100%;
	background-color: #F1E05A;
	float: left;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;		
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* CARDS */

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 280px;
  height: 380px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  border-radius: 10px;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #000000;
  color: #ffffff;
  border-radius: 10px;
}

/* Style the back side */
.flip-card-back {
  background-color: #000000;
  color: #ffffff;
  transform: rotateY(180deg);
  padding: 5px;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* CARD COLUMNS */

/* Create five equal columns that floats next to each other */
.column {
  float: left;
  width: 20%;
  padding: 15px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* FORMS */

.error {
  color: #ff6347;
  font-family: Hack Nerd Font,Trispace,monospace,sans-serif;
  font-weight: 500;	
}

.warn {
  color: #ffff00;
  font-family: Hack Nerd Font,Trispace,monospace,sans-serif;
  font-weight: 500;	
}

.success {
  color: #00ff00;
  font-family: Hack Nerd Font,Trispace,monospace,sans-serif;
  font-weight: 500;	
}

/* CAPS */
#caps {
  display: none;
  color: #ffff00;
  font-family: Hack Nerd Font,Trispace,monospace,sans-serif;
  font-weight: 500;
}

/* Bordered form */
form {
  border: 0px solid #000000;
}

/* Style inputs with type="text", select elements and textareas */
input[type=text], input[type=password], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #000000; /* Black border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
  display: inline-block;
}

/* Set a style for all buttons */
button {
  background-color: #1adeca;
  color: #000000;
  font-family: Hack Nerd Font,Trispace,monospace,sans-serif;
  font-weight: 300;
  padding: 14px 20px;
  border: 1px solid #000000;
  cursor: pointer;
  width: 50%;
}

/* Add a hover effect for buttons */
button:hover {
  background-color: #efc9a3;
  color: #000000;
  opacity: 0.8;
}

/* Center the button set inside this container */
.btncontainer {
  text-align: center;
}

/* Center the avatar image inside this container */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}

/* Avatar image */
.avatar {
  width: 10%;
  border: 1px solid #000000;
  border-radius: 50%;
}

/* The "Forgot password" text */
span.psw {
  font-family: Hack Nerd Font,Trispace,monospace,sans-serif;
  font-size: 1rem;
  float: right;
  padding-right: 30px;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* TABLES */

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

th, td {
  text-align: left;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* COMMENTS */

/* Chat containers */
.comment-container {
  border: 0.1rem solid #323f4b;
  background-color: #1E2832;
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0;
}

/* Darker chat container */
.darker {
  border-color: #ccc;
  background-color: #ddd;
}

/* Clear floats */
.comment-container::after {
  content: "";
  clear: both;
  display: table;
}

/* Style the avatar */
.comment-container img.uk-border-circle {
  width: 60px;
  height: auto;
  margin-right: 20px;
  border-radius: 50%;	
}

/* Style images */
.comment-container img {
  float: left;
  margin-right: 20px;
  border-radius: 50%;
}

/* Style the right image */
.comment-container img.right {
  float: right;
  margin-left: 20px;
  margin-right:0;
}

/* Style time text */
.time-right {
  float: right;
  color: #aaa;
}

/* Style time text */
.time-left {
  float: left;
  color: #999;
}