@font-face {
    font-family: 'ball';
    src: url('../font/pinball.ttf');
}

@font-face {
    font-family: 'withheld';
    src: url('../font/withheld.woff');
}

@font-face {
  font-family: 'alagard';
  src: url('../font/alagard.ttf');
}


@font-face {
  font-family: 'Montserrat';
  src: url('../font/Montserrat.ttf');
}


@font-face {
  font-family: 'Quantico';
  src: url('../font/Quantico.ttf');
}


/* hljs */
code.hljs{
  background-color: #151620!important;
	font-size: 0.8em !important
}

td.hljs-ln-numbers {

  padding-right: 10px !important;
  color: #8C8C8C;
}

/* Remove unwanted */
.row {
  padding: 0px;
  margin: 0px;
}

li {
  list-style: none;
}

a:hover, a:visited, a, li.pub
{
  text-decoration: none;
  color: #BCBCBC;
}

/* Here we go */

html, body {
  height: 100%;
  color: #eaeaea;
  background-color: black;
  font-family: verdana;
}

#main
{
  display: flex;
  min-height: 100%;
}

#save
{
  flex: 1;
  max-width: 10px;
}

#save .padding
{
  margin-top: 10px;
  max-height: 50%;
  height: 40px;
  width: 8px;
  background-image: url("https://0xswitch.fr/static/backg.png");
  border-top: 1px solid #BCBCBC;
  border-right: 1px solid #BCBCBC;
  border-bottom: 1px solid #BCBCBC;
  cursor: pointer;
}

#save .other
{
  margin-top: 10px;
  max-height: 50%;
  height: 40px;
  width: 8px;
  background-image: url("https://0xswitch.fr/static/backg.png");
  border-top: 1px solid #BCBCBC;
  border-right: 1px solid #BCBCBC;
  border-bottom: 1px solid #BCBCBC;
  cursor: pointer;
}


#main #nav {
  flex: 1;
  padding: 0px;
  /* display: none; */
  border-right: 1px solid #BCBCBC; /*#171717;*/
}

#main #nav .wrap
{

  border-bottom: 1px solid #BCBCBC;
}

#main #nav .header .wrap a {
  font-family: 'alagard';
  text-align: center;
  font-size: 3.5em;
  width: 100%;
  margin: 0 auto;
  display: block;
}

/* #main #nav .header pre
{
  line-height:  1em;
  margin: 10 10px;
   -webkit-animation:colorchange 20s infinite alternate;
  overflow:hidden;
  padding: 10px;
  font-size: 0.9em;
} */

#main #nav .header .moto
{
  border-bottom: 1px solid #BCBCBC;
  background-image: url("https://0xswitch.fr/static/backg.png");
}

#main #nav .header .moto h1
{
  font-family: ball;
  font-size: 1.2em;
  text-align: center;
  margin: 0px;
  padding: 10px;
  padding-top: 12px;
  -webkit-animation:colorchange 20s infinite alternate;
}

@-webkit-keyframes colorchange {
      0% {

        color: #BCBCBC;
      }


      30% {

        color: #DCDCDC;
      }

      40%{color: #FFFFFF;}


      50% {

        color: #FFFFFF;
      }

      60% {

        color: #FFFFFF;
      }

      80% {

        color: #DCDCDC;
      }

      100% {

        color: #BCBCBC;
      }
    }

/* social */
#main #nav .header .social {
  display: flex;
  width: 100%;
}

#main #nav .header .social ul
{
  width: 100%;
  margin: 0px;
  padding: 0px;
  border-bottom: 1px solid #BCBCBC;
}

#main #nav .header .social ul a{
  display: inline-block;
  flex: 1;
  width: 30%;
  text-align: center;
  padding: 5px 0px;
  border-left: 1px solid #BCBCBC;
  font-family: ball;
}

#main #nav .header .social ul a:nth-child(1)
{
  border-left: 0px solid #BCBCBC;
}

#main #nav .header .social li img
{
  height: 20px;
}

/* Articles list */
#main #nav .header .data .articles, #main #nav .header .data .CTF, #main #nav .header .data .TAGS
{
  border-bottom: 1px solid #BCBCBC;
}

#main #nav .header .data .articles h1
{
  border-top: 1px solid #BCBCBC;
}

