/*
8"""8 8"""" 8"""8  8""""8 8""""8   8   8 8""""8 8""""
8   8 8     8   8  8    8 8    8   8   8 8    8 8
8e  8 8eeee 8eee8e 8e   8 8eeee8ee 8e  8 8e   8 8eeee
88  8 88    88   8 88   8 88     8 88  8 88   8 88
88  8 88    88   8 88   8 88     8 88  8 88   8 88
88  8 88eee 88   8 88eee8 88eeeee8 88ee8 88eee8 88eee

[website] https://www.nerdbude.com
[mail] post@nerdbude.com
[twitter] @PH_0x17
[github] https://www.github.com/nerdbude
*/
@font-face {
   font-family: 'berkeley';
   src: url('/fonts/BerkeleyMono-Regular.woff') format('woff'),
	url('/fonts/BerkeleyMono-Regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}

body {
  font-family: 'berkeley';
  color: #282A36;
  font-size: 14px;
  font-weight: 100;
  padding: 5px;
  margin-top: 20px !important;
  margin: 0 auto;
  /*margin-right: 25%;
  margin-left: 25%;*/
  background-color: #ffffff;
  min-height: 100%;
  {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
  /* TEST */
  border-width: 2px;
  border-color: #282A36;
  border-style: solid;
  width: 50%;
}

@media screen and (max-width: 1000px) {
	body {
		width: 100%;
	}
}


html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

table {
  width: 100%;
  font-size: 14px;
}

tp {
  color: #8d8d8d;
}

st {
  color: #8d8d8d;
  font-size: 14px;
}

next {
  color: #21222C;
  /* background-color: #FF5555; */
  background-color: #F1FA8C;
  font-size: 20px;
  width: 100%;
}

pre {
  padding: 0;
  margin: 0 0 0px 0;
}

ul {
  padding: 0;
}

hr {
  color: #282A36;
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  width: 90%;
  border-style: solid;
  border-width: 1px;
}

/* for the animations */

h1 {font-size: 14px; padding: 3px; margin: 0px; color: #ffffff; background-color: #282A36;}
h2 {font-size: 14px; padding: 0px; margin: 0px; color: #ffffff; background-color: #282A36;}
h3 {font-size: 14px; padding: 0px; margin: 0px;}

div.gallery {
  margin: 10px;
  float: left;
  /* width: 180px; */
}

div.gallery img {
  width: 200px;
  height: auto;
}

div.gallery img:hover {
  border: 1px solid #afd75f;
}

edit {color: #ff0087;}

.ascii-art {
    font-size: 6px;
    white-space: pre;
    color: #afd75f;
}

#terminal {overflow: hidden;
  white-space: nowrap;
  animation: reveal 4s linear;}

#firstbox {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 10px;
  border-style: solid;
  border-color: #ffffff;
  border-width: 1px;
  font-size: 14px;
}

#secondbox {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 10px;
  border-style: solid;
  border-color: #ffffff;
  border-width: 1px;
  font-size: 14px;
}

#thirdbox {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 10px;
  border-style: solid;
  border-color: #ffffff;
  border-width: 1px;
  font-size: 14px;
}

#backbar {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 10px;
  font-size: 14px;
}

#contentbox {
  width: 90%;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 15px;
  border-style: solid;
  border-color: #ffffff;
  border-width: 0px;
  font-size: 14px;
}

#titlebox {
  width: 40%;
  margin: 0 auto;
  align-content: center;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 10px;
  border-style: solid;
  border-color: #ffffff;
  border-width: 1px;
  font-size: 16px;
}

/* ABOUT */

.aboutlabel		{
     background-color: #ffffff;
		 border-style: solid;
		 border-width: 1px;
		 border-color: #ffffff;
		 padding-left: 15px;
		 padding-right: 15px;
		 color: #1c1c1c;
     font-size: 14px;
	 }

#whitebox {
  margin: 0 auto;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  border-style: solid;
  border-color: #ffffff;
  border-width: 1px;
  font-size: 16px;
}

/* ----------- */


#footer {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 10px;
  border-style: solid;
  border-color: #ffffff;
  border-width: 1px;
  background-color: #1c1c1c;
  font-size: 14px;
  position: inherit;
  bottom: 0;
  right: 0;
  margin-bottom: 10px;
}

span {
  padding: 0;
  margin: 0;
}

a {
  color: #FF5555;
  font-size: 14px;
  transition-duration: 0.2s;
  padding-top: 3px;
}

