/* BEGIN: COMMON ELEMENTS RESET ================================================================= */

*, *::before, *::after {
  box-sizing: border-box;
}

body, h1, h2, h3, h4, h5, p, ul, ol, li, figure, figcaption, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: none;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

img, picture {
  max-width: 100%;
  display: block;
}

input, button, textarea, select {
  font: inherit;
}


/* END: COMMON ELEMENTS RESET =================================================================== */

/* BEGIN: COMMON VARIABLES ====================================================================== */

:root {

  --viewport-from: 320;
  --viewport-to: 1920;

  --font_factor: 1.25;

  --font_size-from: 16;
  --font_size-to: 18;

  --font_size: calc( ( 100vw - var( --viewport-from ) * 1px )
  * ( var( --font_size-to ) - var( --font_size-from ) )
  / ( var( --viewport-to ) - var( --viewport-from ) )
  + var( --font_size-from ) * 1px );

/*   === */

  --large_font_size-from: var( --font_size-to );
  --large_font_size-to: calc( var( --large_font_size-from ) * var( --font_factor ) );

  --large_font_size: calc( ( 100vw - var( --viewport-from ) * 1px )
  * ( var( --large_font_size-to ) - var( --large_font_size-from ) )
  / ( var( --viewport-to ) - var( --viewport-from ) )
  + var( --large_font_size-from ) * 1px );

/*   === */

  --larger_font_size-from: var( --large_font_size-to);
  --larger_font_size-to: calc( var( --larger_font_size-from ) * var( --font_factor ) );

  --larger_font_size: calc( ( 100vw - var( --viewport-from ) * 1px )
  * ( var( --larger_font_size-to ) - var( --larger_font_size-from ) )
  / ( var( --viewport-to ) - var( --viewport-from ) )
  + var( --larger_font_size-from ) * 1px );

/*   === */

  --largest_font_size-from: var( --larger_font_size-to);
  --largest_font_size-to: calc( var( --largest_font_size-from ) * var( --font_factor ) );

  --largest_font_size: calc( ( 100vw - var( --viewport-from ) * 1px )
  * ( var( --largest_font_size-to ) - var( --largest_font_size-from ) )
  / ( var( --viewport-to ) - var( --viewport-from ) )
  + var( --largest_font_size-from ) * 1px );

/*   === */

  --ribbon_size-from: 120;
  --ribbon_size-to: 240;

  --ribbon_size: calc( ( 100vw - var( --viewport-from ) * 1px )
  * ( var( --ribbon_size-to ) - var( --ribbon_size-from ) )
  / ( var( --viewport-to ) - var( --viewport-from ) )
  + var( --ribbon_size-from ) * 1px );

/* === */

  --line_height-from: calc( var( --font_size-from ) * 1.6 );
  --line_height-to: calc( var( --font_size-to ) * 1.8 );

  --line_height: calc( ( 100vw - var( --viewport-from ) * 1px )
  * ( var( --line_height-to ) - var( --line_height-from ) )
  / ( var( --viewport-to ) - var( --viewport-from ) )
  + var( --line_height-from ) * 1px );

  --large_line_height-from: calc( var( --line_height-from ) * 1.6 );
  --large_line_height-to: calc( var( --line_height-to ) * 1.8 );

  --large_line_height: calc( ( 100vw - var( --viewport-from ) * 1px )
  * ( var( --large_line_height-to ) - var( --large_line_height-from ) )
  / ( var( --viewport-to ) - var( --viewport-from ) )
  + var( --large_line_height-from ) * 1px );


  --cnt_pnl_items_mrg-from: calc( var( --viewport-from ) / 50 );
  --cnt_pnl_items_mrg-to: calc( var( --viewport-to ) / 5 );

  --cnt_pnl_items_mrg: calc( ( 100vw - var( --viewport-from ) * 1px )
  * ( var( --cnt_pnl_items_mrg-to ) - var( --cnt_pnl_items_mrg-from ) )
  / ( var( --viewport-to ) - var( --viewport-from ) )
  + var( --cnt_pnl_items_mrg-from ) * 1px );

  --cnt_pnl_row_height-from: calc( var( --cnt_pnl_items_mrg-from ) / 5 );
  --cnt_pnl_row_height-to: calc( var( --cnt_pnl_items_mrg-to ) / 10 );

  --cnt_pnl_row_height-from: 20;
  --cnt_pnl_row_height-to: 60;

  --cnt_pnl_row_height: calc( ( 100vw - var( --viewport-from ) * 1px )
  * ( var( --cnt_pnl_row_height-to ) - var( --cnt_pnl_row_height-from ) )
  / ( var( --viewport-to ) - var( --viewport-from ) )
  + var( --cnt_pnl_row_height-from ) * 1px );

  --cmn_hdr_height: calc( var( --cnt_pnl_row_height ) * 2 + var( --large_line_height ) + 2px );

  --black: #121212;
  --red: #ff1f1f;
  --white: #e7e7e7;

  --bg-color: #121214;
  --bg-color: #1b1a1d;
  --bg-color: #191a1c;

  --fg-color: #a39daf;
  --fg-color: #a4a7b7;
  --fg-color: #e1ddf6;

  --im-color: #b2b5c6;

  --color-red: #c30000;
  --color-red: #e60813;

  --cnt_pnl_hdr_arrow-trn: 0.8s ease-in-out;
  --cnt_pnl_wrp-trn: 0.8s ease-in-out;

}

