@font-face {
    /* Normalny */
    font-family: "Inter";
    src: url("Inter-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    /* Hrubým */
    font-family: "Inter";
    src: url("Inter-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("Inter-Light.ttf") format("truetype");
    font-weight: lighter;
    font-style: normal;
    font-display: swap;
}

/*
@font-face { 
    font-family: 'Lato';
    src: url("fonts/Lato-BoldItalic.ttf") format("truetype");
    font-weight: bold;
    font-style: italic;
}
*/


/*  VARIABLES */
:root {
    --display-light: block;
    --display-dark: none;

    --color-background: #ffffff;
    --color-background-invert: #1c1c1c;
    --color-background-special: #ffffff;
    --color-background-black: #1c1c1c;
    --color-background-feed: rgba(233, 236, 239, 0.5);
    --color-font: #1c1c1c;
    --color-font-invert: #ffffff;
    --color-font-hover: #aeaeae;
    --color-font-white: #ffffff;
    --color-font-black: #1c1c1c;
    --color-font-on-separator: #797979;
    --color-separator: #e9ecef;
    --color-separator-hover: #c1c4c7;
    --color-crazy: #ff6f00;
    --color-crazy-hover: #ff903b;

    --color-user-badge: #1c1c1c;

    /* Header */
    --header-width: 95%;
    --header-padding: 2.5%;
    --nav-height: 4rem;
    --nav-padding: 1rem;
    --font-size-navigation: 1rem;
    --infobox-width: 95%;
    --infobox-padding: 2.5%;

    /* Slideshow */
    --slideshow-width: 95%;
    --slideshow-padding: 2.5%;
    --font-size-slideshow-first: 1.2rem;
    --font-size-slideshow-normal: 1rem;

    /* Articles */
    --row-padding: 2.5%;
    --font-size-articles-head: 2rem;
    --article-font-size-head: 1rem;
    --article-big-font-size-head: 1rem;
    --article-text-size: 1.1rem;
    --article-line-height: 1.3;

    /* Middle article */
    --article-middle-padding-side: 2.5%;

    /* Big article */
    --article-big-translate-top: -2rem;
    --article-big-padding-side: 2.5%;
    --article-big-header: 2rem;

    /* Review box */
    --review-box-font-size-head: 1.5rem;
    --review-box-font-size-score: 4.5rem;

    /* Recommended articles */
    --related-articles-margin: 3.5%;

    /* Podcast banner */
    --podcast-background: #ff6f00;
    --podcast-font-color: #1c1c1c;
    --podcast-font-size-head: 2rem;
    --podcast-font-size-text: 1rem;
    --podcast-font-size-button: 1.2rem;

    /* Patreon box */
    --color-box-in-article: #e9ecef;
}

[data-theme="dark"] {
    --display-light: none;
    --display-dark: block;

    --color-background: #1c1c1c;
    --color-background-invert: #ffffff;
    --color-background-special: #000;
    --color-background-black: #1c1c1c;
    --color-background-feed: rgba(233, 236, 239, 0.1);
    --color-font: #ffffff;
    --color-font-invert: #1c1c1c;
    --color-font-hover: #aeaeae;
    --color-font-white: #ffffff;
    --color-font-on-separator: #b9b9b9;
    --color-separator: #494949;
    --color-separator-hover: #696969;

    --color-user-badge: #ffffff;

    /* Podcast banner */
    --podcast-background: #000000;
    --podcast-font-color: #ffffff;

    /* Patreon box */
    --color-box-in-article: #494949;
}

/*
  SKELETON LOADING OF IMAGES
*/
.skeleton {
    display: flex !important;
    border-radius: 5px;

    background: linear-gradient(
            100deg,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0) 60%
    ) var(--color-separator);

    background-size: 200% 100%;
    background-position-x: 180%;
    animation: 1s loading ease-in-out infinite;
}
/*
div.skeleton img {
    opacity: 0;
}
*/
.skeleton.ar-4x3 {
    aspect-ratio: 4 / 3;
}

.skeleton.ar-16x9 {
    aspect-ratio: 16 / 9;
}
.skeleton.mh-75vh {
    max-height: 75vh;
}

@keyframes loading {
    to {
        background-position-x: -20%;
    }
}
/*
div.skeleton:has(img:is(.lazyloaded)),
div.skeleton:has(img:is(.loaded)) {
    background: none;
}

div.skeleton img:is(.lazyloaded),
div.skeleton img:is(.loaded) {
    opacity: 1;
}
*/

/*
    SCROLLBAR
*/
*::-webkit-scrollbar {
    display: none;
}

/* width */
::-webkit-scrollbar {
    width: 0.6rem;
    height: 0.6rem;
}

/* Track */
::-webkit-scrollbar-track {
    background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--color-separator);
    opacity: 1;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--color-font);
    opacity: 1;
}

/* 
    Scrollbar visible for
*/
body::-webkit-scrollbar {
    display: unset;
}

/*
    INPUT FIELD
*/
textarea,
input {
    color: var(--color-font);
}

textarea,
input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100%;
    background: none;
    padding: 0.5rem 0;
    border: none;
    border-bottom: var(--color-separator) solid 2px;
}

textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
    outline: none;
    border-bottom-color: var(--color-font);
}

textarea {
    width: 100%;
    height: 4rem;
}

input[type="checkbox"] {
    margin: auto 0;
}

span.success {
    color: green;
}

span.fail {
    color: red;
}

p.message {
    margin: 1rem 0;
    font-weight: bold;
}

p.error {
    color: red;
    margin: 1rem 0;
    font-weight: bold;
}

.plugin-call-error p,
.plugin-call-error p b {
    color: red !important;
}

footer {
    text-align: center;
    padding: 1rem 0;
    border-top: 1px solid var(--color-separator);
    background: var(--color-background);
}

footer .links {
    display: flex;
    flex-direction: row;
    gap: 1rem;

    width: fit-content;
    margin: 1rem auto;
}

footer .links svg {
    width: 2rem;
    height: 2rem;
}

footer .info-links {
    flex-direction: column;
    gap: 0.25rem;
}

footer .info-links a {
    font-size: 1.1rem;
    font-weight: bold;
}

footer .info-links a:hover {
    color: var(--color-crazy);
}

footer .info-links span.break {
    display: none;
}

footer p {
    font-size: 0.9rem;
}

footer p.version,
footer p.version a {
    color: var(--color-font-hover);
    font-size: 1rem;
    margin-top: 1rem;
}

footer p.version a {
    font-size: 1rem;
}

body {
    max-width: 1500px;
    margin: auto;
}

* {
    padding: 0;
    margin: 0;
    font-family: "Inter", sans-serif;
    text-decoration: none;
    color: var(--color-font);
}

html {
    background: var(--color-background);
}

html > * {
    scrollbar-width: none;
}

svg {
    margin: auto 0;
    fill: var(--color-font);
}

svg.icon {
    height: calc(var(--nav-height) - 2.5 * var(--nav-padding));
    width: auto;
}

svg.icon.facebook:hover {
    fill: #4267b2;
}

svg.icon.twitter:hover {
    fill: #1da1f2;
}

svg.icon.whatsapp:hover {
    fill: #25d366;
}

svg.icon.youtube:hover {
    fill: #ff0000;
}

svg.icon.patreon:hover {
    fill: #ff424b;
}

svg.icon.instagram:hover,
svg.icon.threads:hover {
    fill: url("#instagram-gradient");
}

svg.icon.messenger:hover {
    fill: url("#messenger-gradient");
}

svg.user-badge {
    fill: var(--color-user-badge);
    width: 0.8rem;
    height: 0.8rem;
    margin-left: 5px;
}

a img {
    overflow: hidden;
}

a:hover {
    color: var(--color-font-hover);
}

.button {
    display: block;
    border-radius: 5px !important;
    background-color: var(--color-font);
    color: var(--color-font-invert) !important;
    font-size: var(--podcast-font-size-button);
    font-weight: bold !important;
    white-space: nowrap !important;
    padding: 0.6rem 1.5rem !important;
    margin: 2rem auto;
    width: fit-content;
    height: fit-content;
    outline: none !important;
    border-width: 0;
    text-decoration: none !important;
    text-align: center;
}

.button:hover {
    background-color: var(--color-separator) !important;
    color: var(--color-font) !important;
    filter: unset;
    cursor: pointer;
}

.button.full-width {
    width: 100% !important;
}


.button-selector {
    display: flex;
    flex-direction: row;
    border-radius: 5px;
}

.button-selector p {
    background-color: var(--color-font);
    color: var(--color-font-invert) !important;

    /*font-size: var(--podcast-font-size-button);*/
    font-size: 1rem;
    font-weight: bold !important;
    text-align: center !important;

    white-space: nowrap !important;
    padding: 0.6rem 1.5rem !important;

    width: 50%;
    box-sizing: border-box;
}

