@font-face {
  font-family: 'D2Coding';
  src: url('D2Coding.woff') format('woff'),
       url('D2Coding.ttf') format('truetype'),
       url('D2Coding.woff2') format('woff2'),
       url('D2Coding.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
  font-display: fallback;
}

@font-face {
  font-family: 'D2Coding-Bold';
  src: url('D2CodingBold.woff') format('woff'),
       url('D2CodingBold.ttf') format('truetype'),
       url('D2CodingBold.woff2') format('woff2'),
       url('D2CodingBold.eot') format('embedded-opentype');
  font-weight: bold;
  font-style: normal;
  font-display: fallback;
}

* {
    font-family: 'D2Coding';
}

.author {
  animation: font-color-change 2.5s ease infinite;
  -webkit-animation: font-color-change 2.5s ease infinite;
}

@keyframes font-color-change {
  0% {color: #fee}
  10% {color: #fcc}
  20% {color: #faa}
  30% {color: #f88}
  40% {color: #f66}
  50% {color: #f55}
  60% {color: #f66}
  70% {color: #f88}
  80% {color: #faa}
  90% {color: #fcc}
  100% {color: #fee}
}

@-webkit-keyframes font-color-change {
  0% {color: #fee}
  10% {color: #fcc}
  20% {color: #faa}
  30% {color: #f88}
  40% {color: #f66}
  50% {color: #f55}
  60% {color: #f66}
  70% {color: #f88}
  80% {color: #faa}
  90% {color: #fcc}
  100% {color: #fee}
}

hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

body {
	font-family: "Lato", "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
	font-size: 0.95em;
	line-height: 2;
	background-color: #F6F8FA
}

::selection {
  background: #ffb7b7; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #ffb7b7; /* Gecko Browsers */
}

ul li {
    list-style-type: none;
}

pre {
	overflow-x: hidden;
}

td.gutter {
	padding: 10px 5px 0px 5px;
	color: #808080;
	border-right: 1px #808080 solid;
}

td.code {
	padding: 10px 10px 0px 10px;
}

td.code * {
    font-family: 'D2Coding-Bold';
}

.clickable {
	cursor: pointer;
}

a.link {
	color: inherit;
    text-decoration: none;
}

img {
    display: block;
    margin: 0 auto;
    width: 80%;
    max-width: 400px;
    height: auto;
}

.owl-media {
	text-align: center;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color :  white;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}

ul li h3::before,
ul li h4::before,
ul li h5::before {
  content: "● ";
}