/* END: COMMON VARIABLES ======================================================================== */

/* BEGIN: COMMON ELEMENTS ======================================================================= */

body {
  background-color: var( --bg-color );
  color: var( --fg-color );
  font-family: 'Courier Prime', monospace;
  font-size: var( --font_size );
  font-weight: 400;
  line-height: var( --line_height );
  padding-top: var( --cmn_hdr_height );
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
/*   counter-reset: article_counter; */
  -webkit-text-stroke: 0.15px currentColor;
  paint-order: stroke fill;
}

main {
  counter-reset: article_counter;
}

/* END: COMMON ELEMENTS ========================================================================= */

/* BEGIN: COMMON RIBBON========================================================================== */

#ribbon {
  height: var( --ribbon_size ); /*size !!!*/

  position: fixed;
  right: -5px;
  top: -5px;
  z-index: 8;
}

#ribbon > path {
  fill: var( --color-red );
}

/* END: COMMON RIBBON =========================================================================== */
/* BEGIN: COMMON HEADER ========================================================================= */

/*#cmn_hdr::hover #ribbon > path {

  fill: var( --color-red );

}*/

#cmn_cnt_pnl {
  background-color: var( --bg-color );
  border-color: red;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 6;
  min-height: 1vh;
/*   height: 100vh; */
}


#cmn_hdr_ttl > * {
/*   color: var( --color-red ); */
  display: block;
  font-family: "Special Elite", system-ui;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.25ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#cmn_hdr_ttl-main {
  color: var( --color-red );
  font-size: var( --largest_font_size );
  line-height: var( --large_line_height );
  padding-bottom: calc( var( --cnt_pnl_row_height ) / 8 );
}

#cmn_hdr_ttl-submain {
 color: var( --fg-color );
  color: var( --color-red );
}

#cmn_hdr_hamburger_icon {
  height: var( --larger_font_size );
  margin-bottom: -0.12em;
}

#cmn_hdr_hamburger_icon > rect {
  fill: var( --fg-color );
  transition: fill var( --cnt_pnl_hdr_arrow-trn );
}

#cmn_cnt_pnl_hdr:hover #cmn_hdr_hamburger_icon > rect {

  fill: var( --color-red );
}

#cmn_nav {
 display: grid;
 row-gap: calc( var( --cnt_pnl_row_height ) / 2 );
}

.cmn_nav_item {
  font-size: var( --large_font_size );
  color: var( --im-color );
}

#cmn_nav_cur_item {
  color: var( --color-red );
}

.cmn_nav_item:hover {
  color: var( --color-red );
}

/* END: COMMON HEADER =========================================================================== */
/* BEGIN: COMMON - CONTENT PANEL ================================================================ */

.cnt_pnl {
  border-bottom: 2px dashed var( --im-color );
  counter-increment: article_counter;
  margin: 0 var( --cnt_pnl_items_mrg );
}

.cnt_pnl > * {
  display: grid;
/*  margin: 0 var( --cnt_pnl_items_mrg );*/
}

.cnt_pnl_hdr {
/*   border-top: 2px dashed var( --im-color ); */
  cursor: pointer;
  grid-template-columns: 1fr auto;
  padding: var( --cnt_pnl_row_height ) 0;
}

/* END: COMMON - CONTENT PANEL ================================================================== */
/* BEGIN: COMMON - CONTENT PANEL HEADER TITLE =================================================== */

.cnt_pnl_hdr_ttl {

  color: var( --im-color );
  font-size: var( --large_font_size );
  font-weight: 400;
  letter-spacing: 0.25ch;
  margin-right: 1ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Special Elite", system-ui;
  font-weight: 400;
  font-style: normal;
/*   text-transform: lowercase; */
/*   display: inline-block; */
}

