body {
    font-family: 'DejaVu Sans', sans-serif;
    /* light font */
    font-weight: 300;
    /*correction of default non-sense */
    margin: 0;
    padding: 0;
}

h1 {
    font-size: 2.5em;
    margin-bottom: 18px;
    margin-top: 18px;
}

h3 {
    font-weight: 400;
    font-size: 1.3em;
    margin-bottom: 0px;
}

p,
span {
    text-align: justify;
    line-height: 1.5;
}

blockquote {
    color: var(--quote);
    border-left-style: solid;
    border-color: var(--blog-meta);
    margin-left: 0px;
    padding: 0.1px 0px 0.1px 20px;
}

pre {
    background: var(--disabled-bg);
    border-radius: 6px;
    padding: 12px;
    margin-top: 20px;
    margin-bottom: 20px;
}

figure {
    overflow-x: auto;
    margin: 0;
    padding-bottom: 12px;
}

ol>li,
ul>li {
    line-height: 1.5;
}

/* links linking the website in the text */
p>a,
span>a,
li>a {
    text-decoration: none;
    color: var(--links-color);
    font-weight: normal;
}

p>a::after,
span>a::after,
li>a::after {
    content: "\00A0⬈";
    /* \00A0 is unicode equivalent for html   */
}

p>a.internal::after,
span>a.internal::after,
li>a.internal::after {
    content: "\00A0➡";
    /*⇨*/
}

p>a.email::after,
span>a.email::after,
li>a.email::after {
    content: "\00A0✉";
}

p>a.attachment::after,
span>a.attachment::after,
li>a.attachment::after {
    content: "\00A0📁\FE0E";
}


/*this is not working because of the privacy change from 2010*/
p>a:visited::after,
span>a:visited::after,
li>a:visited::after {
    content: " ⬀";
}

a:hover {
    text-decoration: underline;
}

/*links on obvious places - menus, homepage, headers*/
h3>a,
ul.menu>li>a {
    text-decoration: none;
    color: var(--text);
}

div.menu>ul>li>a::after {
    content: "";
}

main {
    /* solution for margin from the bottomm */
    margin-bottom: 60px !important;
    margin: 0 auto;
}

hr {
    border: none;
    height: 1px;
    color: var(--line-color);
    /* old IE */
    background-color: var(--line-color);
    /* Modern Browsers */
}

pre>code {
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* table css */

table.table {
    border-collapse: collapse;
    margin: 1em;
}

table.table td,
table.table th {
    border: 1px solid var(--header-footer-services);
    padding: 8px;
}

table.table th {
    background: var(--disabled-bg);
    padding: 8px;
}

/* --------------------------------HEADER CSS---------------------------------------------------------- */

.logo {
    height: 38px;
    width: 220px;
    display: block;
    background-repeat: no-repeat;
    background-position: bottom;
    background-image: var(--img-logo);
    float: left;
    margin-top: 8px;
    margin-left: 6px;
}

/*this is missing in homepage and its prototype*/
.alt-logo {
    display: none;
}

.logo>a {
    display: block;
    width: inherit;
    height: inherit;
}

.lang_button {
    padding-right: 20px;
}

.lang_button>a {
    font-weight: 400;
    text-decoration: none;
    font-size: 1.2em;
    text-transform: uppercase;
    display: inline-block;
    line-height: 20px;
}

td.lang_button:has(> a:nth-child(2)) a:last-child {
    border-left: 2px solid var(--text);
    padding-left: 11px;
    margin-left: 4px;
}

.youtube_icon {
    width: 40px;
    height: 30px;
    background-repeat: no-repeat;
    margin-right: 33px;
    margin-left: 20px;
    margin-top: 5px;
    background-image: var(--img-youtube);
}

/* span.current-nav  - wouldnt this selector be better? - nope, it make breadcrum bolder */
nav.submenu>span.current-nav,
header span.current-nav {
    font-weight: bolder !important;
}

/*----------------------------NEW UNIFICATION CSS HEADER --------------------------------------------------*/


header {
    margin-bottom: 15px;
    background-color: var(--header-footer-services);
    z-index: 3;
}

/*-----------------CSS mobile header with hamburger -------------------------*/

@media only screen and (max-width: 1118px) {
    header {
        height: 64px;
    }
}

header div {
    overflow: hidden;
    background-color: var(--header-footer-services);
}

header ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

header li a,
header li span {
    display: block;
    margin: 25px 30px;
    text-decoration: none !important;
    color: var(--text) !important;
    font-weight: 300;
}

/* menu */

header .menu {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
}

.submenu_in_burger {
    font-size: smaller;
    padding-left: 30px;
}

/* menu icon */

header .menu-icon {
    cursor: pointer;
    /* display: inline-block; this makes conflict with float right and it's not neccessary */
    float: right;
    padding: 28px 20px;
    position: relative;
    user-select: none;
}

header .menu-icon .navicon {
    background: var(--text);
    display: block;
    height: 2px;
    position: relative;
    transition: background .2s ease-out;
    width: 18px;
}

header .menu-icon .navicon:before,
header .menu-icon .navicon:after {
    background: var(--text);
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}

header .menu-icon .navicon:before {
    top: 5px;
}

header .menu-icon .navicon:after {
    top: -5px;
}

/* menu btn */

header .menu-btn {
    display: none;
}

header .menu-btn:checked~.menu {
    max-height: 1000px;
}

header .menu-btn:checked~.menu-icon .navicon {
    background: transparent;
}

header .menu-btn:checked~.menu-icon .navicon:before {
    transform: rotate(-45deg);
}

header .menu-btn:checked~.menu-icon .navicon:after {
    transform: rotate(45deg);
}

header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
    top: 0;
}