#main #nav .header .data .articles h1, #main #nav .header .data .CTF h1, #main #nav .header .data .TAGS h1
{
  font-size: 1.2em;
  padding: 10px;
  margin: 0px;
  font-family: withheld;
 background-image: url("https://0xswitch.fr/static/backg.png");
}

#main #nav .header .data .articles h1, #main #nav .header .data .CTF h1
{
	border-bottom: 1px solid #BCBCBC;
	margin-bottom: 10px;
}


/* summary */
#main #nav .header .data .articles .summary ul
{
  padding: 5px 15px;
  font-family: 'Montserrat', sans-serif;
}

#main #nav .header .data .articles .summary ul li
{
  font-size: 1.3em;
  list-style: none;
}

#main #nav .header .data .articles .summary  > ul > a > li
{
  color: white;
  font-weight: bold;
}

#main #nav .header .data .articles .summary  ul li.level_2
{
  color: white;
  font-style: italic;
  font-size: 1.2em;
}

#main #nav .header .data .articles .summary  ul li.level_3
{
  font-size: 1.1em;
}

#main #nav .header .data .articles .summary  ul li.level_4, #main #nav .header .data .articles .summary  ul li.level_5, #main #nav .header .data .articles .summary  ul li.level_6
{
  display: none;
}


#main #nav .header .data .articles .search
{
  margin-left: 10px;
}
#main #nav .header .data .articles .search input[type="text"]
{
  border-radius: 0px;
  display: inline-block;
  background-color: black;
  border: none;
  width: 100%;
  padding: 10px 0px;
  font-family: 'Quantico', sans-serif;
}

#main #nav .header .data .articles .search input[type="text"]:focus
{
  box-shadow: none;
}

#main #nav .header .data .TAGS h1
{
background-image: url("https://0xswitch.fr/static/backg.png");
}

#main #nav .header .data .TAGS h1
{
  margin-bottom: 0px;
}

#main #nav .header .data .articles ul, #main #nav .header .data .CTF ul
{
	padding-left: 27px;
}

#main #nav .header .data .articles ul li, #main #nav .header .data .CTF ul li
{
  list-style: square;
}

#main #nav .header .data .CTF ul.pub
{
  /* padding-left: 10px; */
  font-family: 'Montserrat';
  font-size: 1.1em;
  color: #BCBCBC;
}


#main #nav .header .data .articles ul a, #main #nav .header .data .CTF ul a, #main #nav .header .data .TAGS ul a
{
  font-family: 'Montserrat';
  font-size: 0.85em;
  margin-bottom: 3px;
}


#main #nav .header .data .TAGS .cont
{
  padding: 0px;
  max-width: 100%;
  width: 100%;
}

#main #nav .header .data .TAGS .cont a
{
    padding: 5px 10px;
    font-family: 'Montserrat';
    text-align: center;
    border-top: 1px dotted white;
    border-right: 1px dotted white;
}


/**  Articles display **/
#article
{
      overflow: hidden;
    height: auto !important;

}

#article #display .row
{
  margin: 0px;
}

#article #display > h1
{
  font-family: withheld;
  font-family: 'Quantico', sans-serif;
  padding: 10px 0px;
  color: white;
  border-bottom: 1px solid white;
  margin: 0px;
}

#article #display span.date
{
  color: white;
  font-family: 'Quantico';
  font-size: 1.2em;
}

#article #display .tags ul
{
  padding: 0px;
  margin: 0px;
  display: flex;
  flex-wrap: wrap;
  background-image: url("https://0xswitch.fr/static/backg.png");
  border-bottom: 1px dotted white;
}

#article #display .tags ul a {
  flex-grow: grow;
  min-width: 10%;
  width: auto;
  padding: 5px;
  padding-top: 10px;
  /* border-bottom: 1px dashed #BCBCBC; */
  font-family: 'ball';
  text-align: center;
  font-size: 1em;
  color: white;
}

#article #display .tags ul a:first-child li
{
  border: none;
}

#article #display .tags ul a:last-child li {
  border-right: 1px dashed #BCBCBC;
  padding-right: 10px;
}

#article #display .tags ul a li {

  border-left: 1px dashed #BCBCBC;
  padding-left: 10px;

}