.cnt_pnl_hdr_ttl > span {
    display: inline-block;
/*     text-transform: lowercase; */
}
.cnt_pnl_hdr_ttl > span::first-letter {
/*  text-transform: uppercase !important; */
}

/*.cnt_pnl_hdr_ttl::first-letter {
 text-transform: uppercase !important;
}*/

.cnt_pnl_hdr_ttl_upper {
/*   text-transform: uppercase; */
}

/* BEGIN: COMMON CONTENT HEADER ARROW =========================================================== */

.cnt_pnl_hdr_arrow {
  align-self: center;
  height: calc( var( --large_font_size ) * 0.8 );
}

.cnt_pnl_hdr_arrow_path {
  fill: var( --fg-color );
  stroke: var( --fg-color );
}

/* END: COMMON CONTENT HEADER ARROW ============================================================= */
/* BEGIN: COMMON CONTENT WRAPPER ================================================================ */

.cnt_pnl_wrp {
  display: grid;
  grid-template-rows: 0fr;
}

.cnt_pnl_wrp_int {
  display: grid;
  overflow: hidden;
}

/* END: COMMON CONTENT WRAPPER ================================================================== */
/* BEGIN: COMMON CONTENT FOOTER ================================================================= */

.cnt_pnl_ftr {

  align-items: center;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  padding: var( --cnt_pnl_row_height ) 0;
}

.cnt_pnl_ftr_ttl {

  color: var( --im-color);
/*     color: red; */
  font-size: var( --font_size );
  font-weight: 400;
/*   paint-order: stroke fill; */
  text-align: right;
/*   -webkit-text-stroke: 0.5px currentColor; */

  font-family: "Special Elite", system-ui;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.25ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  direction: rtl;         /* Zmienia kierunek tekstu na "od prawej do lewej" */
    text-align: left;
  margin-left: 2em;
/*   text-transform: lowercase; */

}

.cnt_pnl_ftr_ttl::first-letter {
/*   text-transform: uppercase; */
}

.cnt_pnl_ftr_ttl_upper {
/*   text-transform: uppercase; */
}


/* END: COMMON CONTENT FOOTER =================================================================== */

/* BEGIN: COMMON CONTENT FOOTER ARROW =========================================================== */

.cnt_pnl_ftr_arrow {
  align-self: center;
  height: var( --font_size );
  height: calc( var( --large_font_size ) * 0.8 );
}

.cnt_pnl_ftr_arrow_path {
  fill: var( --white );
  stroke: var( --white );
  stroke-linejoin: round;
  stroke-width: 4;
}

/* END: COMMON CONTENT FOOTER ARROW ============================================================= */

/* BEGIN: COMMON FOOTER ------------------------------------------------------------------------- */

.cmn_ftr_sign {
  font-size: 1.7em;
  padding: 0 0.25em;
}

#cmn_ftr {
/*   align-items: flex-end; */
  display: grid;
  font-weight: 700; /*???*/
/*   justify-content: flex-end; */
  margin: 0 var( --cnt_pnl_items_mrg );
  /*text-align: right;*/
/*   padding: var( --cnt_pnl_row_height ) 0; */
}

#cmn_ftr_email {
  align-content: flex-end;
  display: flex;
  transition: color var( --title_transition );
  visibility: hidden;
  padding: var( --cnt_pnl_row_height ) 0;
  text-align: right;
  transition: color var( --cnt_pnl_hdr_arrow-trn );
}

#cmn_ftr_email.cmn_ftr_email_visible {
  visibility: visible;
}

#cmn_ftr_email:hover {
  color: var( --color-red );
}

#cmn_ftr_email_sign {
  color: var( --color-red );
}

#cmn_ftr_copyright {
  align-items: center;
  display: grid;
  grid-template-columns: auto 1fr;
  padding-bottom: var( --cnt_pnl_row_height );
}

#cmn_ftr-deceased {
  grid-column: 1 / 3;
}

#cmn_ftr_copyright_sign {
  align-self: center;
  color: var( --color-red );
  padding-left: 0;
}

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

  #cmn_ftr {
    row-gap: 0;
  }

  #cmn_ftr_copyright {
    grid-template-columns: auto auto 1fr;
  }

  #cmn_ftr-deceased {
    grid-column: 1 / 1;
  }

  #cmn_ftr_copyright_sign {
    padding-left: 0.25em;
  }

}

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

  #cmn_ftr {
    grid-template-columns: 1fr auto;
  }

  #cmn_ftr_copyright {
    padding: var( --cnt_pnl_row_height ) 0;
  }

}

/* END: COMMON FOOTER --------------------------------------------------------------------------- */