.button-selector p:first-of-type {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.button-selector p:last-of-type {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.button-selector p:hover,
.button-selector p.selected {
    background-color: var(--color-separator) !important;
    color: var(--color-font) !important;
    cursor: pointer;
}

.button-selector-show-flex {
    display: flex !important;
}


.form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.form .button {
    margin: 1rem 0 !important;
}

.form label.checkbox-slider {
    position: relative;
    display: flex;
    gap: 1rem;
}

.form label.checkbox-slider input {
    display: none;
}

.form label.checkbox-slider .slider {
    display: block;
}

.form label.checkbox-slider .slider::before {
    left: 2px;
    bottom: 2px;
    background: var(--color-font);
    opacity: 0.4;
}

.form label.checkbox-slider input:checked ~ .slider::before {
    opacity: 1;
}

.form label p {
    font-size: 1rem;
    margin-bottom: 0.2rem;
}

.form label.checkbox {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

header nav {
    display: flex;
    flex-direction: row;
    justify-content: center;

    width: var(--header-width);
    padding: 0 var(--header-padding);
    height: var(--nav-height);

    border-bottom: 1px solid var(--color-separator);
}

header nav > * {
    padding: var(--nav-padding);
}

header nav .logo {
    border-right: 1px solid var(--color-separator);
    padding-left: 0;
}

header nav .logo img {
    width: auto;
    height: calc(var(--nav-height) - 2 * var(--nav-padding));
}

header nav div.center {
    display: flex;
    flex-direction: row;
    width: inherit;
    justify-content: flex-end;
    padding-right: 0;
}

header nav label {
    display: flex;
    align-items: center;
    color: var(--color-font);
    font-size: var(--font-size-navigation);
    font-weight: bold;

    margin: auto 0;
    padding-left: 0;
}

header nav label input {
    display: none;
}

header nav label:hover {
    cursor: pointer;
}

header nav label:not(#color-switch):hover > * {
    color: var(--color-font-hover);
    fill: var(--color-font-hover);
    cursor: pointer;
}

header nav label#categories {
    margin-right: auto;
}

header nav label#podcast {
    padding: 0;
    margin-left: var(--nav-padding);
}

/* Color switcher */
/* The switch - the box around the slider */
header nav label#color-switch {
    position: relative;
    padding: unset;
    margin: auto 0;
}

/* Hide default HTML checkbox */
header nav label#color-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: calc(var(--nav-height) - 1.35 * var(--nav-padding));
    min-width: 42px;
    height: calc(var(--nav-height) - 2.7 * var(--nav-padding));
    min-height: calc(var(--nav-height) - 2.7 * var(--nav-padding));
    background-color: var(--color-separator);
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 1rem;
    width: 1rem;
    left: calc(2 * var(--nav-padding) + 2px);
    bottom: 4px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    background: var(--color-font);
    background-repeat: no-repeat;
    background-position: center;
}

input:checked ~ .slider {
    background-color: var(--color-separator);
}

input:checked ~ .slider:before {
    -webkit-transform: translateX(22px);
    -ms-transform: translateX(22px);
    transform: translateX(22px);
    background: var(--color-font);
    background-repeat: no-repeat;
    background-position: center;
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

nav .icon.left {
    padding-right: calc(var(--nav-padding) * 0.5);
}

nav .icon.right {
    padding-left: calc(var(--nav-padding) * 0.5);
}

nav .icon.margin {
    padding-left: calc(var(--nav-padding) * 2);
}

nav .icon.podcast {
    padding-right: calc(var(--nav-padding) * -0.5);
}

#search {
    height: fit-content;
    margin-top: auto;
}

#search .icon:hover {
    cursor: pointer;
    fill: var(--color-font-hover);
}

#search input {
    display: none;
}

header div.infobox {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
    position: fixed;
    top: calc(4rem + 1px);
    z-index: 500;

    height: -webkit-fill-available;
    height: fill-available;
    width: var(--infobox-width);
    padding: 0 var(--infobox-padding);
    padding-top: 1rem;
    padding-bottom: 2rem;
    background-color: var(--color-background-special);

    border-bottom: 1px solid var(--color-separator);
}

header div.not-displayed {
    display: none;
}

header div.search-info {
    overflow: auto;
}

header div.search-info .search-results {
    height: fit-content;
}

header div.search-info .search-recommendations {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

header div.search-info .search-recommendations p {
    font-size: .9rem;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
}

header div.search-info .search-recommendations p.recommendation-header {
    font-size: 1.1rem;
    font-weight: bold;
    margin-top: 0.4rem;
}

header div.search-info .search-recommendations p:not(.recommendation-header):hover {
    font-weight: bold;
    cursor: pointer;
}

header div.search-info .search-form {
    display: grid;
    grid-template-columns: 3rem 1fr;

    padding-bottom: var(--nav-padding) 0;
    width: 100%;
}

header div.search-info .search-form a {
    grid-column: 1 / 2;
    display: flex;

    width: 3rem;
    /*border-bottom: 2px solid var(--color-separator);*/
}

header div.search-info .search-form a svg {
    margin: auto;
}

header div.search-info .search-form p {
    padding-top: 0.5rem;
    grid-column: 1 / 4;
    font-size: 0.9rem;
    font-weight: normal;
}

header div.search-info .search-form input {
    grid-column: 2 / 3;
    font-weight: normal;
    font-size: var(--font-size-navigation);
    background: var(--color-background-special);
    color: var(--color-font);

    width: calc(100% - 2 * var(--nav-padding));
    padding: var(--nav-padding);

    outline: none;
    border: none;
    border-bottom: 2px solid var(--color-separator);
}

header div.search-info .search-form input:focus {
    border-bottom-color: var(--color-font);
}

header div.search-info div.loading-container {
    padding-top: calc(3 * var(--nav-padding));

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);

}

header div.search-info div.loading {
    border: 16px solid var(--color-background-special);
    border-radius: 50%;
    border-top: 16px solid var(--color-separator);
    width: 5rem;
    height: 5rem;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;

    margin: auto;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

header div.search-info .search-results {
    height: -webkit-fill-available;
    overflow-y: scroll;
    padding: var(--nav-padding) 0;
    margin-bottom: var(--nav-padding);
}

header div.search-info .search-results h3 {
    font-size: 1.4rem;
    margin: 1rem 0;
}

header div.search-info .search-results h3:first-of-type {
    margin-top: 0;
}

header div.search-info .result {
    display: grid;
    grid-template-columns: 35% 5% 60%;
    margin: 1.5% 0;
    border-radius: 5px;
}

header div.search-info .result:hover {
    background: var(--color-separator);
}

header div.search-info .result img {
    grid-column: 1 / 2;
    width: 100%;
    height: auto;
    border-radius: 5px;

    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
}

header div.search-info .result p {
    grid-column: 3 / 4;
    margin: auto;
    margin-left: 0;
}

header.desktop-header {
    background-color: var(--color-background);
    position: sticky;
    top: 0;
    z-index: 10;
}

header.mobile {
    position: fixed;
    bottom: -1px;
    width: 100%;
    border-top: 1px solid var(--color-separator);
    z-index: 10;
}

header.mobile nav {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);

    width: var(--header-width-mobile);
    padding: 0 var(--header-padding-mobile);

    background: var(--color-background-black);
    border-bottom: none;
}

header.mobile nav label {
    display: flex;
    flex-direction: column;

    padding: 0;
    margin: auto !important;
}

header.mobile nav label p {
    font-size: 0.7rem;
    font-weight: normal;
    color: var(--color-font-white);
}

header.mobile nav label svg {
    fill: var(--color-font-white);
}

/* SLIDESHOW */
.slideshow-container {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;

    width: calc(100% - 2 * var(--slideshow-padding));
    height: fit-content;
    padding: 1rem var(--slideshow-padding);
    background: var(--color-background);
}

.slideshow-container a:empty {
    display: none;
}

.first-slide-container {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    width: 100%;
    height: fit-content;
}

.other-slides-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}

.other-slide {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.other-slide a.image-wrapper {
    display: block;
    width: 45%;
    height: fit-content;
    margin: auto 0;
}

.first-slide-container img,
.other-slide img {
    width: 100%;
    height: fit-content;
    aspect-ratio: 16 / 9;
    border-radius: 5px;
}

.first-slide-container img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
}

.first-slide-container div.info,
.other-slide div.info {
    display: flex;
    flex-direction: column;
}

.first-slide-container div.info {
    position: absolute;
    left: 5%;
    bottom: 5%;

    width: 90%;
    height: fit-content;
    margin: 0 auto;
}

.other-slide div.info {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    width: 50%;
    margin: auto 0;
}

.first-slide-container a.tag,
.other-slide a.tag {
    display: none;
}