/*those classes has been removed from templates - rethink, if we need them*/
.top-bottom-line {
    margin-top: 10px;
    display: block;
    border-top: 0.5px solid var(--line-color);
    border-bottom: 0.5px solid var(--line-color);
}

.controls {
    margin: 12px auto;
}

@media (min-width: 1120px) {

    header {
        padding-top: 21px;
        padding-left: 25px;
        padding-right: 30px;
        padding-bottom: 6px;
        font-size: 20px;
        min-height: 102px;
        /*to keep up with menu height*/
    }

    .logo {
        margin-right: 30px;
    }

    header li {
        float: left;
    }

    header .menu {
        clear: none;
        max-height: none;
    }

    header .menu-icon {
        display: none;
    }

    .top-bottom-line {
        border: none;
        margin-top: 0px;
    }

    .controls {
        float: right;
        margin-top: 15px;
        margin-right: 15px;
        display: inline;
    }

    .youtube_icon {
        margin-right: 13px;
        margin-left: 0px;
    }

}

@media (min-width: 700px) {
    header .submenu_in_burger {
        display: none;
    }
}


/*------------------------------------- RESPONSIVITY CSS --------------------------------------- */

* {
    box-sizing: border-box;
}

.flex-container {
    display: flex;
    flex-direction: row;
}

/* flex-container stays always row even on small viewports unlike the previous flex-container */
.flex-container-row {
    display: flex;
    flex-direction: row;
}

@media only screen and (max-width: 999px) {
    .flex-container {
        flex-direction: column;
        /* this is neccessary for the columns */
    }
}

.w-60 {
    width: 60%;
}

.w-40 {
    width: 40%;
}

/* lines for blog and services*/
@media only screen and (max-width: 999px) {
    .xyborder {
        border-top-color: var(--line-color);
        border-top-style: solid;
        border-top-width: 1px;
        border-bottom-color: var(--line-color);
        border-bottom-style: solid;
        border-bottom-width: 1px;
    }
}

@media only screen and (min-width: 1000px) {
    .xyborder {
        border-left-color: var(--line-color);
        border-left-style: solid;
        border-left-width: 1px;
        border-right-color: var(--line-color);
        border-right-style: solid;
        border-right-width: 1px;
    }

    .intro {
        width: 50%;
        position: static;
    }

    .flex-container-row {
        position: relative;
        margin-top: -150px;
    }
}

@media only screen and (min-width: 1500px) {
    .flex-container-row {
        margin-top: -200px;
    }
}

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}

@media only screen and (min-width: 1000px) {

    /* For desktop: */
    .col-4 {
        width: 33.33%;
    }

    .col-6 {
        width: 50%;
    }
}

