@font-face {
    font-family: LinuxBiolinumORegular, sans-serif;
    src: url(fonts/LinBiolinum_R.woff);
    src: url(fonts/LinBiolinum_RB.woff);
    src: url(fonts/LinBiolinum_RI.woff);
}

@font-face {
    font-family: LibertinusMonoRegular, monospace;
    src: url(fonts/libertinusmono-regular.otf);
}

* {box-sizing: border-box;}

body {background-color: #313131;
      font-family: 'LibertinusMonoRegular', monospace;
      width: 900px;
      color: #b3b3b3;
      margin-left:auto;
      margin-right:auto;
      margin-top:100px;
      font-size: 14px;
     }

h1     { text-indent: 0em; color: #ecbc9c; font-weight: bold; font-size: 24px; padding-bottom: 15px; padding-right: 9px; }

h1 a:link { color: #fcd08b; }
h1 a:visited { color: #fcd08b; }
h1 a:hover { color: #fcd08b; }
h1 a:active { color: #fcd08b; }


h2     { font-weight: bold; color: #ecbc9c; font-size: 18px; margin-top: 30px;}
h3     { font-size: 16px; font-weight: bold; }
h4     { font-size: 14px; font-weight: normal; padding-left: 0px; line-height: 145%;}
h5     { font-size: 14px; font-weight: normal; padding-left: 0px;}

p { text-indent: 0pt; padding-left: 10px; line-height: 145%; font-size: 14px; }

ul { margin-left: 30px; padding-left: 0px; list-style: square;}
ol { margin-left: 30px; padding-left: 0px;}

li:not(:last-child) { margin-bottom: 3px;}


a { text-decoration: none; }

a:link { color: #88eeee; }
a:visited { color: #88eeee; }
a:hover { color: #88eeee; }
a:active { color: #88eeee; }


div.wrapper {
    display: flex;
    margin-bottom: 20px;
}

div.sideline {
    float:left;
    width: 5px;
    background-color: #3e3e3e ;
}

div.main {
    padding-left: 15px;
    width: 80%;
    display: block;
}

div.gallery {
    text-indent: 0em;
    margin: 5px;
    float: left;
}

div.gallery:hover {
    border: 2px transparent;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    text-indent: 0em;
    padding: 15px;
    text-align: center;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 1000px) {
    body {
	width: 650px;
	margin-top:100px;
    }
}

@media only screen and (max-width: 700px) {
    .responsive {
	width: 49.99999%;
	margin: 6px 0;
    }
    
    body {
	width: 450px;
	margin-top:50px;
    }
}

@media only screen and (max-width: 500px) {
    .responsive {
	width: 100%;
    }
    
    body {
	width: auto;
	margin-top:50px;
	margin-left:10px;
    }
}


.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

.point{
    display: inline-block;
    margin-left: 1px;
    margin-bottom: -4px;
    width: 12px;
    height: 24px;
    animation: blinking 1.3s infinite;
}

@keyframes blinking{
    0%{ background-color:  #313131;}
    74%{ background-color:  #313131;}
    75%{ background-color: #ffffef;}
    100%{ background-color: #ffffef;}
}