:root {
  /* Podstawowe kolory */
  --text_color_light_mode: #444;
  --text_color_dark_mode: #fefefe;
  --background_color_light_mode: #fefefe;
  --background_color_dark_mode: #444;
  --default_font_size_desktop: 18;
  --default_font_size_mobile: 5;
  --default_font_size_btn: .8;
  --default_line_height_desktop: 1.5;
  --default_line_height_mobile: 1.5;
  --defaut_btn_background: #ec1b20;
  --default_btn_radius: .15;
  --btn_option_color: #464546;
  --default_padding: 2;
  --default_border_radius: .25;

  --color_gray: #cccccc;
}

/* ============================================
   RESET & NORMALIZACJA
   ============================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }
img{max-width: 100%;}
/* ============================================
   STRONA
   ============================================ */
html {  
  -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%;  
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;  
  font-size:  calc(var(--default_font_size_desktop) * 1px);
}

body {
  margin: 0;  padding: 0;  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem; /* Zawsze odnosi się do html font-size */
  /*line-height: 1.5;*/
}

#logo{
  display: flex; align-content: center;
  width: 100%; height: 100%;
  text-decoration: none;
  height: 10dvw; 
  color: var(--text_color_light_mode);
  font-weight: bold;
}

.btn{background-color: var(--defaut_btn_background);
  color: var(--text_color_dark_mode);
  display: inline-flex;padding: 0;
  font-size: calc( var(--default_font_size_desktop) * var(--default_font_size_btn) * 1px ); 
  border-radius: calc(var(--default_btn_radius) * 1rem);
  padding: calc(var(--default_padding) * .25rem) calc(var(--default_padding) * .5rem) ;
  position: relative;
  height: fit-content;
  align-items: center;
  gap: 1rem;
  text-align: center; text-decoration: none;
}
.btn span{
  display: block; position: relative; height: fit-content; color: var(--text_color_dark_mode);  }
.btn:has(svg){ padding-right: 2.5rem}
.btn svg{height: calc(var(--default_font_size_desktop)  * var(--default_font_size_btn) * 1.75px ); width: auto; ; position: absolute; right: .5rem; margin-top: .06rem}

.btn.option{background-color: var(--btn_option_color)}


.colaboration{
  background-color: #dddddd; padding:  5dvw 0; 
}
.txt_center{text-align: center !important;}
.icon_flex{display: flex; position: relative; align-content: center; align-items: center; text-decoration: none;}
.icon_flex *{text-decoration: none;}

/**
 * KOLORKI TŁA
 **/

.bkg_gray{ background-color: var(--color_gray) }

/*
* STOPKA
*/

footer{display: flex; flex-direction: column; gap: 1rem; width: 100%; background-color: #000; padding: 2rem; justify-items: center; justify-content: center; align-content: center; align-items: center}
footer *{color: #999}
footer li{display: inline-block; font-size: .5rem}

.cookie-consent-banner{
  background-color: #eee; display: flex; flex-direction: column; gap: 1rem; position: absolute; padding: 1rem; justify-content: center; justify-items: center; text-align: center; 
  position: fixed; bottom: 0; left: 0; width: 100dvw; height: auto;
}
.cookie-consent-banner *{
  font-size: .5rem
}
.cookie-consent-buttons{display: flex; gap: 1rem; padding: 1rem; font-size: .8rem; justify-items: center; justify-content: center}
.cookie-consent-button{font-size: .8rem; padding: .25rem}



/**
 * 
 * 
 * PARALAKSSA
 * 
 * Blurowane tła pod sekcjami
 * 
 * 
 * 
 * Komentować może każdy, ale konieczna moderacja
 * 
 * Na srtonie głównej książka ona i on - zły link 404  -  ma kierować do sklepu
 * 
 * 



gutekcars.com

Baza danych:
serwer: localhost
baza: c52db1
user: c52db1
pass: 4@6tyUGpVsV

SFTP:
host: zmhost02.l-bit.pl
port: 22
useer: gutekcarssftp1
pass: pgieLrVA72KZ@



Mail:
user: biuro@gutekcar.com
pass: znyYK8sBnY@T
serwer: zmhost02.l-bit.pl

 * */