/*cancel text block for small screens*/
@media only screen and (max-width: 1500px) {

    p,
    span {
        text-align: left;
    }
}



/* ----------------------------------------------DARKMODE-TOGGLE CSS ------------------------------------------------------------------ */

label.darkmode-label {
    width: 100px;
    height: 40px;
    position: relative;
    display: block;
    border-radius: 40px;
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.4), inset 0px -1px 3px rgba(255, 255, 255, 0.4);
    cursor: pointer;
    background-color: var(--toggle-bg);
}

label.darkmode-label:after {
    content: "";
    width: 36px;
    height: 36px;
    position: absolute;
    top: 2px;
    left: var(--label-left);
    background: linear-gradient(180deg, var(--gradient-bg1), var(--gradient-bg2));
    border-radius: 36px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
    transform: var(--transformantion);
}

input#darkmode-toggle {
    width: 0;
    height: 0;
    visibility: hidden;
    display: none;
}

label.darkmode-label,
label.darkmode-label:after {
    transition: 0.3s
}

label.darkmode-label:active:after {
    width: 52px;
}

label.darkmode-label span.sun {
    display: block;
    width: 24px;
    height: 24px;
    background-image: var(--img-sun);
    transition: 0.3s;
    position: absolute;
    z-index: 1;
    left: 8px;
    top: 8px;
}

label.darkmode-label span.moon {
    display: block;
    width: 24px;
    height: 24px;
    background-image: var(--img-moon);
    transition: 0.3s;
    position: absolute;
    z-index: 1;
    left: 68px;
    top: 8px;
}

/* ---------------- CSS for color switching with variables ------------------------------------- */

/* tohle je nutný k přepínání když začnu na default světlý */
:root {
    --bg: white;
    --text: #212121;
    --blog-meta: #acabab;
    --header-footer-services: rgb(232, 232, 232);
    --toggle-bg: #ebebeb;
    --gradient-bg1: #ffcc89;
    --gradient-bg2: #d8860b;
    --label-left: 2px;
    --line-color: #cecece;
    --square-color: #7a7a7a;
    --team-portrait-bg: #f6f5f5;
    --links-color: #ac6600;
    --disabled-bg: #f1f1f1;
    --disabled-link-color: #965900;
    --quote: #626168;
    --code-block-bg: rgba(248, 248, 248, .92);
    --code-hilite-bg: rgba(255, 214, 102, .22);
    --stx-green: #6A9955;
    --stx-blue: #07A;
    --stx-darker-blue: #1F5F8B;
    --stx-emphasized-blue: #2B5F8A;
    --stx-dark-blue: #262680;
    --stx-red: #A31515;
    --stx-purple: #5A3E8E;
    --stx-vibrant-purple: #6B2F8A;
    --stx-leather-brown: #7A6A4A;
    --stx-saddle-brown: #795E26;
    --stx-brown: #8A4F00;
    --stx-grey: rgba(90, 90, 90, .72);

    --img-logo: url('media/trustica-logo-black.svg');
    --img-youtube: url('media/youtube-icon.svg');
    --img-arrow-up: url('media/up-arrow.svg');
    --img-sun: url('media/sun-white.svg');
    --img-moon: url('media/moon.svg');
}

/* tohle mi nastaví tmavý z defaultu */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #212121;
        --text: white;
        --blog-meta: #b8b5b5;
        --header-footer-services: #3d3d3d;
        --toggle-bg: #242424;
        --gradient-bg1: #777;
        --gradient-bg2: #3a3a3a;
        --label-left: 98px;
        --line-color: #535252;
        --square-color: white;
        --transformantion: translateX(-100%);
        --team-portrait-bg: #545353;
        --links-color: #ff9800;
        --disabled-bg: #2e2e2e;
        --disabled-link-color: #ff9800;
        --quote: #cccbd0;
        --code-block-bg: #1e1e1e;
        --code-hilite-bg: rgba(255, 255, 255, 0.06);
        --stx-green: #6A9955;
        --stx-blue: #4FC1FF;
        --stx-darker-blue: #569CD6;
        --stx-emphasized-blue: #9CDCFE;
        --stx-dark-blue: #569CD6;
        --stx-red: #CE9178;
        --stx-purple: #C586C0;
        --stx-vibrant-purple: #D670D6;
        --stx-leather-brown: #DCDCAA;
        --stx-saddle-brown: #CE9178;
        --stx-brown: #D7BA7D;
        --stx-grey: #808080;

        --img-logo: url('media/trustica-logo-white.svg');
        --img-logo: url('media/trustica-logo-white.svg');
        --img-youtube: url('media/youtube-icon-white.svg');
        --img-arrow-up: url('media/up-arrow-white.svg');
        --img-sun: url('media/sun.svg');
        --img-moon: url('media/moon-white.svg');
    }
}

