/* THIS IS YORIK'S FUCKING CSS IF YOU DARE TO READ THIS SHIT, YOU BADASS PARSER BOT */

* {
    box-sizing: border-box;
    border: 0 none;
    margin: 0;
    padding: 0;
}

.hidden { display: none !important; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0 none;
}

/*** BASIC LAYOUT ***/

.container {
    max-width: 900px;
    padding: 50px;
    margin: 0 auto;
}

.nextpost {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

img { max-width: 100%; }

#main .container {
    background: #E6E6E6;
}

/*** BASIC LAYOUT: HEADER ***/

#header .site-title {
    float: left;
    margin: 0;
    padding: 0 1em 0 0;
    line-height: 1em;
}

/* IE8 + IE9 clearfix */

#header > .container:after {
    content: '';
    display: block;
    clear: both;
}

/*** BASIC LAYOUT: FOOTER ***/

#footer { color: #333; }

#footer p, .comments p {
    margin: 0;
    text-align: center;
    padding: 8px;
}

/*** TYPOGRAPHY ***/

html { font-size: 16px; }

body {
    font-family: 'Droid Sans', 'Helvetica', 'Arial', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    font-variant-ligatures: common-ligatures;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
    color: #444;
}

p, td, th, li, dd {
    text-align: justify;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

p, hr, table, .table-responsive, ol, ul, dl, pre, blockquote, fieldset {
    margin-bottom: 1em;
}

a {
    color: #222;
    font-weight: bold;
    text-decoration: none;
    -webkit-transition: color .2s ease-in;
            transition: color .2s ease-in;
}
a:hover { color: #000;
          text-decoration: underline;
}

.site-title a:hover { text-decoration: none; }

.site-title, h1, h2, h3, h4, h5, h6 {
     margin-bottom: 0.6em;
     font-weight: bold;
     color: #333;
}
.site-title { color: #222;
     font-size: 4rem;
     font-family: 'gnuolane', sans-serif;
     text-shadow: #9BB3CC 1px 0 10px;
     opacity: 0.85;
     letter-spacing: 0.05em;
}

h1, h2 { font-size: 2.2em;
     width: 100%;
     border-bottom: 1px solid black;
     margin: 0.8em 0 0 0;
     font-family: 'gnuolane', sans-serif;
     letter-spacing: 0.05em;
}

h3 { font-size: 1.5rem;
     margin: 1.5em 0;
     font-family: 'gnuolane', sans-serif;
     letter-spacing: 0.05em;
}

h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; }
h6 { font-size: 1rem;
     font-weight: normal;
     font-style: italic;
}

hr { border: 0.15em solid #f5f5f5;
     border-radius: 0.3em;
     background: #f5f5f5;
}

abbr { text-decoration: underline dotted; }

/*** TABLES ***/

table { border-spacing: 0; }

td, th {
    padding: 0.4em 1em;
    vertical-align: top;
}
th {
    font-weight: bold;
    text-align: center;
    background: #f5f5f5;
    color: #333;
}

td, th {                                         border: solid 1px #ccc; }
tr:not(:last-child) td, tr:not(:last-child) th { border-bottom: 0 none; }
thead tr:last-child th {                         border-bottom: 0 none; }
td:not(:last-child), th:not(:last-child) {       border-right: 0 none; }

tr:first-child td:first-child, tr:first-child th:first-child { border-top-left-radius: 0.3em; }
tr:first-child td:last-child, tr:first-child th:last-child {   border-top-right-radius: 0.3em; }
tbody tr:last-child td:first-child {                           border-bottom-left-radius: 0.3em; }
tbody tr:last-child td:last-child {                            border-bottom-right-radius: 0.3em; }
table thead + tbody tr:first-child td {                        border-radius: 0 !important; }

.table-responsive { overflow-x: auto; }
.table-responsive > table { margin-bottom: 0; }

/*** LISTS ***/

ol, ul {
    list-style-position: outside;
    padding-left: 1.5em;
}
ol { padding-left: 2.5em; }
li { padding-left: 0.5em; }

dt { font-weight: bold; }
dd { margin-left: 2em; }

/*** CODE ***/

code {
    margin: 0 0.1em;
    padding: 0.1em 0.2em;
    border: 1px solid #ccc;
    border-radius: 0.3em;
    background: #f5f5f5;
    font-family: 'Droid Sans Mono', 'Courier New', 'Courier', monospace;
    font-size: 0.9rem;
}

pre {
    padding: 0 1em;
    border: 1px solid #ccc;
    border-radius: 0.3em;
    background: #f5f5f5;
    line-height: 1.4;
}

pre code {
    display: block;
    margin: 0;
    padding: 1.1111em 0;
    border: 0 none;
    background: transparent;
    overflow-x: auto;
    white-space: break-spaces;
}

/*** BLOCKQUOTE ***/

blockquote {
    font-style: italic;
    margin-left: 1em;
    padding-left: 1em;
    border-left: 0.5em solid #f5f5f5;
}

/*** FORMS ***/

label, fieldset legend { font-weight: bold; }

input:not([type="checkbox"]):not([type="radio"]), button, select, textarea, fieldset, fieldset legend {
    border-radius: 0.3em;
    background: #E6E6E6;
    color: #222;
    -webkit-transition: none .2s ease-in;
            transition: none .2s ease-in;
    -webkit-transition-property: border-color, background, box-shadow;
            transition-property: border-color, background, box-shadow;
}

input:not([type="checkbox"]):not([type="radio"]), button, select, textarea {
    padding: 0.5em 1em;
    outline: 0 none;
    font-size: 1rem;
}

input:focus:not([type="checkbox"]):not([type="radio"]), button:focus, select:focus, textarea:focus {
    border-color: #2EAE9B;
    box-shadow: 0 0 8px #5A687D;
    background: #eee;
}

input[type="button"]:focus, input[type="submit"]:focus, input[type="reset"]:focus, button:focus,
input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:hover {
    background: #f5f5f5;
    cursor: pointer;
    box-shadow: 0 0 8px #5A687D;
}

textarea, select[multiple] {
    vertical-align: bottom;
    overflow: auto;
}

fieldset {
    padding: 1em;
    background: #f5f5f5;
}

fieldset legend { padding: 0 0.5em; }

fieldset label, fieldset input, fieldset button,
fieldset select, fieldset textarea {
    margin: 0.2em 0.5em;
}

fieldset label:first-child, fieldset input:first-child, fieldset button:first-child,
fieldset select:first-child, fieldset textarea:first-child {
    margin-left: 0;
}

fieldset label:last-child, fieldset input:last-child, fieldset button:last-child,
fieldset select:last-child, fieldset textarea:last-child {
    margin-right: 0;
}

/* Firefox input size fix */

input::-moz-focus-inner, button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/* yorik's fucking tweaks 'n classes */

.list-ul, .list-ul-columns {
    margin: 0;
    padding: 0;
}
.list-ul-columns { column-count: 2; }

.list-date, .list-post, .list-icon {
    float:left;
    padding: 0.2em;
    max-width: 668px;
}
.list-icon {
    overflow: hidden;
    min-width: 128px;
    height: 128px;
    flex: none; /* dont fucking shrink with me */
}
.list-icon img {
    object-fit: cover;
    width:  128px;
    height: 128px;
}

li.catalog { display: flex; }

#header h1 {
    max-width: 400px;
    padding: 0;
}