.first-slide-container div.info h1 {
    width: 100%;
    font-size: var(--font-size-slideshow-first);
    line-height: 180%;
}

.other-slide div.info h1 {
    font-size: var(--font-size-slideshow-normal);
}

.first-slide-container div.info h1 span {
    -webkit-box-decoration-break: clone;
    -o-box-decoration-break: clone;
    box-decoration-break: clone;

    padding: 1% 2%;
    line-height: 1.7rem;

    background-color: var(--color-background-black);
    color: var(--color-font-white);
}

.first-slide-container div.info h1 span:hover {
    background-color: var(--color-crazy);
    color: var(--color-background-black);
}

.other-slide div.info h1:hover {
    color: var(--color-font-hover);
}

.other-slides-container hr {
    border: none;
    margin: 2% 0;
}

.other-slides-container hr:is(:last-of-type) {
    display: none;
}

.column {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--color-background);
}

.column.tag-page {
    /*position: absolute;*/
    display: flex;
    flex-direction: column;
    row-gap: 2rem;

    margin-top: calc(90vh - 8em);
    top: calc(100vh - 4em);
    padding: 2.5% var(--row-padding);
    width: calc(100% - 2 * var(--row-padding));
}

.column.tag-page.without-image {
    padding-top: 2rem;
    position: unset;
    margin-top: 0;
}

.row {
    display: flex;
    flex-direction: column;

    padding: 2rem var(--row-padding);
}

.row.tag-page {
    grid-column: 1 / 2;
    display: flex;
    row-gap: 2rem;
    padding: unset;
}

.row.empty {
    display: unset;
    padding: unset;
}

.articles {
    grid-column: 1 / 2;

    display: flex;
    flex-direction: column;
}

.review-box h2,
.articles h1,
.articles h2 {
    font-size: var(--font-size-articles-head);
    padding-bottom: 2rem;
}

.article {
    padding: 2.5%;
    border: 1px solid var(--color-separator);
}

/* Kazdy dalsi .article za .article (Cize 'okrem prveho vsetky .article') */
.article ~ .article {
    border-top: unset;
}

.article.normal {
    display: grid;
    grid-template-columns: 50% 5% 45%;
}

.article .header {
    grid-column: 3 / 4;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.article a.image {
    grid-column: 1 / 2;
}

.article a.image img {
    aspect-ratio: 4 / 3;
    width: 100%;
    height: max-content;
    height: fit-content;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

.article.big a.image img {
    aspect-ratio: 16 / 9;
}

.article h2 {
    padding-bottom: 7.5%;
    font-size: var(--article-font-size-head);
    font-weight: bold;
    color: var(--color-font);
}

.article.big h2 {
    font-size: var(--article-big-font-size-head);
    padding: 1.5% 0;
}

.article h2:hover {
    color: var(--color-font-hover);
}

.article p {
    font-size: 1rem;
    font-weight: normal;
}

.article p.perex {
    display: none;
}

.article p.info {
    font-size: 0.7rem;
    color: var(--color-font-hover);
    padding-top: 7.5%;
}

.article.big p.info {
    padding-top: 2.5%;
}

article ul,
article ol,
.user-page ul,
.user-page ol {
    color: var(--color-font);
    font-size: var(--article-text-size);
    line-height: var(--article-line-height);
    padding-left: 1.5rem;
}

.article .tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    gap: 0.5rem;
}

.article .tags a {
    position: relative;
    width: max-content;
    width: fit-content;
    padding: 1% 2%;

    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none !important;
    letter-spacing: 0.1rem;

    color: var(--color-background-black) !important;
    background: var(--color-crazy);
    border: 1px solid var(--color-crazy);
    border-radius: 5px;
}

.article .tags a:hover {
    color: var(--color-font-white) !important;
    background: black;
    border-color: black;
}

/* tag pri article boxe */
.article a.tag {
    display: none;
    font-size: 0.6rem;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--color-crazy);
    position: relative;
    max-width: fit-content;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.1rem;
}

.article a.tag:hover {
    color: var(--color-font-hover);
}

/*
    STRANKA S CLANKOM
*/
section {
    background: var(--color-background);
}

section.article-normal {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
    padding: 2.5%;
    padding-bottom: 0;
    border: unset;
}

section.article-middle {
    display: flex;
    flex-direction: column;
    border: unset;
}

section.article-big {
    display: flex;
    flex-direction: column;
    border: unset;
}

/* Normalny clanok */

article {
    grid-column: 1 / 2;
}

article h1 {
    font-size: 2rem;
    text-align: left;
}

article h2 {
    margin: 3.5% 0;
    margin: 1rem 0;
    font-size: 1.3rem;
    font-weight: normal;
    text-align: left;
}

article img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.author-info-line {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 1rem;
    padding-bottom: 1rem;
}

.author-info-line img {
    width: 1.25rem !important;
    height: 1.25rem !important;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
}

.author-info-line svg {
    width: 1rem;
    height: 1rem;
}

.author-info-line p,
.author-info-line time,
.author-info-line a {
    font-size: 0.8rem;
    color: var(--color-font);
    margin: auto 0;
    margin-left: -0.5rem;
}

.author-info-line a:hover {
    color: var(--color-font-hover);
}

article .content {
    display: flex;
    flex-direction: column;
}

article .content .social-media {
    grid-column: 1 / 2;
}

article .content .social-media div {
    display: flex;
    justify-content: space-evenly;

    padding: 2.5%;
    margin-bottom: 4.5%;
    border-bottom: 1px solid var(--color-separator);
}

article .content .social-media p {
    display: none;
    font-size: 1rem;
    font-weight: bold;
    padding-bottom: 1.5rem;
}

article .content .social-media a {
    display: block;
    width: fit-content;
    min-width: 5%;

    padding: 2.5% 0;
    padding-bottom: 0;
}

article .content .social-media svg.icon {
    height: 2rem;
}

article .content .article {
    grid-column: 3 / 4;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;

    border: unset;
    padding: unset;
}

/*
article .content .article > * {
  margin-bottom: 1.5rem !important;
  margin-top: 1.5rem;
}
*/

article .content .article p {
    color: var(--color-font);
    font-size: var(--article-text-size);
    line-height: var(--article-line-height);
    font-weight: normal;
    text-align: justify;
}

article .content .article p:empty {
    display: none;
}

article .content .article blockquote {
    padding-left: 1.5rem;
    padding-bottom: 0;
    margin-left: 1.5rem;

    border-left: 3px solid var(--color-crazy);
}

article .content .article blockquote p {
    font-weight: bold;
    font-size: var(--article-text-size);
}

article .content .article a {
    text-decoration: underline;
    text-decoration-color: var(--color-crazy);
    text-decoration-thickness: 2px;
}

article .content .article a:hover,
article .content .article a:hover > * {
    color: var(--color-crazy-hover);
    cursor: pointer;
}

article .content .article h3,
article .content .article h4 {
    font-size: 1.4rem;
}

article .content .author {
    grid-column: 3 / 4;
}

article .content .comments-disabled-info {
    grid-column: 3 / 4;
    margin: 2rem 0;
}
article .content .comments-disabled-info p {
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    font-style: italic;
}


/*
    Stredny clanok
*/
section.article-middle .main-image-container {
    position: relative;
    margin-bottom: 1rem;
}

section.article-middle .main-image-container img {
    width: 100%;
    height: 75vh;
    object-fit: cover;
    object-position: center;
}

section.article-middle .main-image-container .info {
    position: absolute;
    bottom: 0;
    padding: 1rem;
    width: 100%;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
    line-height: 1;
}

section.article-middle .main-image-container .info h1 {
    font-size: 2rem;
    font-weight: bold;
}

section.article-middle .main-image-container .info h2 {
    font-size: 1.2rem;
    font-weight: normal;
}

section.article-middle .main-image-container .info .author-info-line {
    padding-bottom: 0;
}

section.article-middle article .content {
    padding: 0 var(--article-middle-padding-side);
}


/*
    Velky clanok
*/
section.article-big article img.main-image {
    width: 100%;
    max-height: 75vh;
    object-fit: cover;
}

section.article-big article .header {
    display: flex;
    flex-direction: column;

    padding: 0 var(--article-big-padding-side);
    transform: translateY(var(--article-big-translate-top));
}

section.article-big article a.tag {
    /*display: none;*/
    width: fit-content;
}

section.article-big article h1 {
    font-size: var(--article-big-header);
    width: 100%;
    line-height: 130%;
    padding: 2.5% 0;
}

section.article-big article h1 span {
    -webkit-box-decoration-break: clone;
    -o-box-decoration-break: clone;
    box-decoration-break: clone;

    background-color: black;
    color: var(--color-font-white);
    padding: 0 2.5%;
}

section.article-big article h2 {
    margin-top: 0;
}

