/* =========================================
   CURRENT XIII
   XEROX / DOME CSS BACKGROUND
   ========================================= */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

html {
  background: #020202;
}

body {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;

  color: #ded9cf;

  font-family:
    "Courier New",
    Courier,
    monospace;

  background:

    /* halvány tonerfoltok */
    radial-gradient(
      ellipse at 16% 22%,
      rgba(255,255,255,0.055) 0%,
      rgba(255,255,255,0.015) 13%,
      transparent 26%
    ),

    radial-gradient(
      ellipse at 83% 64%,
      rgba(255,255,255,0.035) 0%,
      transparent 24%
    ),

    /* sötétvörös hibás nyomtatási folt */
    radial-gradient(
      ellipse at 83% 18%,
      rgba(115,0,0,0.16) 0%,
      rgba(70,0,0,0.07) 18%,
      transparent 42%
    ),

    /* kobaltkék tonerhiba */
    radial-gradient(
      ellipse at 18% 78%,
      rgba(0,36,100,0.14) 0%,
      rgba(0,24,75,0.05) 20%,
      transparent 42%
    ),

    /* mély fekete papíralap */
    linear-gradient(
      145deg,
      #020202 0%,
      #090909 28%,
      #030303 58%,
      #080808 78%,
      #010101 100%
    );
}


/* =========================================
   XEROX CSÍKOK / MÁSOLÓGÉP HIBÁK
   ========================================= */

body::before {
  content: "";

  position: fixed;
  inset: 0;

  pointer-events: none;

  z-index: 1;

  opacity: 0.48;

  background:

    /* vékony vízszintes scanner-vonalak */
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 2px,
      rgba(255,255,255,0.017) 3px,
      transparent 4px
    ),

    /* szabálytalan függőleges másolócsíkok */
    linear-gradient(
      90deg,

      transparent 0%,
      transparent 7%,

      rgba(255,255,255,0.025) 7.3%,
      transparent 7.8%,

      transparent 19%,
      rgba(255,255,255,0.018) 19.3%,
      transparent 20%,

      transparent 42%,
      rgba(0,0,0,0.45) 42.3%,
      transparent 43.1%,

      transparent 68%,
      rgba(255,255,255,0.025) 68.4%,
      transparent 69%,

      transparent 87%,
      rgba(0,0,0,0.55) 87.5%,
      transparent 88.3%,

      transparent 100%
    );
}


/* =========================================
   KOPÁS / PAPÍRSZENNYEZŐDÉS
   ========================================= */

body::after {
  content: "";

  position: fixed;
  inset: -5%;

  pointer-events: none;

  z-index: 2;

  opacity: 0.27;

  background:

    radial-gradient(
      circle at 8% 13%,
      rgba(255,255,255,0.20) 0 1px,
      transparent 2px
    ),

    radial-gradient(
      circle at 23% 44%,
      rgba(255,255,255,0.15) 0 1px,
      transparent 2px
    ),

    radial-gradient(
      circle at 68% 19%,
      rgba(255,255,255,0.14) 0 1px,
      transparent 2px
    ),

    radial-gradient(
      circle at 81% 73%,
      rgba(255,255,255,0.18) 0 1px,
      transparent 2px
    ),

    repeating-linear-gradient(
      73deg,
      transparent 0px,
      transparent 39px,
      rgba(255,255,255,0.018) 40px,
      transparent 42px
    );

  background-size:
    97px 101px,
    141px 127px,
    173px 149px,
    211px 187px,
    auto;
}


/* =========================================
   OLDAL
   ========================================= */

.page {
  position: relative;

  z-index: 5;

  min-height: 100vh;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 45px 24px;
}


/* =========================================
   KÖZPONTI PAPÍR / XEROX PANEL
   ========================================= */

.panel {
  position: relative;

  width: min(760px, 100%);

  padding: 54px 44px;

  background:

    radial-gradient(
      ellipse at 30% 20%,
      rgba(255,255,255,0.028),
      transparent 38%
    ),

    rgba(4,4,4,0.83);

  border-top: 1px solid rgba(255,255,255,0.14);
  border-bottom: 1px solid rgba(255,255,255,0.09);

  box-shadow:
    0 0 0 1px rgba(0,0,0,0.95),
    10px 9px 0 rgba(0,0,0,0.32),
    -4px -3px 0 rgba(255,255,255,0.015),
    0 20px 70px rgba(0,0,0,0.75);
}


/* hibás, szabálytalan belső xerox-keret */

.panel::before {
  content: "";

  position: absolute;

  inset: 11px 8px 14px 12px;

  pointer-events: none;

  border:
    1px dashed rgba(215,210,200,0.11);

  transform: rotate(-0.15deg);
}


/* enyhe tonerfolt a panelen */

.panel::after {
  content: "";

  position: absolute;

  left: 5%;
  right: 5%;
  bottom: 18%;

  height: 7px;

  pointer-events: none;

  opacity: 0.12;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,0.16),
      transparent 76%
    );

  filter: blur(3px);

  transform: rotate(-1.2deg);
}


/* =========================================
   CURRENT XIII
   ========================================= */

h1 {
  position: relative;

  margin:
    0
    0
    10px;

  color: #e6e0d4;

  font-family:
    "Courier New",
    Courier,
    monospace;

  font-size:
    clamp(42px, 9vw, 88px);

  font-weight: 700;

  line-height: 0.95;

  letter-spacing: 0.075em;

  text-transform: uppercase;

  text-shadow:
    1px 0 rgba(255,255,255,0.20),
    -1px 0 rgba(255,255,255,0.07),
    2px 1px rgba(95,0,0,0.16),
    -2px -1px rgba(0,41,105,0.11);
}


/* =========================================
   FANZINE
   ========================================= */

.subtitle {
  margin:
    0
    0
    45px;

  color: #8d8981;

  font-size: 17px;

  font-weight: normal;

  letter-spacing: 0.30em;

  text-transform: lowercase;
}


/* =========================================
   INFORMÁCIÓ
   ========================================= */

.info-block {
  position: relative;

  padding-top: 21px;

  border-top:
    1px dashed rgba(220,215,205,0.25);
}


.info-block p {
  margin:
    16px
    0;

  color: #bbb6ac;

  font-size: 17px;

  line-height: 1.7;

  letter-spacing: 0.025em;
}


.info-block span {
  color: #ded9cf;

  font-weight: bold;
}


/* =========================================
   LINKEK
   ========================================= */

a {
  color: #c5c0b6;

  text-decoration: underline;

  text-decoration-style: dotted;

  text-decoration-thickness: 1px;

  text-underline-offset: 5px;
}


a:hover {
  color: #ffffff;

  background: rgba(115,0,0,0.23);
}


/* =========================================
   KIJELÖLÉS
   ========================================= */

::selection {
  color: #050505;

  background: #d9d3c7;
}


/* =========================================
   MOBIL
   ========================================= */

@media (max-width: 650px) {

  .page {
    align-items: flex-start;

    padding:
      36px
      16px;
  }


  .panel {
    padding:
      38px
      24px;
  }


  h1 {
    font-size:
      clamp(38px, 13vw, 62px);

    letter-spacing:
      0.035em;
  }


  .subtitle {
    margin-bottom: 34px;

    font-size: 15px;

    letter-spacing: 0.22em;
  }


  .info-block p {
    font-size: 15px;

    overflow-wrap: anywhere;
  }

}