* {
    margin: 0;
    padding: 0;
    hover-padding: 10em;
}

html {
    height: 100vh;
}

body {
    background-color: black;
    height: 100%;
    color: white;

    padding: 1em;

    font-family: "Hermit", monospace;
    font-size: 1em;
}

a {
    color: lightblue;
}

h1 {
    padding-bottom: 0.8em;
}

h2 {
    padding-top: 0.6em;
    padding-bottom: 0.4em;
}

pre.terminal {
    border: solid white 2px;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 0.0em;
    padding-right: 1.0em;
    margin-bottom: 1em;
}

div.pre-container {
    display: flex;
    justify-content: center;
}

div#main {
    padding: 1em;
}

/* The list: */
ul {
    list-style-type: none;
}

li {
    padding-left: 0.5em;
    margin-bottom: 1.5em;
    border-left: solid 2px lightslategray;
}

ul.regular {
    list-style-type: disc;
    padding-left: 2.0em;
}

li.regular {
    padding-left: 0.0em;
    margin-bottom: 0.1em;
    border-left: none;
}

.fg-silver {color: silver;}

/* images */

.custom-icon32 {
    width: 32px;
    margin: 10px;
    /* border: solid red 1px; */
    border-radius: 5px; /* Zaokrąglone rogi */
    /* vertical-align: bottom; */
    position: relative;
    bottom: -1.0em;
}

/* links: */
a.article {
    font-weight: 900;
    font-style: italic;
    text-decoration: none;
}

.article {
    font-weight: 900;
    font-style: italic;
    text-decoration: none;
    color: darkorange;
}

.repo {
    font-weight: 900;
    font-style: italic;
    text-decoration: none;
    color: seagreen;
}

/* colors */
.marked {
    color: steelblue;
}

/* text styles */
.it { font-style: italic; }

/* spacing */
.mrg-tp0 { margin-top: 0.25em; }
.mrg-tp1 { margin-top: 0.5em; }
.mrg-bt0 { margin-bottom: 0.25em; }
.mrg-bt1 { margin-bottom: 0.5em; }

/* Hovering */

/* common: container, text (base): */
.hover-container {
    position: relative; /* Kontener dla tekstu */
    display: inline-block; /* Dopasowanie do treści */
    cursor: help; /* Ikona wskazująca możliwość interakcji */
}

.hover-base {
    visibility: hidden; /* Ukryj tekst domyślnie */
    position: fixed; /* Pozycja względem kontenera */
    right: 50px;
    top: 6em;
    /* top: 100%; /1* Pojawia się nad elementem *1/ */
    /* left: 50%; /1* Wyśrodkowanie tekstu względem kontenera *1/ */
    max-width: 25em;
    min-width: 30em;
    transform: translateX(+5%); /* Korekta pozycjonowania */
    background-color: black; /* Tło tekstu */
    color: white; /* Kolor tekstu */
    padding: 10px; /* Odstępy wewnętrzne */
    border: 1px solid orange; /* Ramka tekstu */
    border-radius: 5px; /* Zaokrąglone rogi */
    /*-- white-space: nowrap; /* Zapobieganie łamaniu tekstu */
    z-index: 10; /* Warstwa ponad innymi elementami */
    opacity: 0; /* Ukrycie przezroczystością */
    transition: opacity 0.3s; /* Animacja pojawiania się */
}

.inline-element {
    display: inline;}

/* Specific */

.container-khcolors {
    padding: var(--hover-padding);
}

.container-khcolors:hover .hover-khcolors {
    padding: 1em;
    visibility: visible; /* Pokaż tekst przy najechaniu */
    opacity: 1; /* Ustaw widoczność */
}

.container-termcolors {
    padding: var(--hover-padding);
}

.container-termcolors:hover .hover-termcolors {
    padding: 1em;
    visibility: visible; /* Pokaż tekst przy najechaniu */
    opacity: 1; /* Ustaw widoczność */
}

.container-vim {
    padding: var(--hover-padding);
}

.container-vim:hover .hover-vim {
    /* padding: var(--hover-container-padding); */
    padding: 1em;
    visibility: visible; /* Pokaż tekst przy najechaniu */
    opacity: 1; /* Ustaw widoczność */
}

.container-dda {
    padding: var(--hover-padding);
}

.container-dda:hover .hover-dda {
    /* padding: var(--hover-container-padding); */
    padding: 1em;
    visibility: visible; /* Pokaż tekst przy najechaniu */
    opacity: 1; /* Ustaw widoczność */
}

.container-ddg:hover .hover-ddg {
    visibility: visible; /* Pokáz tekst przy najechaniu */
    opacity: 1; /* Ustaw widoczność */
}