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

@font-face {
  font-family: "Inter";
  src: url("Inter-Light.woff2") format("woff2");
  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: #c35500;
  --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: 0.9rem;

  /*  Reviews */
  --reviews-background: #e9e9e9;
  --reviews-width: 95%;
  --reviews-padding: 2.5%;
  --review-max-width: 15rem;
  --font-size-reviews-head: 2rem;
  --font-size-reviews: 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-crazy: #ff8628;

  --color-user-badge: #ffffff;

  /* Reviews */
  --reviews-background: #000000;

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

  /* Patreon box */
  --color-box-in-article: #494949;
}
[data-theme="dark"] article .content .article a {
    color: #ff8628 !important;
}

/* 
    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;
}

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: #595959;
  font-size: 0.8rem;
  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;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease;
}
.button:hover {
  background-color: var(--color-separator) !important;
  color: var(--color-font) !important;
  filter: unset;
  cursor: pointer;
  transform: translateY(-2px); 
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.button:active {
    transform: translateY(0); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.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;

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

.slideshow-container div.separator {
  display: none;
}

.slideshow-container div {
  grid-column: 3 / 4;

  position: relative;
  display: grid;
  grid-template-columns: 55% 5% 40%;
}

.slideshow-container div a {
  grid-column: 3 / 4;
  grid-row: 1 / 2;

  display: block;
}

.slideshow-container div img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.slideshow-container div div.info {
  grid-column: 1 / 2;

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

  height: fit-content;
  margin: auto 0;
}

.slideshow-container div div a.tag {
  display: none;
}

.slideshow-container div div h1 {
  font-size: var(--font-size-slideshow-normal);
}

.slideshow-container div div span {
}
.slideshow-container div div h1 span:hover {
  color: var(--color-font-hover);
}

.slideshow-container div:first-of-type {
  display: unset;
  position: relative;
  height: fit-content;
  grid-column: 1 / 2;
  grid-row: 1 / -1;
}

.slideshow-container div:first-of-type a {
  display: block;
}

.slideshow-container div:first-of-type img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: 5px;
}

.slideshow-container div:first-of-type div.info {
  display: flex;
  flex-direction: column;

  position: absolute;
  left: 5%;
  bottom: 5%;

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

.slideshow-container div:first-of-type div h1 {
  width: 100%;
  font-size: var(--font-size-slideshow-first);
}

.slideshow-container div:first-of-type div 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);
}
.slideshow-container div:first-of-type div h1 span:hover {
  background-color: var(--color-crazy);
  color: var(--color-background-black);
}

.latest-reviews-container {
  position: relative;
  width: var(--reviews-width);

  padding: var(--reviews-padding);
  padding-bottom: calc(1rem + var(--reviews-padding));
  background-color: var(--reviews-background);
}

.latest-reviews-container h3 {
  font-size: var(--font-size-reviews-head);
  padding-top: calc(1rem - var(--reviews-padding));
  padding-bottom: 1rem;
}

.latest-reviews-container .reviews-container {
  position: relative;
  width: 100%;
  scrollbar-width: none; /* Firefox */
}
.latest-reviews-container .reviews-container::-webkit-scrollbar {
  display: none;
}

.latest-reviews-container .reviews-container .reviews {
  display: flex;
  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;
}

.latest-reviews-container .reviews-container .reviews a {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  display: flex;
  flex-direction: column;
}

.latest-reviews-container .reviews-container .reviews a img {
  width: 230px;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;

  border-radius: 5px;
}

.latest-reviews-container .reviews-container .reviews a h4 {
  font-size: 1.0rem;
  font-weight: bold;
  padding-top: 1rem;
  padding-bottom: calc(1rem - var(--reviews-padding));
}

.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;
  object-fit: cover;
  border-radius: 5px;
}
.article.big a.image img {
  aspect-ratio: 16 / 9;
}

.article h2 {
  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: var(--color-background-black);
  border-color: var(--color-font);
}

/* 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
*/
main {
  background: var(--color-background);
}
main.article-normal {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  padding: 2.5%;
  padding-bottom: 20px;
  border: unset;
}
main.article-middle {
  display: flex;
  flex-direction: column;
  border: unset;
}
main.article-big {
  display: flex;
  flex-direction: column;
  border: unset;
}

/* Normalny clanok */

.perex-top {
  color: var(--color-font);
  font-size: var(--article-text-size);
  line-height: var(--article-line-height);
  padding: 10px 0px;
}

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%;
  padding-top: 0;
  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 .main-image {
    width: 100%;  
    height: auto; 
    aspect-ratio: 16/9; 
    object-fit: cover; 
    display: block; 
}



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 {
  color: #c35500;
  font-weight: bold;
  text-decoration: underline;
}

article .content .article .tags a {
  color: #000000 !important;
}

article .content .article .tags a:hover {
  color: #ffffff !important;
}

article .content .article a > * {
  /* Ak je napr <a><strong>PLACEHOLDER</strong></a> */
  color: inherit;
}
article .content .article a:hover {
  color: var(--color-crazy-hover);
  cursor: pointer;
}
article .content .article a:hover > * {
  /* Ak je napr <a><strong>PLACEHOLDER</strong></a> */
  color: var(--color-crazy-hover);
}

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

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

