/* Build: 1_010920262206 */

/* ==================================================
   FUNDACJA RÓWNOŚCI — BACKGROUND
   ================================================== */

:root {
  --background-color: #000000;

  --corner-size-desktop: 34rem;
  --corner-size-tablet: 24rem;
  --corner-size-mobile: 15rem;
}


/* ==================================================
   BAZA
   ================================================== */

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--background-color);
}

body {
  min-height: 100vh;
  min-height: 100dvh;

  color: #ffffff;

  position: relative;
  overflow-x: hidden;
}


/* ==================================================
   WARSTWA TŁA
   ================================================== */

.site-background {
  position: fixed;
  inset: 0;

  width: 100%;
  height: 100vh;
  height: 100dvh;

  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}


/* ==================================================
   TEKSTURA
   bg_texture.png
   - bez powtarzania
   - rozciągnięta na całą stronę
   - lekko rozmyta
   ================================================== */

.background-texture {
  position: absolute;

  /*
    Lekki zapas poza viewport,
    żeby blur nie ucinał krawędzi.
  */
  inset: -2%;

  background-image: url("../assets/bg_texture.png?v=1_010920262206");
  background-repeat: no-repeat;
  background-position: center center;

  /*
    Rozciągnięcie na cały viewport
    zamiast tilingu.
  */
  background-size: 100% 100%;

  opacity: 0.78;

  /*
    Subtelne rozmycie i lekkie powiększenie.
  */
  filter: blur(2px);
  transform: scale(1.03);
  transform-origin: center center;
}


/* ==================================================
   NAROŻNIKI GAZETOWE
   ================================================== */

.background-corner {
  position: absolute;

  display: block;

  width: min(var(--corner-size-desktop), 34vw);
  height: auto;

  user-select: none;
  -webkit-user-drag: none;

  z-index: 1;
}


/* LEWY GÓRNY */

.background-corner--left {
  top: 0;
  left: 0;
}


/* PRAWY DOLNY */

.background-corner--right {
  right: 0;
  bottom: 0;
}


/* ==================================================
   TREŚĆ STRONY
   ================================================== */

.site-content {
  position: relative;
  z-index: 1;

  min-height: 100vh;
  min-height: 100dvh;
}


/* ==================================================
   TABLET
   ================================================== */

@media (max-width: 1024px) {
  .background-corner {
    width: min(var(--corner-size-tablet), 32vw);
  }

  .background-texture {
    opacity: 0.74;
    filter: blur(1.8px);
  }
}


/* ==================================================
   TELEFON
   ================================================== */

@media (max-width: 700px) {
  .background-corner {
    width: min(var(--corner-size-mobile), 43vw);
  }

  .background-texture {
    /*
      Na mobile też bez powtarzania.
      Nadal rozciągamy na pełny ekran.
    */
    background-size: 100% 100%;
    background-position: center center;

    opacity: 0.68;
    filter: blur(1.6px);
    transform: scale(1.04);
  }
}


/* ==================================================
   MAŁE TELEFONY
   ================================================== */

@media (max-width: 420px) {
  .background-corner {
    width: 46vw;
  }

  .background-texture {
    opacity: 0.62;
    filter: blur(1.4px);
  }
}