section.article-big article .content {
    padding: 0 var(--article-big-padding-side);
    transform: translateY(var(--article-big-translate-top));
}

/*
    User medailon (box autora)
*/
.author,
.author .author-info {
    display: flex;
    flex-direction: column;
}

.author {
    padding: 3.5% 0;
    border-top: 1px solid var(--color-separator);
    border-bottom: 1px solid var(--color-separator);
}

.author img.author {
    width: 35%;
    margin: auto;
    margin-bottom: 1rem;
    border: unset;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.author .author-info h3 {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.author .author-info .social-media {
    display: flex;
    justify-content: space-evenly;
    width: 80%;
    margin: auto;
}

.author .author-info .social-media a {
    width: fit-content;
    padding: 0;
}

.author .author-info .info {
    text-align: justify;
    padding-top: 2rem;
}

.author .author-info .info p {
    font-size: var(--article-text-size);
    line-height: var(--article-line-height);
}

/*
    USER
*/
img.user-banner-image,
img.user-profile-image {
    aspect-ratio: 18 / 9;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

img.user-profile-image {
    width: 50%;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 4px solid var(--color-background);
}

.user-profile {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.user-profile h2 {
    font-size: 2rem !important;
    padding-bottom: 0 !important;
}

.user-profile .tags-carousel-container h2 {
    padding-bottom: 2rem !important;
}

.user-profile .info {
    display: flex;
    flex-direction: column;
    gap: 2rem;

    width: 100%;
    margin: 0;
}

.user-profile .info .info-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.user-profile .info .info-header.admin {
    margin-top: -15%;
}

.user-profile .info .info-name {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    margin: auto 0;
}

.user-profile .info .info-name .social-media {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 2rem;
}

.user-profile .info .info-name .social-media svg {
    width: 2rem;
    height: 2rem;
}

.user-profile .info .info-name h1 {
    font-size: 2rem;
    text-align: center;
    padding: 0;
}


.user-page {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
}

.user-page .container-inline {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 1rem;
    overflow-x: scroll;
}

.user-page .container-inline::-webkit-scrollbar {
    display: none;
}

.user-page h1,
.user-page h2 {
    font-size: 2rem;
}

.user-page h2 {
    font-size: 1.5rem;
}

.user-page p {
    color: var(--color-font);
    font-size: var(--article-text-size);
    line-height: var(--article-line-height);
    font-weight: normal;
    text-align: justify;
    /*margin-bottom: 1.5rem;*/
}

.user-page p.info,
.user-page p.error,
.user-page p.good {
    font-weight: bold;
    padding-bottom: 1rem;
}

.user-page p.error {
    color: red;
}

.user-page p.good {
    color: green;
}

.user-page p.info {
    padding-top: 1rem;
}

.user-page a.back-link {
    margin-bottom: 1rem;
}

.user-page a.button {
    width: fit-content;
    margin: 1.5rem 0;
}

.user-page .pages-button-container {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: flex-end;
    align-items: baseline;
}

/*
    USER/FEED
*/
.feeds-for-profile-aside .feeds {
    overflow-y: scroll;
}

.user-page .feeds {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.user-page .feed {
    display: flex;
    flex-direction: column;
    padding: 2.5%;
    border-radius: 5px;
    background: var(--color-background-feed);
}

.user-page .feed .feed-info {
    display: grid;
    grid-template-columns: 4rem 1rem auto;
    margin-bottom: 1rem;
}

.user-page .feed .feed-info p {
    text-align: left;
    margin-bottom: unset;
}

.user-page .feed .feed-info img {
    grid-column: 1 / 2;
    max-width: 4rem;
    max-height: 4rem;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
}

.user-page .feed .feed-info div {
    grid-column: 3 / 4;
    height: fit-content;
    margin: auto 0;
}

.user-page .feed .feed-info div a {
    text-transform: uppercase;
    font-weight: bold;
    color: var(--color-crazy);
}

.user-page .feed .feed-info div a:hover {
    color: var(--color-crazy-hover);
}

.user-page .feed .feed-info div a.feed-link {
    text-transform: none;
}

.user-page .feed .feed-info div a.time {
    color: var(--color-font-hover);
    font-size: 0.7rem;
    font-weight: normal;
}

.user-page .comments-container {
    margin-top: 1rem;
}

.user-page .comments-show-button,
.user-page .make-comment-button {
    line-height: normal;
    margin: 1rem 0 0 auto;
}

.user-page .make-comment-button {
    margin-top: 1rem;
    margin-left: auto;
}

.user-page .feed .comments-area h3 {
    display: none;
}

.user-page .trumbowyg-box,
.user-page .trumbowyg-editor {
    min-height: 75px !important;
}

.user-page .feed .article {
    padding: 0;
    border: none;
}

.user-page .feed .article .header {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.user-page .feed .article .title h2 {
    padding-bottom: 7.5% !important;
    font-size: var(--article-font-size-head) !important;
}

.user-page .feed .article .perex {
    padding: 0;
    font-size: 1rem;
    font-weight: normal;
    text-align: left;
}

.user-page .feed .like .original {
    display: grid;
    grid-template-columns: 2.5rem auto;
}

.user-page .feed .like .original p {
    display: none;
}

.user-page .feed .like .original p:first-of-type {
    grid-column: 2;
    font-size: 0.9rem;
    color: var(--color-font-hover);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: auto 0;
}

.user-page .feed p img {
    width: 50%;
    border-radius: 5px;
}

.user-page .feed .status p {
    padding-bottom: 0.5rem;
}

.user-page .feed .reaction .original {
    display: grid;
    grid-template-columns: 2.5rem auto;
}

.user-page .feed .like .original svg {
    margin-top: 0;
}

.user-page .feed .reaction .original p {
    display: none;
}

.user-page .feed .reaction .original p:first-of-type {
    display: unset;
    font-size: 0.9rem;
    color: var(--color-font-hover);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: auto 0;
}

.user-page .feed .reaction .original p span {
    font-weight: bold;
}

.user-page .feed .reaction p {
    margin-top: 0.5rem;
}

.user-page .feed .reaction-only {
    display: grid;
    grid-template-columns: 2.5rem auto;
}

/*
.user-page .feed .reaction-only svg {
  float: left;
  margin-right: 0.9rem;
}
*/
.user-page .feed .reaction-only svg {
    grid-column: 1 / 2;
    margin-top: 0;
}

.user-page .feed .reaction-only p {
    grid-column: 2 / 3;
}


.user-page .feed.loading {
    background-color: var(--color-separator);
    background: linear-gradient(
            100deg,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, .5) 50%,
            rgba(255, 255, 255, 0) 60%
    ) var(--color-separator);
    background-size: 200% 100%;
    background-position-x: 180%;
    animation: 1s loading ease-in-out infinite;
    height: 15rem;
}

@keyframes loading {
    to {
        background-position-x: -20%;
    }
}


.user-page p.banned {
    font-style: italic;
}

.user-page .feeds.feeds-show-none,
.feeds-show-none {
    display: none;
}

.feeds .feed-new-user {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


/*
    EDIT LINK PRI CLANKOCH
*/
.edit-link {
    grid-column: 1 / -1;
    display: block;
    width: fit-content;
    padding-bottom: 1rem;
    font-weight: bold;
    color: red;
}

/*
    RECENZIA
*/
.review-container {
    padding: 2.5%;
    border: 2px solid var(--color-font);
    background-color: var(--color-background-special);
}

.review-container h2.review-name {
    font-size: var(--review-box-font-size-head);
    padding-top: 5%;
    padding-bottom: 7.5%;
    margin: auto;
    border-bottom: 2px solid var(--color-separator);
}

.review-container h2:hover {
    color: unset;
}

.review-container .review-attribute-container {
    margin-top: 2rem;
}

.review-container .review-attribute-container p {
    margin-top: 0.3rem !important;
    font-weight: bold !important;
}

.review-container .review-bar {
    background-color: var(--color-separator);
}

.review-container .review-bar-score {
    background-color: var(--color-crazy);
}

.review-container .review-attribute-container.stars {
    margin-top: 1rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.review-container .review-attribute-container.stars p {
    text-align: left;
}

.review-container .review-attribute-container.stars p.result {
    margin: auto 0 auto 1rem !important;
    font-size: 1.5rem;
    background: linear-gradient(
            90deg,
            rgba(255, 111, 0, 1) 0%,
            rgba(255, 111, 0, 1) var(--result),
            rgba(233, 236, 239, 1) var(--result),
            rgba(233, 236, 239, 1) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.review-container .review-resume {
    display: flex;
    flex-direction: column;

    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid var(--color-separator);
}

.review-container .review-resume > div {
    display: flex;
    flex-direction: column;
}

.review-container .review-resume .review-score {
    grid-column: 1 / 2;
}

.review-container .review-resume .review-score h2 {
    font-size: var(--review-box-font-size-score);
    margin: auto;
    margin-top: 0;
}

.review-container .review-resume .review-verdict {
    grid-column: 3 / 4;
}

.review-container .review-resume .review-verdict h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    padding: 0;
}

.review-container .review-resume.stars {
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
}

.review-container .review-resume.stars .review-score {
    text-align: center;
}

.review-container .review-resume.stars .review-score h2 {
    margin-bottom: 0;
    padding-bottom: 0;
}

.review-container .review-resume.stars .review-score p.result {
    width: fit-content;
    text-align: center;
    margin: auto;
    margin-top: 0 !important;
    font-size: 1.5rem;
    background: linear-gradient(
            90deg,
            rgba(255, 111, 0, 1) 0%,
            rgba(255, 111, 0, 1) var(--result),
            rgba(233, 236, 239, 1) var(--result),
            rgba(233, 236, 239, 1) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.review-container .review-extras {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 2px solid var(--color-separator);
}

.review-container .review-extras a {
    color: var(--color-crazy);
    font-weight: bold;
    text-decoration: none !important;
    width: fit-content;
    margin-right: 1rem;
}

.review-container .review-extras a:hover {
    color: var(--color-crazy-hover);
    cursor: pointer;
}

.review-container .review-extras p {
    font-weight: bold !important;
}

/*
    BOČNÝ PANEL A PLUGINY
*/

aside {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
}

section.article-big aside {
    padding: 2rem var(--article-big-padding-side);
}

aside.tag-page {
    display: none;
}

aside h3 {
    font-size: var(--font-size-articles-head);
}

section.article-big aside h3 {
    font-size: var(--font-size-articles-head);
}

aside.tag-page h3 {
    padding-top: 2.5%;
}

/* Patreon box */
.patreon-box {
    padding: 2px;
    background: var(--color-box-in-article);
    margin-bottom: 2rem;
}

.patreon-box p {
    padding: 3%;
    background: var(--color-background);
    font-weight: bold !important;
    text-align: center !important;
    font-size: 1.3rem !important;
}


.login-aside,
.profile-aside {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    gap: 1rem;
    width: 100%;
}

.profile-aside::-webkit-scrollbar,
.profile-aside > *::-webkit-scrollbar {
    display: none;
}

.profile-aside .head-with-links {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.profile-aside .head-with-links .links-container {
    display: flex;
    flex-direction: row;
    gap: 1rem;

    overflow-x: scroll;
    width: 100%;
    margin-left: auto;
}

.profile-aside .head-with-links .links-container::-webkit-scrollbar {
    display: none;
}

.profile-aside .head-with-links .links {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 1rem;

    width: 100%;
    margin: auto;
}

.login-aside .login-button,
.profile-aside .logout-button {
    font-size: 1.2rem;
    font-weight: bold;
    margin: auto 0;
}

.login-aside h3,
.profile-aside h3 {
    font-size: 2rem;
    margin: auto 0;
}

.profile-aside h4 {
    font-size: 1.4rem;
    margin-bottom: 0.3rem;
}

.login-aside div.container,
.profile-aside div.container {
    margin-bottom: 1rem;
}

.login-aside div.container.buttons {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.profile-aside .container div {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 1rem;
    overflow-x: scroll;
}

.login-aside div.container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.login-aside div.container.row {
    flex-direction: row;
    padding: 0;
}

.login-aside label {
    margin-bottom: 1rem;
}

.login-aside label.inline {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.login-aside div.container label {
    margin-bottom: 0;
}

.login-aside label p {
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
}


/* Tags carousel */
/*
.tags-carousel-container {
  padding-bottom: 1rem;
}
*/
.tags-carousel-container > *::-webkit-scrollbar {
    display: none;
}

.tags-carousel-container h2 {
    font-size: var(--font-size-articles-head);
    /* padding: 2.5% 0; */
    padding-bottom: 2rem;
}

.tags-carousel-container .tags-container {
    position: relative;
    width: 100%;
    scrollbar-width: none;
}

.tags-carousel-container .tags-container .tags {
    display: flex;
    justify-content: flex-start;
    flex-wrap: unset;
    gap: 1rem;

    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-width: none;
    padding: 0;

    -webkit-overflow-scrolling: touch;
}

.tags-carousel-container .tags-container .tags a {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    display: flex;
    flex-direction: column;
    max-width: 230px;
    padding: unset;

    font-size: unset;
    text-transform: unset;
    letter-spacing: unset;

    background: unset;
    border: unset;
}

.tags-carousel-container .tags-container .tags a.box-art {
    max-width: 140px;
}

.tags-carousel-container .tags-container .tags a img {
    width: 230px;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    border-radius: 5px;
    /*max-width: var(--review-max-width);*/
}

.tags-carousel-container .tags-container .tags a.box-art img {
    width: 140px;
    aspect-ratio: 3 / 4;
    border-radius: 5px;
}

.tags-carousel-container .tags-container .tags a h4 {
    font-size: 0.85rem;
    font-weight: bold;
    margin: unset;
    padding-top: 1rem;
    /* padding-bottom: calc(1rem - var(--reviews-padding)); */
}

/*
    VIDEO BANNER
*/

* > .video-banner-container {
    width: 100%;
    position: relative;
}

* > .video-banner-container .video {
    width: 100%;
    height: 600px;
    object-fit: cover;
    object-position: center;
}

* > .video-banner-container .info {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    width: calc(100% - 2em);
    /*transform: translateY(-50%);*/

    display: flex;
    flex-direction: column;
    gap: 1rem;
}

* > .video-banner-container .info h3,
* > .video-banner-container .info p {
    font-size: 2rem !important;
    color: var(--color-font-white) !important;
    margin: 0 !important;

    width: 100%;
}

* > .video-banner-container .info p {
    font-size: 1.2rem !important;
    color: #dedede !important;
}

* > .video-banner-container .info p:empty {
    display: none;
}

* > .video-banner-container .tags-carousel-container {
    padding-bottom: 0;
}

* > .video-banner-container .tags-carousel-container img {
    border-radius: 5px;
}

* > .video-banner-container .tags-carousel-container .title {
    color: var(--color-font-white);
}

/*
    podcast-banner
*/

.podcast-banner {
    padding: 2.5% 2.5%;
    background-color: var(--podcast-background);

    display: flex;
    flex-direction: column;
}

.podcast-banner > * {
    padding: 2% 0;
}

.podcast-banner img {
    grid-column: 1 / 2;
    margin: auto;
    width: 50%;
    height: auto;
    border-radius: 0.5rem;
    aspect-ratio: 1 / 1;
    border-radius: 5px;
}

.podcast-banner div {
    grid-column: 3 / 4;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.podcast-banner h2 {
    color: var(--podcast-font-color);
    font-size: 4rem;
    font-size: var(--podcast-font-size-head);
    text-align: center;
}

.podcast-banner p {
    margin-top: 5%;
    font-size: var(--podcast-font-size-text);
    text-align: justify;
}

.podcast-banner .button {
    margin-top: auto;
    background-color: var(--color-separator);
    color: var(--podcast-font-color);
    font-size: var(--podcast-font-size-button);
    font-weight: bold;
    padding: 0.6rem 1.5rem;
    margin: 5% auto;
    margin-bottom: 0;
    width: fit-content;
    filter: invert(1);
}

.podcast-banner .button:hover {
    filter: unset;
}


/*
    PODCAST PAGE
*/
body.podcast-page {
    background: linear-gradient(
            0deg,
            rgba(34, 34, 34, 1) 20%,
            rgba(255, 109, 0, 1) 100%
    );
    background-attachment: fixed;
    max-width: unset;
}

section.podcast-page {
    max-width: 1500px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    background: linear-gradient(
            0deg,
            rgba(34, 34, 34, 1) 20%,
            rgba(255, 109, 0, 1) 100%
    );
    background-attachment: fixed;
    padding: 5%;
    margin: 0 auto;
}

section.podcast-page header {
    display: grid;
    grid-template-columns: 20% 80%;
}

section.podcast-page img {
    display: none;
    width: 90%;
    border-radius: 5px;
}

section.podcast-page h1 {
    font-size: 12vw;
    margin: auto 0;
    color: var(--color-font-white);
}

section.podcast-page h2 {
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
    color: var(--color-font-white);
}

section.podcast-page p,
section.podcast-page p > *,
section.podcast-page a {
    margin-bottom: 0.75rem;
    color: #dbdbdb !important;
}

section.podcast-page a {
    text-decoration: underline;
}

section.podcast-page .content {
    display: flex;
    flex-direction: column;
    margin-top: 5%;
}


/*
    YOUTUBE
*/
.youtube-video {
    background-color: #000;
    margin-bottom: 1%;
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
    cursor: pointer;
    padding-bottom: 0;
    margin: 0;
    border-radius: 5px;
}

.youtube-video img {
    width: 100%;
    max-height: unset !important;
    top: -16.84%;
    left: 0;
    opacity: 0.7;
}

.youtube-video .youtube-video-play {
    width: 68px;
    height: 48px;
    background-color: #333;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
    z-index: 1;
    opacity: 0.8;
    border-radius: 6px;
}

.youtube-video .youtube-video-play:before {
    content: "";
    border-style: solid;
    border-width: 15px 0 15px 26px;
    border-color: transparent transparent transparent #fff;
}

.youtube-video img,
.youtube-video .youtube-video-play {
    cursor: pointer;
}

.youtube-video img,
.youtube-video iframe,
.youtube-video .youtube-video-play,
.youtube-video .youtube-video-play:before {
    position: absolute;
}

.youtube-video .youtube-video-play,
.youtube-video .youtube-video-play:before {
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
}

.youtube-video iframe {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

.youtube-video .youtube-video-play:hover {
    background-color: #f00;
}

.youtube-video p {
    position: absolute;
    top: 0.75rem;
    left: 1rem;
    width: calc(100% - 2em);
    color: var(--color-font-white) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/*
    COMMENTS
*/

.comments-container {
    grid-column: 3;

    width: 100%;
    margin-top: 2rem;
}

.trumbowyg-response-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.login-comment-button,
.make-comment-button {
    margin: 1rem 0;
    margin-left: auto;
}

/*
.make-comment-button,
.login-comment-button,
.send-comment-response-button,
.comments-show-button {
  margin: auto;
  margin-bottom: 2rem;
  width: fit-content;
  padding: 1% 2%;

  font-size: 0.9rem !important;
  font-weight: bold !important;
  text-transform: uppercase;
  text-decoration: none !important;
  letter-spacing: 0.1rem;

  color: var(--color-background-black) !important;
  background: var(--color-crazy);
  border: 1px solid var(--color-crazy);
}
.make-comment-button,
.login-comment-button {
  display: block;
  margin: 2rem 0;
  margin-left: auto;
}
.send-comment-response-button {
  margin: 1rem 0 !important;
}
.make-comment-button:hover,
.login-comment-button:hover,
.send-comment-response-button:hover,
.comments-show-button:hover {
  cursor: pointer;
  color: var(--color-font-white) !important;
  background: var(--color-background-black);
  border-color: var(--color-font);
}
.cancel-comment-response-button {
  margin: 1rem 0;
  width: fit-content;
  padding: 1% 2%;

  font-size: 0.9rem;
  font-weight: bold !important;
  text-transform: uppercase;
  text-decoration: none !important;
  letter-spacing: 0.1rem;

  background: var(--color-background);
  color: var(--color-font);
  border: 1px solid var(--color-font);

  align-self: flex-end;
}
.cancel-comment-response-button:hover {
  background: var(--color-background-invert);
  color: var(--color-font-invert) !important;
  border-color: var(--color-font);
}
*/
.comments-area {
    display: none;
}

.comments-area h3 {
    font-size: var(--font-size-articles-head);
    margin-bottom: 1rem;
}

.comment-container {
    margin: 1rem auto;
    width: 70%;
    margin-left: 30%;
    box-sizing: border-box;
}

.comment-container.level-5 {
    margin-left: 25%;
    width: 75%;
}

.comment-container.level-4 {
    margin-left: 20%;
    width: 80%;
}

.comment-container.level-3 {
    margin-left: 15%;
    width: 85%;
}

.comment-container.level-2 {
    margin-left: 10%;
    width: 90%;
}

.comment-container.level-1 {
    margin-left: 5%;
    width: 95%;
}

.comment-container.level-0 {
    margin-left: 0%;
    width: 100%;
}

div.comment {
    display: flex;
    gap: 1rem;
}

div.comment img.comment-user-image {
    max-width: 4rem;
    max-height: 4rem;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
}

div.comment div.info {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
}

div.comment div.info a {
    color: var(--color-crazy);
    font-size: 0.9rem;
    text-transform: uppercase;
    font-weight: bold;
}

div.comment div.info a:hover {
    cursor: pointer;
    color: var(--color-crazy-hover);
}

div.comment div.info p {
    font-size: 1rem;
    color: var(--color-font);
}

div.comment div.info p span {
    font-size: 0.8rem;
    color: var(--color-font-hover);
}

div.comment div.info p img {
    width: 50%;
    border-radius: 5px;
}

div.comment div.buttons {
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
}

div.comment div.buttons.end {
    justify-content: flex-end;
}

div.comment div.buttons p {
    font-size: 1rem;
    font-weight: bold;
    margin: auto 0;
}

div.comment div.buttons p:hover {
    cursor: pointer;
    color: var(--color-crazy-hover);
}

.trumbowyg-box,
.trumbowyg-editor {
    min-height: 150px !important;
}

svg.heart-like {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: var(--color-font);
    stroke-width: 3px;
}

svg.heart-like.liked {
    fill: #f91881;
    stroke: #f91881;
}

svg.heart-like:hover {
    cursor: pointer;
}

.likes-count {
    margin-left: -0.5rem;
    font-weight: bold;
}

/*
    TAGY
*/

h1.tag-title {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    font-size: 3rem;
    /* margin-bottom: 0.5rem; */
}

.tag-header a.edit-link {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

.tag-info {
    display: flex;
    flex-direction: column;
    /* margin-bottom: 1rem;
    margin-top: 1rem; */
}

.tag-info p:not(.title) {
    font-size: var(--article-text-size);
    text-align: justify;
}

.tag-info .image img {
    display: none;
    border-radius: 5px;
}

.tag-info .image .buttons-container {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.tag-info .image .tag-button {
    margin-top: 0;
    margin-bottom: 2rem;
    padding: 0.5rem 1rem;
    width: 47.5%;
    box-sizing: border-box;

    font-size: 1.1rem;
    font-weight: bold;
    text-align: center;
}

.tag-info .info {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    margin-top: 0.5rem;
}

.tag-info.text-only .info:empty {
    display: none;
}

.tag-info .info p.title {
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
}

.tag-info .info p a {
    text-decoration: underline;
}

.tag-info .info p a:hover {
    color: var(--color-crazy);
}

.tag-info .info .p-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tag-parallax-mobile-container {
    position: fixed;
    top: 4rem;
    width: 100%;
    height: calc(90vh - 8em);

    z-index: -1;
}

.tag-mobile-parallax-background {
    width: 110%;
    height: 110%;
    object-fit: cover;
    object-position: center;

    margin-left: -5%;
    margin-top: -5%;

    background-image: url("/uploads/placeholder.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.tag-mobile-parallax-boxart-backdrop {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 100%;
    height: 100%;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);


    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.tag-mobile-parallax-boxart {
    width: 70%;
    max-width: 400px;
    margin: auto;

    aspect-ratio: 3 / 4;
    border-radius: 5px;

    -webkit-box-shadow: 0px 0px 25px 5px rgba(0, 0, 0, 0.7);
    box-shadow: 0px 0px 25px 5px rgba(0, 0, 0, 0.7);
    object-fit: cover;
    object-position: center;
}

h1.tag-title-mobile {
    position: absolute;
    bottom: 0;

    font-size: 3rem;
    width: 95%;
    line-height: 130%;
    padding: 2.5% 2.5%;
    /*margin-top: 80vh;
    transform: translateY(-100%);*/
    margin-bottom: 2.5%;
}

h1.tag-title-mobile span {
    -webkit-box-decoration-break: clone;
    -o-box-decoration-break: clone;
    box-decoration-break: clone;

    background-color: black;
    color: var(--color-font-white);
    padding: 0 2.5%;
}

.review-box,
.review-box div {
    display: flex;
    flex-direction: column;
    text-align: justify;
}

.review-box {
    background: var(--color-separator);
    padding: 2.5%;
    border-radius: 5px;
    row-gap: 2rem;
}

.review-box .title {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.review-box .title h2 {
    font-size: var(--font-size-articles-head);
    /* padding: 2.5% 0; */
    padding-bottom: 0;
}

.review-box .title span {
    text-wrap: nowrap;
    font-weight: bold;
    font-size: calc(var(--font-size-articles-head) * 0.5);
    color: var(--color-font-on-separator);
}

.review-box p.result {
    text-align: center;
    font-weight: bold;
    font-size: 4rem;
    margin-bottom: 0.5rem;
}

.review-box .p-container {
    grid-column: 3 / 4;

    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.review-box p {
    font-size: var(--article-text-size);
}

.review-box.stars div.review-score {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    margin: auto;

}

.review-box.stars div.review-score h2 {
    font-size: 3rem;
    padding: unset;
    margin: 0 auto;
}

.review-box.stars div.review-score p {
    width: fit-content;
    margin: auto;
    margin-top: 0 !important;
    font-size: 1.5rem;
    background: linear-gradient(
            90deg,
            rgba(255, 111, 0, 1) 0%,
            rgba(255, 111, 0, 1) var(--result),
            var(--color-font-on-separator) var(--result),
            var(--color-font-on-separator) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.review-box .button {
    margin: 0 auto;
}

.review-box .button:hover {
    background-color: var(--color-crazy) !important;
}

/*
    CATEGORY
*/
/*
.categories-info,
.search-info,
.user-info,
.podcast-info {
    top: calc(4rem + 1px);
}
div.top-menu ~ header.desktop-header .categories-info {
    top: calc(6.4rem + 1px);
}
*/

.category-title ~ p {
    text-align: justify;
    padding-bottom: 1rem;
}

.category-name {
    color: var(--color-crazy);
}

.category-navigation {
    padding: var(--nav-padding) 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: scroll;
    padding-bottom: 4rem;
}

.category-navigation h3 {
    font-size: 1.4rem;
    margin: auto 0;
}

.category-navigation .categories-container {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    flex-wrap: wrap;
}

.category-navigation .categories-container a:hover {
    color: var(--color-crazy);
}

.top-menu {
    grid-column: 1 / 3;
    grid-row: 1 / 2;

    display: none;
    flex-direction: row;
    justify-content: flex-start;
    column-gap: 1rem;
    position: sticky;
    top: 0;

    background: #242424;
    height: fit-content;
    padding: 0;
    z-index: 100;
}

.top-menu a {
    display: flex;
    flex-direction: row;
    align-items: center;

    width: fit-content;
    text-decoration: none;
}

.top-menu a.welcome {
    align-self: flex-end;
    margin-left: auto;
}

.top-menu a:hover {
    background: #484848;
}

.top-menu a p {
    color: #fff;
    margin: 0;
    padding: 0.5rem 1rem;
    padding-left: 0.3rem;
    font-size: 1.1rem;
}

.top-menu a.welcome p {
    padding-right: 0.3rem;
}

.top-menu img {
    filter: invert(1);
    width: 1rem;
    padding-left: 0.5rem;
}

/*
    FRONTEND MODAL
*/
.modal-container {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(0, 0, 0, 0.6);

    z-index: 100;
}

.modal-container .content {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.modal-container .close {
    position: fixed;
    top: 1rem;
    right: 1rem;

    width: 3rem;
    height: 3rem;
    padding: 0.1rem;
    background: rgba(0, 0, 0, 0.6);

    z-index: 101;
}

.modal-container .close:before,
.modal-container .close:after {
    position: absolute;
    left: 1.5rem;
    content: " ";
    height: 3rem;
    width: 2px;
    background-color: rgba(255, 255, 255, 0.8);
}

.modal-container .close:before {
    transform: rotate(45deg);
}

.modal-container .close:after {
    transform: rotate(-45deg);
}

.modal-container .close:hover {
    background: rgba(0, 0, 0, 1);
    cursor: pointer;
}

.modal-container .close:hover:before,
.modal-container .close:hover:after {
    background-color: var(--color-font-white);
}

/*
    ARROWS
*/

.arrow {
    position: absolute;
    top: 30%;

    fill: white;
    opacity: 0;

    transition: all 0.25s linear;
    border-radius: 50%;
    -webkit-box-shadow: 0px 0px 15px 1px #ffffff;
    box-shadow: 0px 0px 15px 1px #ffffff;
}

.arrow-left {
    left: 0;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.arrow-right {
    right: 0;
}

*:hover > .arrow:hover {
    cursor: pointer;
    opacity: 1;
}

*:hover > .arrow-left {
    left: 1rem;
    opacity: 0.5;
}

*:hover > .arrow-right {
    right: 1rem;
    opacity: 0.5;
}

.scroll {
    overflow-x: hidden;
}

.scroll::-webkit-scrollbar {
    display: none;
}

.scroll-item {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    display: flex;
    flex-direction: column;
}

/* Umiestnenie sipov v ramci konkretnzch carouselov */
.tags-carousel-container .tags-container .arrow {
    top: 33%;
}

.feeds-for-profile-aside .arrow {
    top: 50%;
}

.feeds-for-profile-aside .arrow-left {
    left: calc(var(--infobox-padding) + 1em);
}

.feeds-for-profile-aside .arrow-right {
    right: calc(var(--infobox-padding) + 1em);
}

/*
    DESKTOP/MOBILE
*/
.desktop {
    display: none;
}

.mobile {
    display: inherit;
}

.mobile-menu-infobox {
    z-index: 100;
    position: fixed !important;
    top: 0;
    left: 0;
}

.not-displayed {
    display: none;
}

.not-move {
    overflow: hidden;
}

.blur-up::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100vh;
    backdrop-filter: blur(100px);
    -webkit-backdrop-filter: blur(100px);
}

.lazyloaded.blur-up::before {
    display: none;
}

.light {
    display: var(--display-light);
}

.dark {
    display: var(--display-dark);
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .first-slide-container div.info h1 {
        --font-size-slideshow-first: 1.5rem;
        --font-size-slideshow-normal: 1.1rem;
    }

    .article a.tag {
        display: block;
    }

    .article.big a.tag {
        padding-top: 0.5rem;
    }

    .article h2 {
        padding-top: 7.5%;
    }

    .article.big h2 {
        --article-big-font-size-head: 1.3rem;
    }

    section.article-big .header {
        --article-big-translate-top: -3rem;
    }

    section.article-big article h1 {
        --article-big-header: 3rem;
    }

    .review-container h2.review-name {
        padding-top: 0;
        padding-bottom: 2.5%;
    }

    /*
          USER PAGE
      */
    img.user-profile-image {
        grid-column: 1 / 2;
        width: 100%;
        margin: unset;
    }

    .user-profile .info .info-header {
        display: grid;
        grid-template-columns: 30% 5% 65%;
    }

    .user-profile .info .info-header.admin {
        margin-top: -5%;
    }

    .user-profile .info .info-name {
        grid-column: 3 / 4;
    }

    .user-profile .info .info-name .social-media {
        justify-content: flex-start;
    }

    .user-profile .info .info-name .social-media svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    .user-profile .info .info-name h1 {
        text-align: left;
    }

    .user-profile .info .info-name p {
        width: fit-content;
        margin: unset;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .desktop {
        display: inherit;
    }

    .mobile {
        display: none;
    }

    /* Header */
    header div.search-container {
        overflow-y: auto;
    }


    header div.search-info .result {
        display: grid;
        grid-template-columns: 15% 5% 80%;
        margin: 1.5% 0;
    }


    /*
          USER-AREA PLUGIN
      */
    .login-aside {
        width: 60%;
    }

    .profile-aside {
        overflow-y: none;
    }

    .profile-aside .head-with-links {
        flex-direction: row;
    }

    .profile-aside .container div {
        overflow-x: hidden;
    }

    .button-selector {
        width: 300px;
    }


    /* Layout pre plugin */
    .feeds-for-profile-aside {
        overflow-y: none;
    }

    .user-page .feeds.plugin {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        gap: 1rem;

        scroll-snap-type: x mandatory;
        overflow-x: scroll;
        overflow-y: hidden;
        scrollbar-width: none;
        padding: 0;

        -webkit-overflow-scrolling: touch;
    }

    .user-page .feeds.plugin .feed {
        min-width: 50%;

        scroll-snap-align: start;
        scroll-snap-stop: normal;
        display: flex;
        flex-direction: column;
    }

    .column.tag-page {
        margin-top: unset;
        display: grid;
        grid-template-columns: 67% 2rem calc(33% - 2rem);
        padding-top: 2rem;
        position: unset;
        top: unset;
    }

    .row {
        display: grid;
        grid-template-columns: 67% 2rem calc(33% - 2rem);

        padding: 2rem var(--row-padding);
    }

    /* Articles */
    .article p.perex {
        display: block;
    }

    section.article-normal {
        display: grid;
        grid-template-columns: 67% 2rem calc(33% - 2rem);

        padding: 2.5%;
    }

    section.article-middle {
        display: grid;
        grid-template-areas:
      "image   image   image"
      "article .       aside";
        grid-template-columns: 67% 2rem calc(33% - 2rem);
        grid-template-rows: auto auto;
        --article-middle-padding-side: 0;
    }

    section.article-middle .main-image-container {
        grid-area: image;
    }

    section.article-middle .main-image-container .info h1 {
        font-size: 4rem;
    }

    section.article-middle .main-image-container .info h2 {
        font-size: 1.5rem;
    }

    section.article-middle article {
        grid-area: article;
    }

    section.article-middle aside {
        grid-area: aside;
    }

    .article h2 {
        --article-font-size-head: 1.15rem;
        padding-top: 7.5%;
    }

    /* Review box */
    .review-container .review-resume {
        display: grid;
        grid-template-columns: 20% 10% 70%;
    }

    .review-container .review-resume .review-score h2 {
        --review-box-font-size-score: 3.5rem;
    }

    .review-container .review-resume.stars {
        flex-direction: row;
        gap: 2rem;
    }

    .review-container .review-resume.stars .review-score {
        padding-bottom: unset;
    }

    /*
          TAGY
      */
    .tag-info {
        grid-column: 1 / 2;
        grid-row: 3 / 4;

        display: grid;
        grid-template-columns: 30% 2rem calc(70% - 2rem);
        margin-top: unset;
    }

    .tag-info.text-only {
        display: flex;
        flex-direction: column;
    }

    .tag-info .image {
        grid-column: 1 / 2;
    }

    .tag-info .image div {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .tag-info .image img {
        display: block;
        width: 100%;
        aspect-ratio: 3 / 4;
        object-fit: cover;
        border-radius: 5px;
    }

    .tag-info .image .buttons-container {
        display: flex;
        flex-direction: column;
    }

    .tag-info .image .tag-button {
        padding: 0.5rem 1rem;
        margin-bottom: 0;
        width: 100%;
        /*width: calc(100% - 1em);*/
    }

    .tag-info .info {
        margin-top: unset;
        grid-column: 3 / 4;
    }

    .tag-mobile-parallax-background,
    .tag-title-mobile {
        display: none;
    }

    aside {
        padding: 0;
    }

    aside.tag-page {
        display: grid;
        grid-column: 3 / 4;
        grid-row: 1 / 5;
    }

    /* Review box */
    .review-box {
        grid-column: 1 / 2;
        grid-row: 4 / 5;

        display: grid;
    }

    .review-box .title {
        align-items: flex-start;
    }

    .review-box div {
        display: grid;
        grid-template-columns: 25% 5% 70%;
    }

    .review-box p {
        grid-column: 3 / 4;
    }

    .review-box p.result {
        grid-column: 1 / 2;
        margin: auto 0;
    }

    .review-box .button {
        margin-right: 0;
    }

    /*
          VIDEO BANNER
      */
    .video-banner-container .info {
        left: 2rem;
        width: calc(100% - 4em);
    }

    .video-banner-container .info h3,
    .video-banner-container .info p {
        width: 30rem;
        max-width: calc(100% - 4em);
    }

    .video-banner-container .info p {
        margin-bottom: 2rem;
    }

    /* Podcast */
    .podcast-banner {
        display: grid;
        grid-template-columns: 25% 10% 65%;
    }

    .podcast-banner > * {
        padding: unset;
    }

    .podcast-banner img {
        width: 100%;
        border-radius: 5px;
    }

    .podcast-banner h2 {
        --podcast-font-size-head: 3rem;
        text-align: left;
    }

    .podcast-banner .button {
        margin: unset;
        margin-top: 5%;
    }

    /*
          LAST PODCAST EPISODE
      */
    /*
          PODCAST PAGE
      */
    section.podcast-page h1 {
        font-size: 6rem;
    }


    /* Review box */
    .review-container .review-extras {
        flex-direction: row;
    }

    .review-container .review-extras p {
        margin-left: auto;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    header nav {
        --header-width: 80%;
        --header-padding: 10%;
    }

    header nav div.center {
        justify-content: unset;
        border-right: 1px solid var(--color-separator);
        padding-right: var(--nav-padding);
    }

    header div.infobox {
        --infobox-width: 100%;
        --infobox-padding: 10%;
        max-width: 1500px;
        box-sizing: border-box;

        height: 600px;

        top: calc(4rem + 1px);
    }

    div.top-menu ~ header.desktop-header {
        top: 2.3rem;
    }

    div.top-menu ~ header.desktop-header div.infobox {
        top: calc(6.4rem + 1px);
    }

    /* SLIDESHOW */
    .slideshow-container {
        flex-direction: row;
        justify-content: space-between;

        --slideshow-width: 80%;
        --slideshow-padding: 10%;
    }

    .first-slide-container {
        width: 61%;
    }

    .other-slides-container {
        width: 36%;
    }

    .first-slide-container a.tag,
    .other-slide a.tag {
        display: block;
        font-weight: bold;
        text-transform: uppercase;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        letter-spacing: 0.1rem;
    }

    .first-slide-container div.info a.tag {
        font-size: 0.8rem;
        padding: 1% 2%;
        width: fit-content;
        background: var(--color-crazy);
        color: var(--color-background-black);
        border-radius: 5px;
    }

    .other-slide a.tag {
        font-size: 0.6rem;
        color: var(--color-crazy);
    }


    .first-slide-container div.info a.tag::before {
        display: none;
    }

    .first-slide-container div.info a.tag:hover {
        background: var(--color-background-black);
        color: var(--color-font-white);
    }

    .other-slide a.tag:hover {
        color: var(--color-font-hover);
    }

    .first-slide-container div.info h1,
    .other-slide div.info h1 {
        --font-size-slideshow-first: 2rem;
        --font-size-slideshow-normal: 1.2rem;
    }

    .first-slide-container div.info h1 {
        margin-top: 3%;
    }

    .other-slides-container hr {
        border-top: 1px solid var(--color-separator);
    }

    .column.tag-page {
        --row-padding: 10%;
    }

    .row {
        --row-padding: 10%;
    }

    /* Articles */
    section.article-normal,
    section.article-middle {
        padding: 2.5% 10%;
    }

    section.article-middle {
        padding-top: 0;
    }

    .article h2 {
        --article-font-size-head: 1.3rem;
    }

    .article.big h2 {
        --article-big-font-size-head: 1.5rem;
    }

    article .content {
        display: grid;
        grid-template-columns: 8% 4% 88%;

        padding-top: 4.5%;
    }

    article .content .social-media div {
        flex-direction: column;

        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 6rem;

        margin-bottom: unset;
        border-bottom: unset;
    }

    section.article-big article .content .social-media div {
        top: 10rem;
    }

    article .content .social-media p {
        display: block;
    }

    article .content .social-media a {
        padding: 2.5% 10%;
        padding-left: 0;
    }

    article .content .social-media svg.icon {
        padding-bottom: 1rem;
    }

    section.article-big .header {
        --article-big-translate-top: -4rem;
        --article-big-padding-side: 10%;
    }

    section.article-big article a.tag {
        display: block;
    }

    section.article-big article h1 {
        --article-big-header: 4rem;
    }

    section.article-big article .content {
        --article-big-translate-top: -4rem;
        --article-big-padding-side: 10%;
    }

    /*
          User medailon (author box)
      */
    .author {
        display: grid;
        grid-template-columns: 25% 5% 70%;
    }

    .author img.author {
        grid-column: 1 / 2;

        width: 75%;
        margin-bottom: auto;
    }

    .author .author-info {
        grid-column: 3 / 4;
        display: grid;
        grid-template-columns: 50% 10% 40%;
        grid-template-rows: 2.5rem auto;
    }

    .author .author-info h3 {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        text-align: left;
        margin: auto 0;
    }

    .author .author-info .social-media {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
        justify-content: flex-end;
        gap: 1rem;
        width: 100%;
    }

    .author .author-info .info {
        grid-column: 1 / 4;
        grid-row: 2 / 3;
        margin: auto 0;
        padding: 0;
    }

    /* Review box in article */
    .review-container h2.review-name {
        --review-box-font-size-head: 2rem;
    }

    section.article-big aside {
        --article-big-padding-side: 10%;
    }

    /*
          PODCAST PAGE
      */
    section.podcast-page {
        padding: 5% 10%;
    }

    section.podcast-page img {
        display: block;
        border-radius: 5px;
    }

    section.podcast-page .content {
        display: grid;
        grid-template-columns: 68% 4% 28%;
    }

    section.podcast-page .info {
        grid-column: 3 / 4;
    }

    section.podcast-page .episodes {
        grid-column: 1 / 2;
        grid-row: 1;
    }

    /*
          PLUGINY
      */
    /* Podcast */
    .podcast-banner {
        padding: 5% 10%;
    }

    .podcast-banner h2 {
        --podcast-font-size-head: 4rem;
    }

    .top-menu {
        display: flex;
        --row-padding: 10%;
    }


    footer .info-links {
        flex-direction: row;
        gap: 1rem;
    }

    footer .info-links span.break {
        display: inline-block;
        width: 2px;
        margin: 0 0.5rem;
        background-color: var(--color-font);
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    section.article-big article .header {
        --article-big-translate-top: -4rem;
        --article-big-padding-side: 20%;
    }

    section.article-big article .content {
        --article-big-translate-top: -4rem;
        --article-big-padding-side: 20%;
    }
}


/* HELPERS */
.margin-bottom-1rem {
    margin-bottom: 1rem;
}