a.front {
  text-decoration: none;
  color: #e4e4e4;
  font-size: 14px;
  transition-duration: 0.2s;
  padding-top: 3px;}

a:hover {
  text-decoration: underline;
  color: #21222C;
  font-size: 14px;
  background-color: #FF5555;
}

a.front:hover {
  color: #1c1c1c;
  font-size: 14px;
  background-color: #afd75f;
}

a:active {
  color: #FF5555;
  font-size: 14px;
}

a.front:active {
  color: #0087ff;
  font-size: 14px;
}

a.tag {
  text-decoration: none;
  color: #d75fd7;
  transition-duration: 0.2s;
  padding-top: 3px;
  font-size: 14px;
}

a.tag:hover {
  color: #1c1c1c;
  background-color: #d75fd7;
  font-size: 14px;
}

a.tag:active {
  color: #d75fd7;
  font-size: 14px;
}

p {
  padding: 0;
  margin: 10px 0 30px 0;
  font-size: 14px;
}

img {
  width: 100%;
  max-width: 100%;
}

.adminpicture {
	padding-right: 15px;
	padding-left: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
}

b {
  color: #FF79C6;
  background-color: #21222C;
  font-size: 12px;
}

header {
  width: 100%;
  top: 0;
  background-color: #1c1c1c;
  height: auto;
  font-size: 14px;
  padding-bottom: 10px;
  margin-bottom:10px;
  letter-spacing: 0px;
  border-bottom: 1px dashed #afd75f;
}

th {
  text-align: left;
  font-weight: 100;
  padding-right: 15px;
  font-size: 14px;
}

th.desc {
  color: #dadada;
  font-size: 14px;
}
th.date {color: #dadada; font-size: 14px;}
th.time {color: #dadada; font-size: 14px;}
th.change {color: #e4e4e4; font-size: 14px;}
th.red {color: #ff005f; font-size: 14px;}
th.green {color: #afd787; font-size: 14px;}
th.yellow {color: #ffff5f; font-size: 14px;}
th.user {color: #0087ff; font-size: 14px;}

#content {
  margin-left: 10%;
  margin-right: 10%;
  font-size: 14px;
  /* TEST */
  border-width: 1px;
  border-color: #ffffff;
  border-style: solid;
  width: 60%;
}

@media screen and (max-width: 800px) {
	#content {
		width: 100%;
	}
}

#pictures {
  margin-left: 10%;
  margin-right: 10%;
}



#cssyn {
  background: transparent;
  padding: 15px 0 15px 0px;
  margin: 0 0 2px 0;
  width: 100%;
  border-style: solid;
  border-color: #afd75f;
  border-width: 1px;
  counter-reset: line;
  font-size: 14px;
  }

pre		{
  font-family: 'berkeley';
	padding-left: 15px;
  white-space: pre-line;
  font-size: 14px;
}

ln {
  font-family: 'berkeley';
  white-space:pre-wrap;
  font-size: 14px;
}

ln::before 	{content: counter(line, decimal-leading-zero);
		 background: #1c1c1c;
		 color: #444444;
		 padding: 0 10px 0;
		 margin: 0 10px 0 0;
		 border-right: 1px solid #444444;
		 counter-increment: line;
		 -webkit-user-select: none;
     font-size: 14px;
	 	}

.label		{background-color: #afd75f;
		 border-style: solid;
		 border-width: 1px;
		 border-color: #afd75f;
		 padding-left: 15px;
		 padding-right: 15px;
		 color: #1c1c1c;
     font-size: 14px;
	 }


.unixshell 	{color: #87afd7;}
.comment	{color: #8a8a8a;}
.url		{color: #00ffd7; font-style: italic; text-decoration: underline;}
.value		{color: #875fff;}
.header-file	{color: #afd75f;}
.selector	{color: #ff5f5f;}
.subselector	{color: #ffff5f;}
.unit		{color: #ff5f87;}
.name   {color: #ff63b3;}

.tag            {color: #afd75f;}
.important      {margin-left: -18px;}
.link		{color: #afd75f; background: #272727;}
.title          {display: inline-block; margin-bottom: 20px; margin-top: 20px;}
.subtitle       {display: inline-block; margin: 20px 0;}
.filter         {display:block; margin-bottom: 30px; margin-top: -20px;}
.description    {background: #272727; padding: 10px 0 10px 10px; margin-top: 0px;}

.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
.container {
  padding: 2px 16px;
}