#article #display .tags ul a:nth-child(1)
{
  min-width: 25%;
  border: none;
}

#article #display .page
{
  margin-top: 50px;
  text-align: justify;
  margin-bottom: 20px;
  font-family: 'Montserrat';
  border-bottom: 2px solid #BCBCBC;
  padding-bottom: 10px;
  font-size: 1em;
}

.nb {
  border-bottom: 0px !important;
}

#article #display .page strong
{
  color: white;
}

#article #display .page h1, #article #display .page h2, #article #display .page h3, #article #display .page h4, #article #display .page h5, #article #display .page h6
{
  margin-top: 25px;
  margin-bottom: 10px;
  padding: 10px 0px;
  color: white;
  font-weight: 100;
}

#article #display .page li
{
  list-style-type: square;
}

#article #display .page img:hover
{
  cursor: pointer;
}

#article #display .page  p
{
  margin-top: 15px;
  margin-bottom: 15px;
}

#article #display .page ul
{
  margin-bottom: 25px;
}

#article #display .page img
{
  margin: 0 auto;
  display: block;
  max-width: 100%;
  height: auto !important;
  margin-top: 20px;
  margin-bottom: 20px;
}

#article #display .page a
{
  color: #6891d1;
}

#article #display .page p > code
{
  /* padding: 0.25rem 0.25rem; */
  /* font-weight: 500; */
  padding: 2px 4px;
  font-size: 90%;
  color: #95dcff;
  /* white-space: nowrap; */
  border-radius: 0;
}

#article #display  span.marker, #article #display ul li span.marker
{
	padding: 0.25rem;
	color: white;
}



#article #display .page pre code
{
  font-family: monospace;
  font-size: 1.1em;
  margin: 10px 0px;
}

#article #display .page pre
{
  margin: 0px;
}

div[style^="background:#eeee"]{
	color: black;
}

#article #display .page blockquote
{
  padding: .5rem 1rem;
  margin: 1.5rem 0;
  color: #dadada;
  border-left: .25rem solid #e5e5e5;
  background-color: #0A0A0A;
}

#article #display .page blockquote p, #article #display .page blockquote code
{
  overflow-wrap: break-word;
}

#article #display .page blockquote > pre
{

  color: #dadada;
  background-color: #0A0A0A;
}

#article #display .page table[border="1"]
{
	width: 100% !important;
}

#article #display .page > table  td
{
	padding: 10px;
}



@media screen and (min-width: 0px) and (max-width: 720px) {
  .mobile { display: none; }
    #main #nav .header pre
  {

    font-size: 0.7em;
  }
  #article #display h1, #article #display h2, #article #display h3
  {
    text-align: left;
  }

  #article #display h1
  {
    font-size: 2em;
    margin-top: 15px;
  }

  #article #display .page h2,
  {
    font-size: 1.6em;
  }
  #article #display h3
  {
    font-weight: 1.4em;
  }

}

#quatrecentquatre
{
  background-color: black;
  min-height: 100%;
  display: flex;
  /* cursor: none; */

}

#quatrecentquatre img
{
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    /* cursor: none; */
}

#quatrecentquatre .ah
{
  position: absolute;
  position: absolute;
  top: 50%;
  left: 50%;
}


#quatrecentquatre .error
{

  color: white;
  font-size: 2em;

  background-image: url("https://0xswitch.fr/static/backg.png");
  font-family: 'withheld';
  padding: 20px;
  text-shadow: 2px 2px 2px white;

}

.white
{
  color: white;
}


h1.welcome {
  font-family: 'alagard' !important;
}

.article-list {
  margin-top: 25px;
}

.article-thumb {
  border: 1px solid rgb(95, 95, 95);
  margin-bottom: 15px;
  min-height: 60px;
  ;
}

.article-thumb img {
  width: 25%;
  height: 100% !important;
  display: inline-block !important;
}

.article-thumb .thumb-details {
  display: inline-block;
  height: 100px;
  /* line-height: 100px; */
  width: 70%;
  padding: 10px;
	font-family: 'Montserrat';
}

.last-5 {
  font-family: 'alagard' !important;
}


@media only screen and (max-device-width : 480px){

  .TAGS, .last-5, .article-list {
    display: none;
  }

}