#search_form {
    float: right;
    padding-top: 20px;
}
.homelink { 
    padding-left: 10px; 
    display: none;
}

.nextlink {
    font-size: 1.4em;
}

.homediv { margin: 30px 0; }

.comments {
    margin: 10px auto;
    padding: 0;
    max-width: 900px;
}

.navtop {
    margin: 10px 0 50px 0;
}

.navbottom {
    margin: 50px 0 0 0;
}

.catalog { text-align: left !important; }

/* antispam email assembler */

.e-mail:before { content: attr(data-website) "\0040" attr(data-user);
                 unicode-bidi: bidi-override;
                 direction: rtl;
}

/* images gallery */

.gallery .row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 8px;
}

.gallery .column {
    flex: 50%;
    padding: 0 8px;
}

.gallery img {
    margin: 8px 0;
    border: 1px solid #ccc;
}
  

/* cv */

.cvimage { float: left; margin-right: 10px; margin-bottom: 40px; max-width: 250px; clear: left; }
.cvbreak { clear: left; }
.cvtitle { margin-top: 2em; }
.cvname  { margin: 0; }

video, iframe { max-width: 100%; }

/* tags sidebar */

.sidebar {
    float: right;
    max-width: 200px;
    margin-right: calc(50% - 650px);
}

.sidebar-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* no-alt images */

img:not([alt]) {
    border: 1px solid red;
}

/* comments */

.mastodon-comments {
    background: transparent !important;
    padding: 10px 50px;
}

.mastodon-comment {
    clear: left;
}

.mastodon-comment .avatar {
    float: left;
    margin-right: 10px;
}

.mastodon-comment .content {
    max-width: 600px;
    float:left;
    margin-bottom: 25px;
}

#replylink {
    cursor: pointer;
}

/* Dark theme */

/*
@media (prefers-color-scheme: dark) {
    body { background: #111 !important; color: #eee; }
    a { color: #fff; }
    a:hover { color: #fff; }
    h1, h2, h3, h4, h5, h6 { color: #ddd; }
    h2 { border-bottom: 1px solid #bbb; }
    #main .container { background: #181818; }
    #footer { color: #ddd; }
}
*/

.dark { background: #111 !important; color: #eee; }
.dark a { color: #fff; }
.dark a:hover { color: #fff; }
.dark .site-title, .dark h3, .dark h4, .dark h5, .dark h6 { color: #ddd; }
.dark h1, .dark h2 { color: #ddd; border-bottom: 1px solid #bbb; }
.dark #main .container { background: #181818; }
.dark #footer { color: #ddd; }
.dark pre, .dark code { border: 1px solid #333; background: #333; }

/* OTHER MEDIA */

@media (max-width: 767px) {
    #main { padding: 2em 0 1em; font-size: 0.9em; }
    #header .site-title { float: none;  padding: 0.5em 0; line-height: 1.6em; font-size: 2.2em;}
    #footer p { padding: 1em 0; }
    #footer .social { padding: 0.5em 0 0.5em 1em; }
    #search_form { max-width: 140px; padding-top: 35px; }
    #search_input { width: 70%; }
    #search_submit { padding: 0.5em; width:20%; }
    #search_submit span { display: none; }
    .list-ul-columns { column-count: 1; }
    .list-icon { min-width: 96px; height: 96px; }
    .list-icon img { width:  96px; height: 96px; }
    .site-title { font-size: 3rem; }
    h1, h2 { font-size: 1.3rem; }
    h3 { font-size: 1.1rem; }
    h3.home { border-bottom: 1px solid #000; }
    h4 { font-size: 1rem; }
    #footer { padding: 6px; }
    #main .container { border-radius: 0px; }
    .container, .nextpost { padding: 15px; }
    .desktop { display: none; }
    .sidebar { display: none; }
    .noprint { display: none; }
    .homelink { display: inline; }
    .catalog { margin-bottom: 25px; }
    body { background: #c6c6c6 !important; }
    .gallery .column { flex: 100%; }
    #header .site-title { float: left; }
}

@media print {
    #header, .nav, #footer, .comments { display: none; }
    body { display: inherit; }
}