@charset "UTF-8";

@layer row {
  
}
@media (orientation: landscape) {
    .landscape-video {
      display: block;
    }
    .portrait-video {
        display: none;
      }
  }
  
  /* Álló módra (portrait) a portrait-videót jelenítjük meg */
  @media (orientation: portrait) {
    .portrait-video{
      display: block;
    }
    .landscape-video {
        display: none;
      }
  }
@layer tokens {
  :root {
    --color-primary: rgba(220, 219, 219, 0.78);
    --color-surface: #35354a;
    --time: 24s;
  }
}
@property --shadow-color {
  syntax: "<color>";
  initial-value: transparent;
  inherits: true;
}

@layer scene {
  .scene {
    display: block;
    place-items: center;
    position: absolute;
    -webkit-animation: scene-zoom-in-out var(--time) ease-in-out infinite;
            animation: scene-zoom-in-out var(--time) ease-in-out infinite;
    transform-style: preserve-3d;
  }

  @-webkit-keyframes scene-zoom-in-out {
    from {
      transform: scale(0.9);
    }
    50% {
      transform: scale(1);
    }
    to {
      transform: scale(0.9);
    }
  }

  @keyframes scene-zoom-in-out {
    from {
      transform: scale(0.9);
    }
    50% {
      transform: scale(1);
    }
    to {
      transform: scale(0.9);
    }
  }
}
@property --space {
  syntax: "<length>";
  initial-value: 0;
  inherits: true;
}






.color-filter {
  position: absolute;
  height: 100vh;
  width: 100vw;
  background: conic-gradient(at 50% 60%, rgba(50, 56, 92, 0.27), rgba(152, 75, 132, 0.07), rgba(150, 75, 152, 0.04), rgba(50, 56, 92, 0.27));
  mix-blend-mode: color;
  pointer-events: none;
}



@layer global {
  body {
    width: 100%;
    height: 100vh;
    display:block;
    place-items: center;
    background-color: var(--color-surface);
    color: var(--color-primary);
    position: absolute;
    inset: 0;
    perspective: 80vmax;
    margin: 0;
    overflow: hidden;

    text-align: justify;
   hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   -moz-hyphens: auto;
   text-align-last: center;
   margin: auto;
   word-spacing: 2px;

  }
  

  
  body:before {
    
    content: "";
    position: absolute;
    inset: 0;
    z-index: 111;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.1);
    -webkit-mask: linear-gradient(black 10%, transparent 30%, transparent 70%, black 80%);
            mask: linear-gradient(black 10%, transparent 30%, transparent 70%, black 80%);
            -webkit-backdrop-filter: blur(5vmin) invert(0);
            backdrop-filter: blur(0.1vmin) invert(0);
  }

  * {
    box-sizing: border-box;
  }
  footer { position: absolute; bottom: 0; right: 0; left: 0; }
}