/*  ~ * - tohle říká všechny elementy v tom předchozím */
/* tohle asi zajišťuje přepínání, když začnu na světlým z defaultu */
#darkmode-toggle:checked~* {
    --bg: #212121;
    --text: white;
    --blog-meta: #b8b5b5;
    --header-footer-services: #3d3d3d;
    --toggle-bg: #242424;
    --gradient-bg1: #777;
    --gradient-bg2: #3a3a3a;
    --label-left: 98px;
    --line-color: #535252;
    --square-color: white;
    --transformantion: translateX(-100%);
    --team-portrait-bg: #545353;
    --links-color: #ff9800;
    --disabled-bg: #2e2e2e;
    --disabled-link-color: #ff9800;
    --quote: #cccbd0;
    --code-block-bg: #1e1e1e;
    --code-hilite-bg: rgba(255, 255, 255, 0.06);
    --stx-green: #6A9955;
    --stx-blue: #4FC1FF;
    --stx-darker-blue: #569CD6;
    --stx-emphasized-blue: #9CDCFE;
    --stx-dark-blue: #569CD6;
    --stx-red: #CE9178;
    --stx-purple: #C586C0;
    --stx-vibrant-purple: #D670D6;
    --stx-leather-brown: #DCDCAA;
    --stx-saddle-brown: #CE9178;
    --stx-brown: #D7BA7D;
    --stx-grey: #808080;


    --img-logo: url('media/trustica-logo-white.svg');
    --img-youtube: url('media/youtube-icon-white.svg');
    --img-arrow-up: url('media/up-arrow-white.svg');
    --img-sun: url('media/sun.svg');
    --img-moon: url('media/moon-white.svg');
    ;
}

/* tohle asi zajišťuje přepínání, když začnu na tmavým z defaultu, tak mě přepne na bílou */
@media (prefers-color-scheme: dark) {
    #darkmode-toggle:checked~* {
        --bg: white;
        --text: #212121;
        --blog-meta: #acabab;
        --header-footer-services: rgb(232, 232, 232);
        --toggle-bg: #ebebeb;
        --gradient-bg1: #ffcc89;
        --gradient-bg2: #d8860b;
        --label-left: 2px;
        --line-color: #cecece;
        --square-color: #7a7a7a;
        --transformantion: translateX(0%);
        --team-portrait-bg: #f6f5f5;
        --links-color: #ac6600;
        --disabled-bg: #f1f1f1;
        --disabled-link-color: #965900;
        --quote: #626168;
        --code-block-bg: rgba(248, 248, 248, .92);
        --code-hilite-bg: rgba(255, 214, 102, .22);
        --stx-green: #6A9955;
        --stx-blue: #07A;
        --stx-darker-blue: #1F5F8B;
        --stx-emphasized-blue: #2B5F8A;
        --stx-dark-blue: #262680;
        --stx-red: #A31515;
        --stx-purple: #5A3E8E;
        --stx-vibrant-purple: #6B2F8A;
        --stx-leather-brown: #7A6A4A;
        --stx-saddle-brown: #795E26;
        --stx-brown: #8A4F00;
        --stx-grey: rgba(90, 90, 90, .72);

        --img-logo: url('media/trustica-logo-black.svg');
        --img-youtube: url('media/youtube-icon.svg');
        --img-arrow-up: url('media/up-arrow.svg');
        --img-sun: url('media/sun-white.svg');
        --img-moon: url('media/moon.svg');

    }
}

.background {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
}

/* color of links, which are purple by default */
a {
    color: var(--text);
}