/*
    Stredny clanok
*/
main.article-middle .main-image-container {
  position: relative;
  margin-bottom: 1rem;
}
main.article-middle .main-image-container img {
  width: 100%;
  height: 75vh;
  object-fit: cover;
  object-position: center;
}
main.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;
}
main.article-middle .main-image-container .info h1 {
  font-size: 2rem;
  font-weight: bold;
}
main.article-middle .main-image-container .info h2 {
  font-size: 1.2rem;
  font-weight: normal;
}
main.article-middle .main-image-container .info .author-info-line {
  padding-bottom: 0;
}

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


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

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

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

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

main.article-big article h1 {
  font-size: var(--article-big-header);
  width: 100%;
  line-height: 130%;
  padding: 2.5% 0;
}
main.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%;
}

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

main.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 .author-name {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight: bold;
}
.author .author-info .social-media {
  display: flex;
  justify-content: center;
  gap: 1rem;
  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-atribute-container {
  margin-top: 2rem;
}
.review-container .review-atribute-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-atribute-container.stars {
  margin-top: 1rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.review-container .review-atribute-container.stars p {
  text-align: left;
}
.review-container .review-atribute-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;
}

main.article-big aside {
  padding: 2rem var(--article-big-padding-side);
}
aside.tag-page {
  display: none;
}

aside h3 {
  font-size: var(--font-size-articles-head);
}
main.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.1rem !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: 77%;
}
.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 10px 1px #000000;
}
.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.7;
}
*:hover > .arrow-right {
  right: 1rem;
  opacity: 0.7;
}

.scroll {
  overflow-x: hidden;
}
.scroll::-webkit-scrollbar {
  display: none;
}
.scroll-itrem {
  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);
}

/* Phone (max 768px) */
@media (max-width: 768px) {
	.article h2 {
    --article-font-size-head: 1.3rem;
  }
    .article.big h2 {
    --article-big-font-size-head: 1.3rem;
  }
  .articles .article h2 {
    --article-font-size-head: initial; 
  }
  .articles .article.big h2 {
    --article-big-font-size-head: initial;
  }
  
}

/* Small devices (phones, up to 576px) */
@media (max-width: 576px) {

  .article a.tag {
    display: block;
	margin-bottom: 0.5rem;
  }
}

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

  .article a.tag {
    display: block;
	margin-bottom: 1rem;
  }
  .article.big a.tag {
    padding-top: 0.5rem;

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

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

  main.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;
  }

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

    padding: 2.5%;
  }

  main.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;
  }
  main.article-middle .main-image-container {
    grid-area: image;
  }
  main.article-middle .main-image-container .info h1 {
    font-size: 4rem;
  }
  main.article-middle .main-image-container .info h2 {
    font-size: 1.5rem;
  }
  main.article-middle article {
    grid-area: article;
  }
  main.article-middle aside {
    grid-area: aside;
  }

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

  /* 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-container {
    display: grid;
    grid-template-columns: 61% 3% 36%;
    grid-template-rows: auto auto auto auto auto auto auto;

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

  .slideshow-container div.separator {
    grid-column: 3 / 4;
    display: block;

    margin: auto;
    background-color: var(--color-separator);
    height: 1px;
    width: 100%;
    margin: 2% 0;
  }

  .slideshow-container div div.info {
    justify-content: unset;
  }

  .slideshow-container div div a.tag {
    display: block;
    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;
  }
  .slideshow-container div div a.tag:hover {
    color: var(--color-font-hover);
  }

  .slideshow-container div:first-of-type div a.tag {
    font-size: 0.7rem;
    font-weight: bold;
    padding: 1% 2%;
    background: var(--color-crazy);
    color: var(--color-background-black);
  }
  .slideshow-container div:first-of-type div a.tag::before {
    display: none;
  }
  .slideshow-container div:first-of-type div a.tag:hover {
    background: var(--color-background-black);
    color: var(--color-font-white);
  }

  .slideshow-container div div h1 {
    --font-size-slideshow-first: 2rem;
    --font-size-slideshow-normal: 1.2rem;
    margin-top: 1rem;
  }
  .slideshow-container div:first-of-type div h1 {
    margin-top: 3%;
  }

  .latest-reviews-container {
    --reviews-width: 80%;
    --reviews-padding: 10%;

    padding: 2.5% var(--reviews-padding);
  }

  .latest-reviews-container .reviews-container .reviews a img {
    --review-max-width: 20rem;
  }

  .latest-reviews-container .reviews-container .reviews a h4 {
    --font-size-reviews: 1.2rem;
    padding-bottom: 1rem;
  }

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

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

  .article h2 {
    --article-font-size-head: 1.5rem;
  }
  .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;
  }
  main.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;
  }

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

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

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

  main.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 .author-name {
    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;
  }

  main.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) {
  main.article-big article .header {
    --article-big-translate-top: -4rem;
    --article-big-padding-side: 20%;
  }

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



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