@font-face {
    font-family:                "Honey Room";
    src:                        url(../fonts/HoneyRoom.ttf);
}

@font-face {
    font-family:                "Larabie";
    src:                        url(../fonts/larabiefontrg.ttf);
}

@font-face {
    font-family:                "DejaVuSansMono";
    src:                        url(../fonts/DejaVuSansMono.ttf);
}

html {
    scroll-behavior:            smooth;
}

body {
    font-family:                "Honey Room";
    color:                      #7FFF00;
    background-color:           #000000;
}

h1 {
    font-size:                  1em;
    text-transform:             uppercase;
    display:                    inline-block;
    background:                 #111;
    margin-left:                1px;

    -webkit-animation:          blink 2s linear 0s infinite;
    -moz-animation:             blink 2s linear 0s infinite;
    -ms-animation:              blink 2s linear 0s infinite;
    -o-animation:               blink 2s linear 0s infinite;
}

@-webkit-keyframes blink {
    0%   { background: #0a0 }
    47%  { background: #090 }
    50%  { background: #000 }
    97%  { background: #000 }
    100% { background: #090 }
}

@-moz-keyframes blink {
    0%   { background: #0a0 }
    47%  { background: #090 }
    50%  { background: #000 }
    97%  { background: #000 }
    100% { background: #090 }
}

h2 {
    font-size:                  1em;
    text-transform:             uppercase;
}

h3 {
    font-size:                  1em;
    color:                      #5F84FC;
}

p {
    display:                    block;
    font-size:                  1em;
    color:                      #D0D0D0;
    margin:                     0;
}

p.note {
    font-family:                "Larabie";
    color:                      #eaece5;
    background-color:           #4040a1;
    -webkit-border-radius:      6px;
    border-radius:              6px;
    padding:                    14px 20px;
}

a:link {
    color:                      #C0C0C0;
    text-decoration:            none;
}

a:visited {
    color:                      #808080;
    text-decoration:            none;
}

a:active {
    color:                      #FF0000;
    text-decoration:            none;
}

a:hover {
    text-decoration:            underline;
}

.logo {
    font-family:                "Larabie";
}

.picture {
    font-family:                "DejaVuSansMono";
    font-size:                  0.9em;
}

.rainbow {
    background-image:           -webkit-gradient( 
        linear, 
        left top, 
        right top, 
        color-stop(0, #f22), 
        color-stop(0.15, #f2f), 
        color-stop(0.3, #22f), 
        color-stop(0.45, #2ff), 
        color-stop(0.6, #2f2), 
        color-stop(0.75, #2f2), 
        color-stop(0.9, #ff2), 
        color-stop(1, #f22) 
    );
    background-image:           gradient( 
        linear, 
        left top, 
        right top, 
        color-stop(0, #f22), 
        color-stop(0.15, #f2f), 
        color-stop(0.3, #22f), 
        color-stop(0.45, #2ff), 
        color-stop(0.6, #2f2), 
        color-stop(0.75, #2f2), 
        color-stop(0.9, #ff2), 
        color-stop(1, #f22) 
    );
    color:                      transparent;
    -webkit-background-clip:    text;
    background-clip:            text;
}

#toc_container {
    background:                 none repeat scroll 0 0;
    display:                    table;
    font-size:                  1em;
    margin-bottom:              1em;
    padding:                    20px;
    width:                      auto;
    position:                   sticky;
    top:                        0;
}

.toc_title {
    text-align:                 left;
    color:                      #5F84FC;
}

ol {
    counter-reset:              item;
}

ol > li {
    counter-increment:          item;
}

ol ol > li {
    display:                    block;
}

ol ol > li:before {
    content:                    counters(item, ".") ". ";
    margin-left:                -40px;
}

.thumbnail {
    max-width:                  40%;
    opacity:                    0.5;
}

.thumbnail:hover {
    opacity:                    1.0;
}

.lightbox {
	display:                    none;
	position:                   fixed;
	z-index:                    999;
	width:                      100%;
	height:                     100%;
	text-align:                 center;
	top:                        0;
	left:                       0;
	background:                 rgba(0,0,0,0.5);
}

.lightbox img {
    position:                   absolute;
    top:                        0;
    bottom:                     0;
    left:                       0;
    right:                      0;
    margin:                     auto;
    max-height:                 90vh;
    max-width:                  100%;
    height:                     auto;
}

.lightbox:target {
	outline:                    none;
	display:                    block;
}

@media (max-width:765px) {
	.thumbnail {
		max-width:              95%;
	}
	.lightbox img {
		margin-top:             50%;
	}
}