article hgroup h3+p,
article hgroup h1+p {
    font-style: italic;
    color: var(--blog-meta);
}


/* ---------------------------------HOMEPAGE CSS---------------------------------------------------- */

.homepage_body {
    max-width: 85%;
}

#homepage_h2 {
    margin-bottom: 0;
    margin-top: 1.7em;
}

.intro p,
p.intro {
    font-size: 110%;
    padding-top: 18px;
}

/*position of the cat */
.cats_flex_container {
    display: flex;
    align-items: flex-end;
}

/* changing size of the cat */
@media only screen and (max-width: 999px) {
    .cat_img {
        height: 130px;
        margin-bottom: -35px;
        padding-left: 10px;
    }
}

@media only screen and (min-width: 1000px) {
    .cat_img {
        height: 320px;
        margin-bottom: -75px;
    }
}

@media only screen and (min-width: 1450px) {
    .cat_img {
        height: 360px;
        margin-bottom: -85px;
    }
}

@media only screen and (min-width: 1000px) {
    .w-60 {
        width: 100%;
    }
}

#homepage_services {
    background: var(--header-footer-services);
    margin-top: 0px;
    padding: 20px;
}

/* for the align or orange three dots link */
.dots_parent {
    position: relative;
    padding: 25px;
    padding-top: 10px;
}

.svg_orange_dots {
    position: absolute;
    /* position within parent div - class column */
    bottom: 0;
    right: 0;
    padding-right: 30px;
    padding-bottom: 10px;
}


@media only screen and (max-width: 999px) {
    .service-icons {
        width: 25px;
        height: 25px;
    }
}

@media only screen and (min-width: 1000px) {
    .service-icons {
        width: 35px;
        height: 35px;
    }
}

@media only screen and (min-width: 1450px) {
    .service-icons {
        width: 50px;
        height: 50px;
    }
}

/*-------------------------------------- SUBPAGE CSS----------------------------------------------*/

.subpage {
    margin-left: 39px;
    margin-right: 39px;
}

@media only screen and (max-width: 1119px) {
    .subpage {
        margin-left: 15px;
        margin-right: 15px;
    }
}

.breadcrumb>a {
    text-decoration: none;
}

.aside-margin {
    margin-top: 87px;
}

@media only screen and (max-width: 699px) {
    .aside-margin {
        margin-top: 0px;
        margin-bottom: 12px;
    }
}

@media only screen and (max-width: 699px) {
    .icon-aside {
        display: none;
    }
}

.submenu {
    margin-top: 30px;
    margin-right: 20px;
}

.submenu>a,
.submenu>span {
    display: block;
    text-decoration: none;
    line-height: 1.6;
    margin-top: 11px;
}

@media only screen and (max-width: 699px) {
    .submenu {
        display: none;
    }
}

.square {
    line-height: 1;
    vertical-align: text-top;
    display: inline-block;
    color: var(--square-color);
    transform: scale(0.7);
    transform-origin: center;
    margin: 0;
    margin-right: 4px;
}

.breadcrumb .square {
    margin-left: 4px;
}

/*is this in use?*/
.float-right {
    float: right;
    width: 600px;
}

.service-illustration-big-animal {
    float: right;
    width: 40%;
    margin: 5%;
    max-height: 400px;
    /* to prevent owl from beign to high and large*/
}

@media only screen and (max-width: 700px) {
    .service-illustration-big-animal {
        width: 90%;
        margin: 5%;
    }
}

main.subpage div.abstract+div.abstract>article {
    border-top: 1px solid var(--line-color);
}

div article+a {
    display: block;
    text-align: right;
    padding-bottom: 12px;
}

.img-responsive {
    max-width: 100%;
    height: auto;
}

.aligncenter {
    margin: 0 auto;
}

/*********PAGER css********/

.pager {
    display: flex;
    justify-content: center;
    /* Zarovnání do středu */
    align-items: center;
    /* Svislé zarovnání */
    margin-top: 25px;
    margin-bottom: 5px;
}

/*to make bigger margin only for top pager*/
div.abstract:first-of-type {
    margin-top: 35px
}

.pager a,
.pager .current_page,
.pager span {
    display: flex;
    /* Flexbox pro snadné zarovnání textu */
    justify-content: center;
    /* Vodorovné zarovnání textu */
    align-items: center;
    /* Svislé zarovnání textu */
    width: 40px;
    height: 40px;
    border: 1px solid #ac660059;
    /*lighter color for border*/
    color: var(--links-color);
    text-decoration: none;
    font-weight: normal;
}

.pager a:hover,
.pager .current_page {
    background-color: var(--links-color);
    color: var(--bg);
}

.pager span {
    background-color: var(--disabled-bg);
    color: var(--disabled-link-color);
}

.pager :first-child {
    border-radius: 5px 0px 0px 5px;
}

.pager :last-child {
    border-radius: 0px 5px 5px 0px;
}

/*********TAGS css********/

nav.tags {
    margin-right: 50px;
}

@media only screen and (max-width: 700px) {
    nav.tags {
        margin-right: 0px;
    }
}

@media only screen and (min-width: 1500px) {
    nav.tags {
        margin-right: 70px;
    }
}

.draft-badge {
    background-color: #007bff;
    color: white;
    padding: 4px 8px;
    text-align: center;
    border-radius: 5px;
    margin-right: 10px;
}

.tag,
span.current_tag {
    display: inline-block;
    padding: 8px;
    margin-right: 5px;
    margin-top: 4px;
    margin-bottom: 4px;
    border-radius: 22px;
    border: 1px solid var(--links-color);
    color: var(--links-color);
    text-decoration: none;
    font-weight: normal;
    font-size: 15px;
}

.tag:hover {
    background-color: var(--links-color);
    color: var(--bg);
    text-decoration: none;
}

/*different css for blog listing*/
div.abstract a.tag {
    margin-top: -1px;
    margin-bottom: -1px;
    font-size: 12px;
}



/*-----------------------------SUBPAGE GRID----------------------------------*/

@media only screen and (min-width: 700px) {

    /* For tablets: */

    .col-m-3-sub {
        width: 25%;
    }

    .col-m-9-sub {
        width: 75%;
    }

    .col-subpage-xl-right {
        width: 0%;
    }
}

@media only screen and (min-width: 1500px) {

    /* For desktop: */

    .col-2-sub {
        width: 16.66%;
    }

    .col-8-sub {
        width: 66.66%;
    }

    .col-subpage-xl-right {
        width: 16.66%;
    }
}

.flex-container-sub {
    display: flex;
    flex-direction: row;
}

@media only screen and (max-width: 699px) {
    .flex-container-sub {
        flex-direction: column;
        /* this is neccessary for the columns */
    }
}

/*-----------------------ABOUT US--------------------------------*/

article.about ul.loose {
    padding: 0;
    text-align: center;
}

article.about ul.loose>li {
    background-color: var(--team-portrait-bg);
    list-style-type: none;
    width: 23.9%;
    display: inline-block;
    padding-right: 1em;
    padding-left: 1em;
    padding-bottom: 1em;
    margin-right: 1%;
    margin-top: 2%;
    vertical-align: top;
}

@media only screen and (max-width: 1710px) {
    article.about ul.loose>li {
        width: 23.5%;
    }
}

@media only screen and (max-width: 1230px) {
    article.about ul.loose>li {
        width: 48%;
    }
}

@media only screen and (max-width: 500px) {
    article.about ul.loose>li {
        width: 100%;
    }
}

article.about ul.loose li:last-child {
    margin-right: 0%;
}

article.about ul.loose li p img {
    width: 100%;
}

article.about ul.loose li p {
    margin-bottom: 3px;
    text-align: left !important;
}

/* ----------------------------------------------- FOOTER CSS ---------------------------------------------------------------------- */

footer {
    padding: 20px;
    text-align: center;
    font-size: 15px;
    font-weight: 300;
    margin-top: auto;
    background: var(--header-footer-services);
}

footer img {
    float: right;
    margin-right: 20px;
}

#arrow-up {
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    background-size: cover;
    float: right;
    margin-right: 15px;
    background-image: var(--img-arrow-up);
}

/* ----------------------------------------- PRINT CSS ----------------------------------------------------------------------------------*/

img#print-logo {
    display: none;
    visibility: hidden;
}

/*
p.monochrome-testing {
    display: none;
}
    */

@media print {


    /* Any monochrome device 
    @media (monochrome) {
        p.monochrome-testing {
            display: block;
            color: black;
        }
    }

    /* Any non-monochrome device 
    @media (monochrome: 0) {
        p.monochrome-testing {
            display: none;
        }
    }
        */

    body {
        font-size: 60%;
    }

    main {
        margin: 0px !important;
        padding: 0px ! important;
    }

    img#print-logo {
        display: block;
        visibility: visible;
        width: 180px;
    }

    div.logo {
        margin: 0px;
    }

    header {
        margin: 0px;
        padding: 0px;
    }

    h1 {
        margin-top: 10px;
    }

    /* homepage css*/

    .homepage_body {
        max-width: 100%;
    }

    .cat_img {
        height: 130px;
        float: right;
    }

    div#homepage_services {
        padding: 0px;
    }

    img.service-icons {
        display: block;
        width: 16%;
    }

    .svg_orange_dots {
        display: none;
    }

    .homepage_body p {
        text-align: left;
    }

    h2#homepage_h2 {
        margin-top: 10px;
    }

    .dots_parent {
        padding: 15px;
    }

    /*page css*/

    div.col-2-sub.col-m-3-sub.aside-margin {
        width: 20%;
    }

    div.col-subpage-xl-right {
        display: none;
    }

    .icon-aside {
        width: 70px;
    }

    .service-illustration-big-animal {
        height: 150px;
    }

    .loose>li>p:nth-child(3) {
        text-align: left;
    }

    /* hiding popular tags from blog*/
    aside h2,
    nav.tags {
        display: none;
    }

    nav.pager {
        display: none;
    }

    /* hiding orange dots for blog listing */
    div article+a {
        display: none;
    }

}

/*------------------------- 404 cat css ------------------------------*/

.cat-404-1 {
    height: 80px;
    margin: 20px;
}

.cat-404-2 {
    height: 200px;
    margin: 50px;
}

.cat-404-3 {
    height: 100px;
    margin: 20px;
}

.cat-404-4 {
    height: 250px;
    margin: 50px;
}

.cat-404-5 {
    height: 120px;
    margin: 20px;
}

@media (prefers-reduced-motion: no-preference) {

    .cat-404-1,
    .cat-404-2,
    .cat-404-3,
    .cat-404-4,
    .cat-404-5 {
        animation: cat-spin infinite 20s linear;
    }


}

@keyframes cat-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(1080deg);
    }
}

/* scribble-tools code syntax highlighting */

.scribble-tools-code,
.scribble-tools-block {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.scribble-tools-block {
    tab-size: 2;
    -moz-tab-size: 2;
    overflow: auto;
    padding: .75rem .9rem;
    border: 1px solid var(--line-color);
    background: var(--code-block-bg);
}

.stx-comment {
    color: var(--stx-green);
}

.stx-keyword,
.stx-static-keyword,
.stx-wasm-form {
    color: var(--stx-blue);
}

.stx-value,
.stx-wasm-type {
    color: var(--stx-red);
}

.stx-name {
    color: var(--stx-dark-blue);
}

.stx-decl-name {
    color: var(--stx-saddle-brown);
}

.stx-prop-name,
.stx-method-name,
.stx-private-name {
    color: var(--stx-purple);
}

.stx-object-key,
.stx-param-name {
    color: var(--stx-darker-blue)
}

.stx-operator {
    color: var(--stx-brown);
}

.stx-punct {
    color: var(--stx-leather-brown);
}

.stx-type-name,
.stx-builtin-name {
    font-weight: 600;
    color: var(--stx-emphasized-blue);
}

.stx-make-target,
.stx-recipe-command {
    font-weight: 600;
    color: var(--stx-blue);
}

.stx-make-variable {
    color: var(--stx-vibrant-purple);
}

.stx-line-number {
    display: inline-block;
    min-width: 2.5em;
    padding-right: .75em;
    color: var(--stx-grey);
    text-align: right;
    user-select: none
}

.stx-line-highlight {
    background: var(--code-hilite-bg);
}

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

.stx-link:hover {
    text-decoration: underline
}