/*-------------Moje Custom věci-----------------*/
#button {
  position: absolute;
  top: 10%;
  left: 85%;
  background-color: #000000;
  color: #ff0000;
  z-index: 60;
  padding: 10px 20px;
  font-family: fantasy;
  font-size: 19px;
  cursor: pointer;
  border: 2px solid #ff0000; 
  border-radius: 20px;
}

img {
  position: absolute;
  filter: grayscale(100%);
  transition: filter 0.5s ease;
}

img:hover {
  filter: grayscale(0%)
}
.obrazos {
  z-index: 50;
  height: 27%;
  border-radius: 20px;
  position: absolute;
  top: 140%;
  left: 16%;
  
}

.obdelnik {
  z-index: 60;
  width: 1990px;
  height: 186px;
  background-color: transparent;
  filter: blur(3px);
  border: 5px solid #ff0000;
  position: relative;
  top: 60%;
  left: -2px;
}

.background {
  z-index: -3;
  background-color: #000000;
  position: absolute;
  top: 100%;
}

/*----------------------GLITCH-----------------------*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --background: #060608;
  --color: #FAFAFA;
}

html,
body {
  width: 100%;
  height: 100%;
  font-family: Arial;
}

.container {
  z-index: 100;
  position: absolute;
  top: 15%;
  color: var(--color);
  font-size: 1.5rem;
  display: flex;
  flex-direction: column;
}

.right {
  text-align: right;
  width: 100%;
  color: red;
}

.stack {
  display: grid;
  grid-template-columns: 1fr;
}

.stack span {
  font-weight: bold;
  grid-row-start: 1;
  grid-column-start: 1;
  font-size: 5rem;
  --stack-height: calc(100% / var(--stacks) - 1px);
  --inverse-index: calc(calc(var(--stacks) - 1) - var(--index));
  --clip-top: calc(var(--stack-height) * var(--index));
  --clip-bottom: calc(var(--stack-height) * var(--inverse-index));
  clip-path: inset(var(--clip-top) 0 var(--clip-bottom) 0);
  animation: stack 340ms cubic-bezier(.46, .29, 0, 1.24) 1 backwards calc(var(--index) * 120ms), glitch 2s ease infinite 2s alternate-reverse;
}

.stack span:nth-child(odd) {
  --glitch-translate: 8px;
}

.stack span:nth-child(even) {
  --glitch-translate: -8px;
}

@keyframes stack {
  0% {
    opacity: 0;
    transform: translateX(-50%);
    text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
  }
  60% {
    opacity: 0.5;
    transform: translateX(50%);
  }
  80% {
    transform: none;
    opacity: 1;
    text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
  }
  100% {
    text-shadow: none;
  }
}

@keyframes glitch {
  0% {
    text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
    transform: translate(var(--glitch-translate));
  }
  2% {
    text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
  }
  4%,
  100% {
    text-shadow: none;
    transform: none;
  }
}

/*----------------------SOLAR------------------------*/

:root {
  /** color system **/
  --system-color-dark: hsl(0, 0%, 0%);
  --system-color-light: hsl(0, 0%, 100%);
  --system-color-logo: hsla(0, 100%, 50%, 0.8);
  --system-color-red-100: hsla(0, 100%, 50%, 0.25);
  --system-color-red-200: hsla(0, 100%, 50%, 0.5);
  --system-color-red-300: hsla(0, 100%, 50%, 1);

  /** color themes **/
  --system-color-theme-paths: var(--system-color-red-100)
    var(--system-color-red-300);
  --system-color-theme-planets: var(--system-color-red-200)
    var(--system-color-red-200) var(--system-color-red-200)
    var(--system-color-red-300);

  /** planet's radius **/
  /* ♂ Mars real radius ≈ 3389.5km. */
  --planet-radius-mars: 33.895px;
  /* 🜨 Earth real radius ≈ 6371km. */
  --planet-radius-earth: 63.71px;
  /* ♀ Venus real radius ≈ 6051.8km. */
  --planet-radius-venus: 60.518px;
  /* ☿ Mercury real radius ≈ 2439.7km. */
  --planet-radius-mercury: 24.397px;
  /* ☉ Sun real radius ≈ 696340km (40 times smaller compared to the planet's dimensions values). */
  --star-radius-sun: 174.085px;

  /** planet's trajectories **/
  --planet-trajectory-mars: 446.085px;
  --planet-trajectory-earth: 332.085px;
  --planet-trajectory-venus: 257.085px;
  --planet-trajectory-mercury: 203.085px;

  /** units **/
  --system-margin-mars: 292px;
  --system-margin-earth: 35px;
  --system-margin-venus: 15px;
  --system-margin-mercury: 38px;
  --system-border-width: min(2px, 0.4vmin);
}

/* Your solar system styles go here */

  
  *,
  *::after,
  *::before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  html {
    font-size: 16px;
  }
  
  body {  
   
background: linear-gradient(to top, #530000 20%, black 70%);
overflow-x: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
background-color: var(--system-color-dark);

  
    & .solar-system {
        position: absolute;
        top: 5%;
      display: flex;
      justify-content: center;
      align-items: center;
  
      width: 100%;
      height: 100%;
  
      transform: skewX(-45deg);
      -webkit-transform: skewX(-45deg);
  
      & .solar-system__sun {
        z-index: 9999;
        background-color: transparent;
  
        aspect-ratio: 1;
        inline-size: var(--star-radius-sun);
        border-radius: 50%;
  
        background-color: var(--system-color-red-300);
        background: linear-gradient(
          135deg,
          var(--system-color-red-300) 20%,
          transparent
        );
  
        filter: drop-shadow(0px 0px 2px var(--system-color-red-300)) blur(1px);
        -webkit-filter: drop-shadow(0px 0px 2px var(--system-color-red-300))
          blur(1px);
  
        transform: skewX(45deg);
        -webkit-transform: skewX(45deg);
      }
  
      & article:not(.solar-system__sun) {
        visibility: visible;
        z-index: 99;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        aspect-ratio: 1;
        border-radius: 50%;
        border-width: var(--system-border-planets-width);
        border-style: solid;
        border-color: var(--system-color-theme-planets);
  
        &::after {
          position: inherit;
          content: "";
          aspect-ratio: 1;
          inline-size: 40%;
          border-radius: inherit;
  
          background: var(--system-color-red-300);
  
          -webkit-filter: drop-shadow(0px 0px 4.8px var(--system-color-red-200))
            blur(0.5px);
          filter: drop-shadow(0px 0px 4.8px var(--system-color-red-200))
            blur(0.5px);
        }
      }
  
      & section {
        position: absolute;
        z-index: 98;
        aspect-ratio: 1;
  
        border-radius: 50%;
  
        border-width: var(--system-border-width);
        border-style: solid;
        border-color: var(--system-color-theme-paths);
      }
  
      & .solar-system__mercury-trajectory {
        inline-size: var(--planet-trajectory-mercury);
  
        /* ☿ Mercury revolution duration ≈ 87.969 days. */
        -webkit-animation: revolution 43.9845s linear infinite;
        animation: revolution 43.9845s linear infinite;
  
        & .solar-system__mercury-trajectory__mercury {
          inline-size: var(--planet-radius-mercury);
          top: var(--system-margin-mercury);
  
          /* ☿ Mercury rotation period ≈ 58.645 days. */
          -webkit-animation: revolution 29.3225s linear infinite;
          animation: revolution 29.3225s linear infinite;
        }
      }
  
      & .solar-system__venus-trajectory {
        inline-size: var(--planet-trajectory-venus);
  
        /* ♀ Venus revolution duration ≈ 224.667 days. */
        -webkit-animation: revolution 112.3335s linear infinite;
        animation: revolution 112.3335s linear infinite;
  
        & .solar-system__venus-trajectory__venus {
          inline-size: var(--planet-radius-venus);
          top: var(--system-margin-venus);
  
          /* ♀ Venus rotation period ≈ 243.023 days. */
          -webkit-animation: revolution 121.513s linear infinite;
          animation: revolution 121.513s linear infinite;
        }
      }
  
      & .solar-system__earth-trajectory {
        inline-size: var(--planet-trajectory-earth);
  
        /* 🜨 Earth revolution duration ≈ 365.2422 days. */
        -webkit-animation: revolution 182.6211s linear infinite;
        animation: revolution 182.6211s linear infinite;
  
        & .solar-system__earth-trajectory__earth {
          inline-size: var(--planet-radius-earth);
          top: var(--system-margin-earth);
  
          /* ✑ animation-duration: .5s ≈ 24 hours on Earth. */
          -webkit-animation: revolution 0.4874s linear infinite;
          animation: revolution 0.4874s linear infinite;
  
          &::after {
            -webkit-animation: blink 2s linear infinite;
            animation: blink 2s linear infinite;
          }
        }
      }
  
      & .solar-system__mars-trajectory {
        inline-size: var(--planet-trajectory-mars);
  
        /* ♂ Mars revolution duration ≈ 686.885 days. */
        -webkit-animation: revolution 343.4425s linear infinite;
        animation: revolution 343.4425s linear infinite;
  
        & .solar-system__mars-trajectory__mars {
          inline-size: var(--planet-radius-mars);
          top: var(--system-margin-mars);
  
          /* ✑ animation-duration: .5s ≈ 24 hours on Earth. */
          -webkit-animation: revolution 0.5128s linear infinite;
          animation: revolution 0.5128s linear infinite;
        }
      }
    }

        &:hover {
          opacity: 1;      
          -webkit-filter: saturate(100%);
          filter: saturate(100%);
        }
      }
    
  
  
  /*
  ▀▄▀▄▀▄▀▄▀▄▀▄ ANIMATIONS ▀▄▀▄▀▄▀▄▀▄▀▄
  */
  
  @keyframes revolution {
    to {
      transform: rotateZ(1turn);
    }
  }
  
  
  
  /*** ◰ media queries ***/
  /** smartphone **/
  @media screen and (width < 768px) {
    body {
      & .solar-system {
        & .solar-system__sun {
          inline-size: calc(var(--star-radius-sun) / 2);
        }
        & .solar-system__mercury-trajectory {
          inline-size: calc(var(--planet-trajectory-mercury) / 2);
  
          & .solar-system__mercury-trajectory__mercury {
            inline-size: calc(var(--planet-radius-mercury) / 2);
  
            top: calc(var(--system-margin-mercury) - 20px);
          }
        }
  
        & .solar-system__venus-trajectory {
          inline-size: calc(var(--planet-trajectory-venus) / 2);
  
          & .solar-system__venus-trajectory__venus {
            inline-size: calc(var(--planet-radius-venus) / 2);
  
            top: calc(var(--system-margin-venus) - 9px);
          }
        }
  
        & .solar-system__earth-trajectory {
          inline-size: calc(var(--planet-trajectory-earth) / 2);
  
          & .solar-system__earth-trajectory__earth {
            inline-size: calc(var(--planet-radius-earth) / 2);
  
            top: calc(var(--system-margin-earth) - 19px);
          }
        }
  
        & .solar-system__mars-trajectory {
          inline-size: calc(var(--planet-trajectory-mars) / 2);
  
          & .solar-system__mars-trajectory__mars {
            inline-size: calc(var(--planet-radius-mars) / 2);
  
            top: calc(var(--system-margin-mars) - 234px);
          }
        }
      }
    }
  }


    .neon {
      z-index: 80;
      position: absolute;
      top: 9600px;
      left: 1%;
      font-family: monospace;
      font-size: 1.5rem;
    color: #ff0000;
    text-shadow:
      0 0 10px #ff0000,
      0 0 20px #ff0000,
      0 0 40px #ff0000,
      0 0 100px #ff0000,
 
  }

  /*---------------------------TEXT-GLITCH2--------------------------------*/


  section1 {
    padding: 20px;
    position: absolute;
    top: 115%;
    left: 7%;
  }
  
  .hero {
    font-size: 3rem;
    line-height: 1;
    display: inline-block;
    color: #ff0000;
    z-index: 90;
    letter-spacing: 10px;
  

    filter: drop-shadow(0 1px 3px);
  }
  
  .demo {
    height: 100px;
    background: #300000;
  }
  
  .layers {
    position: relative;
  }
  
  .layers::before,
  .layers::after {
    content: attr(data-text);
    position: absolute;
    width: 110%;
    z-index: -1;
  }
  
  .layers::before {
    top: 10px;
    left: 15px;
    color: #e0287d;
  }
  
  .layers::after {
    top: 5px;
    left: -10px;
    color: #1bc7fb;
  }
  
  .single-path {
    clip-path: polygon(
      0% 12%,
      53% 12%,
      53% 26%,
      25% 26%,
      25% 86%,
      31% 86%,
      31% 0%,
      53% 0%,
      53% 84%,
      92% 84%,
      92% 82%,
      70% 82%,
      70% 29%,
      78% 29%,
      78% 65%,
      69% 65%,
      69% 66%,
      77% 66%,
      77% 45%,
      85% 45%,
      85% 26%,
      97% 26%,
      97% 28%,
      84% 28%,
      84% 34%,
      54% 34%,
      54% 89%,
      30% 89%,
      30% 58%,
      83% 58%,
      83% 5%,
      68% 5%,
      68% 36%,
      62% 36%,
      62% 1%,
      12% 1%,
      12% 34%,
      60% 34%,
      60% 57%,
      98% 57%,
      98% 83%,
      1% 83%,
      1% 53%,
      91% 53%,
      91% 84%,
      8% 84%,
      8% 83%,
      4% 83%
    );
  }
  
  .paths {
    animation: paths 5s step-end infinite;
  }
  
  @keyframes paths {
    0% {
      clip-path: polygon(
        0% 43%,
        83% 43%,
        83% 22%,
        23% 22%,
        23% 24%,
        91% 24%,
        91% 26%,
        18% 26%,
        18% 83%,
        29% 83%,
        29% 17%,
        41% 17%,
        41% 39%,
        18% 39%,
        18% 82%,
        54% 82%,
        54% 88%,
        19% 88%,
        19% 4%,
        39% 4%,
        39% 14%,
        76% 14%,
        76% 52%,
        23% 52%,
        23% 35%,
        19% 35%,
        19% 8%,
        36% 8%,
        36% 31%,
        73% 31%,
        73% 16%,
        1% 16%,
        1% 56%,
        50% 56%,
        50% 8%
      );
    }
  
    5% {
      clip-path: polygon(
        0% 29%,
        44% 29%,
        44% 83%,
        94% 83%,
        94% 56%,
        11% 56%,
        11% 64%,
        94% 64%,
        94% 70%,
        88% 70%,
        88% 32%,
        18% 32%,
        18% 96%,
        10% 96%,
        10% 62%,
        9% 62%,
        9% 84%,
        68% 84%,
        68% 50%,
        52% 50%,
        52% 55%,
        35% 55%,
        35% 87%,
        25% 87%,
        25% 39%,
        15% 39%,
        15% 88%,
        52% 88%
      );
    }
  
    30% {
      clip-path: polygon(
        0% 53%,
        93% 53%,
        93% 62%,
        68% 62%,
        68% 37%,
        97% 37%,
        97% 89%,
        13% 89%,
        13% 45%,
        51% 45%,
        51% 88%,
        17% 88%,
        17% 54%,
        81% 54%,
        81% 75%,
        79% 75%,
        79% 76%,
        38% 76%,
        38% 28%,
        61% 28%,
        61% 12%,
        55% 12%,
        55% 62%,
        68% 62%,
        68% 51%,
        0% 51%,
        0% 92%,
        63% 92%,
        63% 4%,
        65% 4%
      );
    }
  
    45% {
      clip-path: polygon(
        0% 33%,
        2% 33%,
        2% 69%,
        58% 69%,
        58% 94%,
        55% 94%,
        55% 25%,
        33% 25%,
        33% 85%,
        16% 85%,
        16% 19%,
        5% 19%,
        5% 20%,
        79% 20%,
        79% 96%,
        93% 96%,
        93% 50%,
        5% 50%,
        5% 74%,
        55% 74%,
        55% 57%,
        96% 57%,
        96% 59%,
        87% 59%,
        87% 65%,
        82% 65%,
        82% 39%,
        63% 39%,
        63% 92%,
        4% 92%,
        4% 36%,
        24% 36%,
        24% 70%,
        1% 70%,
        1% 43%,
        15% 43%,
        15% 28%,
        23% 28%,
        23% 71%,
        90% 71%,
        90% 86%,
        97% 86%,
        97% 1%,
        60% 1%,
        60% 67%,
        71% 67%,
        71% 91%,
        17% 91%,
        17% 14%,
        39% 14%,
        39% 30%,
        58% 30%,
        58% 11%,
        52% 11%,
        52% 83%,
        68% 83%
      );
    }
  
    76% {
      clip-path: polygon(
        0% 26%,
        15% 26%,
        15% 73%,
        72% 73%,
        72% 70%,
        77% 70%,
        77% 75%,
        8% 75%,
        8% 42%,
        4% 42%,
        4% 61%,
        17% 61%,
        17% 12%,
        26% 12%,
        26% 63%,
        73% 63%,
        73% 43%,
        90% 43%,
        90% 67%,
        50% 67%,
        50% 41%,
        42% 41%,
        42% 46%,
        50% 46%,
        50% 84%,
        96% 84%,
        96% 78%,
        49% 78%,
        49% 25%,
        63% 25%,
        63% 14%
      );
    }
  
    90% {
      clip-path: polygon(
        0% 41%,
        13% 41%,
        13% 6%,
        87% 6%,
        87% 93%,
        10% 93%,
        10% 13%,
        89% 13%,
        89% 6%,
        3% 6%,
        3% 8%,
        16% 8%,
        16% 79%,
        0% 79%,
        0% 99%,
        92% 99%,
        92% 90%,
        5% 90%,
        5% 60%,
        0% 60%,
        0% 48%,
        89% 48%,
        89% 13%,
        80% 13%,
        80% 43%,
        95% 43%,
        95% 19%,
        80% 19%,
        80% 85%,
        38% 85%,
        38% 62%
      );
    }
  
    1%,
    7%,
    33%,
    47%,
    78%,
    93% {
      clip-path: none;
    }
  }
  
  .movement {
    /* Normally this position would be absolute & on the layers, set to relative here so we can see it on the div */
    position: relative;
    animation: movement 8s step-end infinite;
  }
  
  @keyframes movement {
    0% {
      top: 0px;
      left: -20px;
    }
  
    15% {
      top: 10px;
      left: 10px;
    }
  
    60% {
      top: 5px;
      left: -10px;
    }
  
    75% {
      top: -5px;
      left: 20px;
    }
  
    100% {
      top: 10px;
      left: 5px;
    }
  }
  
  .opacity {
    animation: opacity 5s step-end infinite;
  }
  
  @keyframes opacity {
    0% {
      opacity: 0.1;
    }
  
    5% {
      opacity: 0.7;
    }
  
    30% {
      opacity: 0.4;
    }
  
    45% {
      opacity: 0.6;
    }
  
    76% {
      opacity: 0.4;
    }
  
    90% {
      opacity: 0.8;
    }
  
    1%,
    7%,
    33%,
    47%,
    78%,
    93% {
      opacity: 0;
    }
  }
  
  .font {
    animation: font 7s step-end infinite;
  }
  
  @keyframes font {
    0% {
      font-weight: 100;
      color: #e0287d;
      filter: blur(3px);
    }
  
    20% {
      font-weight: 500;
      color: #1f0000;
      filter: blur(0);
    }
  
    50% {
      font-weight: 300;
      color: #1bc7fb;
      filter: blur(2px);
    }
  
    60% {
      font-weight: 700;
      color: #340000;
      filter: blur(0);
    }
  
    90% {
      font-weight: 500;
      color: #e0287d;
      filter: blur(6px);
    }
  }
  
  .glitch span {
    animation: paths 5s step-end infinite;
  }
  
  .glitch::before {
    animation: paths 5s step-end infinite, opacity 5s step-end infinite,
      font 8s step-end infinite, movement 10s step-end infinite;
  }
  
  .glitch::after {
    animation: paths 5s step-end infinite, opacity 5s step-end infinite,
      font 7s step-end infinite, movement 8s step-end infinite;
  }
  
  .hero-container {
    position: relative;
    padding: 100px 80px;
    text-align: center;
  }
  
  .environment {
    z-index: 60;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.5;
    filter: blur(5px);
    background: url(https://img.freepik.com/premium-photo/cyberpunk-city-red-wallpaper-desktop-background-design-projects_941097-190.jpg)
      center no-repeat;
    background-size: cover;
  }
  /*---------------------------TEXT-GLITCH3--------------------------------*/

  
  section2 {
    padding: 20px;
    position: absolute;
    top: 126%;
    left: 60%;
  }
  
  .hero2 {
    font-size: 3rem;
    line-height: 1;
    display: inline-block;
    color: #ffffff;
    z-index: 90;
    letter-spacing: 10px;
  

    filter: drop-shadow(0 1px 3px);
  }
  
  .demo {
    height: 100px;
    background: #300000;
  }
  
  .layers {
    position: relative;
  }
  
  .layers::before,
  .layers::after {
    content: attr(data-text);
    position: absolute;
    width: 110%;
    z-index: -1;
  }
  
  .layers::before {
    top: 10px;
    left: 15px;
    color: #e0287d;
  }
  
  .layers::after {
    top: 5px;
    left: -10px;
    color: #1bc7fb;
  }
  
  .single-path {
    clip-path: polygon(
      0% 12%,
      53% 12%,
      53% 26%,
      25% 26%,
      25% 86%,
      31% 86%,
      31% 0%,
      53% 0%,
      53% 84%,
      92% 84%,
      92% 82%,
      70% 82%,
      70% 29%,
      78% 29%,
      78% 65%,
      69% 65%,
      69% 66%,
      77% 66%,
      77% 45%,
      85% 45%,
      85% 26%,
      97% 26%,
      97% 28%,
      84% 28%,
      84% 34%,
      54% 34%,
      54% 89%,
      30% 89%,
      30% 58%,
      83% 58%,
      83% 5%,
      68% 5%,
      68% 36%,
      62% 36%,
      62% 1%,
      12% 1%,
      12% 34%,
      60% 34%,
      60% 57%,
      98% 57%,
      98% 83%,
      1% 83%,
      1% 53%,
      91% 53%,
      91% 84%,
      8% 84%,
      8% 83%,
      4% 83%
    );
  }
  
  .paths {
    animation: paths 5s step-end infinite;
  }
  
  @keyframes paths {
    0% {
      clip-path: polygon(
        0% 43%,
        83% 43%,
        83% 22%,
        23% 22%,
        23% 24%,
        91% 24%,
        91% 26%,
        18% 26%,
        18% 83%,
        29% 83%,
        29% 17%,
        41% 17%,
        41% 39%,
        18% 39%,
        18% 82%,
        54% 82%,
        54% 88%,
        19% 88%,
        19% 4%,
        39% 4%,
        39% 14%,
        76% 14%,
        76% 52%,
        23% 52%,
        23% 35%,
        19% 35%,
        19% 8%,
        36% 8%,
        36% 31%,
        73% 31%,
        73% 16%,
        1% 16%,
        1% 56%,
        50% 56%,
        50% 8%
      );
    }
  
    5% {
      clip-path: polygon(
        0% 29%,
        44% 29%,
        44% 83%,
        94% 83%,
        94% 56%,
        11% 56%,
        11% 64%,
        94% 64%,
        94% 70%,
        88% 70%,
        88% 32%,
        18% 32%,
        18% 96%,
        10% 96%,
        10% 62%,
        9% 62%,
        9% 84%,
        68% 84%,
        68% 50%,
        52% 50%,
        52% 55%,
        35% 55%,
        35% 87%,
        25% 87%,
        25% 39%,
        15% 39%,
        15% 88%,
        52% 88%
      );
    }
  
    30% {
      clip-path: polygon(
        0% 53%,
        93% 53%,
        93% 62%,
        68% 62%,
        68% 37%,
        97% 37%,
        97% 89%,
        13% 89%,
        13% 45%,
        51% 45%,
        51% 88%,
        17% 88%,
        17% 54%,
        81% 54%,
        81% 75%,
        79% 75%,
        79% 76%,
        38% 76%,
        38% 28%,
        61% 28%,
        61% 12%,
        55% 12%,
        55% 62%,
        68% 62%,
        68% 51%,
        0% 51%,
        0% 92%,
        63% 92%,
        63% 4%,
        65% 4%
      );
    }
  
    45% {
      clip-path: polygon(
        0% 33%,
        2% 33%,
        2% 69%,
        58% 69%,
        58% 94%,
        55% 94%,
        55% 25%,
        33% 25%,
        33% 85%,
        16% 85%,
        16% 19%,
        5% 19%,
        5% 20%,
        79% 20%,
        79% 96%,
        93% 96%,
        93% 50%,
        5% 50%,
        5% 74%,
        55% 74%,
        55% 57%,
        96% 57%,
        96% 59%,
        87% 59%,
        87% 65%,
        82% 65%,
        82% 39%,
        63% 39%,
        63% 92%,
        4% 92%,
        4% 36%,
        24% 36%,
        24% 70%,
        1% 70%,
        1% 43%,
        15% 43%,
        15% 28%,
        23% 28%,
        23% 71%,
        90% 71%,
        90% 86%,
        97% 86%,
        97% 1%,
        60% 1%,
        60% 67%,
        71% 67%,
        71% 91%,
        17% 91%,
        17% 14%,
        39% 14%,
        39% 30%,
        58% 30%,
        58% 11%,
        52% 11%,
        52% 83%,
        68% 83%
      );
    }
  
    76% {
      clip-path: polygon(
        0% 26%,
        15% 26%,
        15% 73%,
        72% 73%,
        72% 70%,
        77% 70%,
        77% 75%,
        8% 75%,
        8% 42%,
        4% 42%,
        4% 61%,
        17% 61%,
        17% 12%,
        26% 12%,
        26% 63%,
        73% 63%,
        73% 43%,
        90% 43%,
        90% 67%,
        50% 67%,
        50% 41%,
        42% 41%,
        42% 46%,
        50% 46%,
        50% 84%,
        96% 84%,
        96% 78%,
        49% 78%,
        49% 25%,
        63% 25%,
        63% 14%
      );
    }
  
    90% {
      clip-path: polygon(
        0% 41%,
        13% 41%,
        13% 6%,
        87% 6%,
        87% 93%,
        10% 93%,
        10% 13%,
        89% 13%,
        89% 6%,
        3% 6%,
        3% 8%,
        16% 8%,
        16% 79%,
        0% 79%,
        0% 99%,
        92% 99%,
        92% 90%,
        5% 90%,
        5% 60%,
        0% 60%,
        0% 48%,
        89% 48%,
        89% 13%,
        80% 13%,
        80% 43%,
        95% 43%,
        95% 19%,
        80% 19%,
        80% 85%,
        38% 85%,
        38% 62%
      );
    }
  
    1%,
    7%,
    33%,
    47%,
    78%,
    93% {
      clip-path: none;
    }
  }
  
  .movement {
    /* Normally this position would be absolute & on the layers, set to relative here so we can see it on the div */
    position: relative;
    animation: movement 8s step-end infinite;
  }
  
  @keyframes movement {
    0% {
      top: 0px;
      left: -20px;
    }
  
    15% {
      top: 10px;
      left: 10px;
    }
  
    60% {
      top: 5px;
      left: -10px;
    }
  
    75% {
      top: -5px;
      left: 20px;
    }
  
    100% {
      top: 10px;
      left: 5px;
    }
  }
  
  .opacity {
    animation: opacity 5s step-end infinite;
  }
  
  @keyframes opacity {
    0% {
      opacity: 0.1;
    }
  
    5% {
      opacity: 0.7;
    }
  
    30% {
      opacity: 0.4;
    }
  
    45% {
      opacity: 0.6;
    }
  
    76% {
      opacity: 0.4;
    }
  
    90% {
      opacity: 0.8;
    }
  
    1%,
    7%,
    33%,
    47%,
    78%,
    93% {
      opacity: 0;
    }
  }
  
  .font {
    animation: font 7s step-end infinite;
  }
  
  @keyframes font {
    0% {
      font-weight: 100;
      color: #e0287d;
      filter: blur(3px);
    }
  
    20% {
      font-weight: 500;
      color: #1f0000;
      filter: blur(0);
    }
  
    50% {
      font-weight: 300;
      color: #1bc7fb;
      filter: blur(2px);
    }
  
    60% {
      font-weight: 700;
      color: #340000;
      filter: blur(0);
    }
  
    90% {
      font-weight: 500;
      color: #e0287d;
      filter: blur(6px);
    }
  }
  
  .glitch span {
    animation: paths 5s step-end infinite;
  }
  
  .glitch::before {
    animation: paths 5s step-end infinite, opacity 5s step-end infinite,
      font 8s step-end infinite, movement 10s step-end infinite;
  }
  
  .glitch::after {
    animation: paths 5s step-end infinite, opacity 5s step-end infinite,
      font 7s step-end infinite, movement 8s step-end infinite;
  }
  
  .hero-container {
    position: relative;
    padding: 100px 80px;
    text-align: center;
  }
  

/*---------------------------SOCIALS------------------------*/
ul {
  position:absolute;
  z-index: 900;
  top:150%;
  left:72%;
  transform:translate(-50%,-50%);
  margin:0;
  padding:0;
  display:flex;
}
ul li {
  list-style:none;
}
ul li a {
  display:block;
  position:relative;
  width:100px;
  height:100px;
  line-height:100px;
  font-size:40px;
  text-align:center;
  text-decoration:none;
  color:#ff0000;
  margin: 0 30px;
  transition:.5s;
  
  
}
ul li a span {
  position:absolute;
  transition: transform .5s;
  
  
}
ul li a span:nth-child(1),
ul li a span:nth-child(3){
  width:100%;
  height:3px;
  background:#ff0000;
}
ul li a span:nth-child(1) {
  
  top:0;
  left:0;
  transform-origin: right;
}
ul li a:hover span:nth-child(1) {
  
  transform: scaleX(0);
  transform-origin: left;
  transition:transform .5s;
 
}

ul li a span:nth-child(3) {
  bottom:0;
  left:0;
  transform-origin: left;
}
ul li a:hover span:nth-child(3) {
  transform: scaleX(0);
  transform-origin: right;
  transition:transform .5s;
}

ul li a span:nth-child(2),
ul li a span:nth-child(4){
  width:3px;
  height:100%;
  background:#ff0000;
}
ul li a span:nth-child(2) {
  top:0;
  left:0;
  transform:scale(0);
  transform-origin: bottom;
}
ul li a:hover span:nth-child(2) {
  transform: scale(1);
  transform-origin: top;
  transition:transform .5s;
}
ul li a span:nth-child(4) {
  
  top:0;
  right:0;
  transform:scale(0);
  transform-origin: top;
}
ul li a:hover span:nth-child(4) {
  
  transform: scale(1);
  transform-origin: bottom;
  transition:transform .5s;
}

.facebook:hover {
  color: #ff0000;
}
.facebook:hover span { 
  background: #ff0000;
}
.twitter:hover {
  color: #ff0000;
}
.twitter:hover span { 
  background: #ff0000;
}
.instagram:hover {
  color: #ff0000;
}
.instagram:hover span { 
  background: #ff0000;
}
.google:hover {
  color: #ff0000;
}
.google:hover span { 
  background: #ff0000;
}
ul li a .twitter {
  display: none;
  color: #1da1f2;
}
ul li a:hover:nth-child(3) {
  display: none;
  color: #c32aa3;
}
ul li a:hover:nth-child(4) {
  display: none;
  color: #dd4b39;
}


.instag {
  position: absolute;
  top: 147%;
  left: 57.9%;
}
.github {
  position: absolute;
  top: 147%;
  left: 66.3%;
}
.discord {
  position: absolute;
  top: 147%;
  left: 74.65%;
}
.tiktok {
  position: absolute;
  top: 147%;
  left: 83%;
}






/*---------------------MEDIA----------------*/
@media only screen and (max-width: 800px) {

  ul {
    top: 180%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  ul li a {
    font-size: 20px; /* Změna velikosti písma pro menší obrazovky */
    width: 60px; /* Změna šířky položek pro menší obrazovky */
    height: 60px; /* Změna výšky položek pro menší obrazovky */
    line-height: 60px; /* Změna výšky řádku pro menší obrazovky */
    margin: 0 10px; /* Snížení mezery mezi položkami na menších obrazovkách */
  }
}

@media only screen and (max-width: 1900px) {
  ul {
        top: 150%;
        left: 72%;
        transform: translate(-50%, -50%);
  }

  ul li a {
    
    width: 100px; /* Změna šířky položek pro menší obrazovky */
    height: 100px; /* Změna výšky položek pro menší obrazovky */
    line-height: 100px; /* Změna výšky řádku pro menší obrazovky */
    margin: 0 10px; /* Snížení mezery mezi položkami na menších obrazovkách */
  }
}
@media only screen and (max-width: 1700px) {
  ul {
        top: 150%;
        left: 74%;
        transform: translate(-50%, -50%);
       
  }

  ul li a {
    
    width: 100px; /* Změna šířky položek pro menší obrazovky */
    height: 100px; /* Změna výšky položek pro menší obrazovky */
    line-height: 100px; /* Změna výšky řádku pro menší obrazovky */
    margin: 0 10px; /* Snížení mezery mezi položkami na menších obrazovkách */
  }
}
@media only screen and (max-width: 1100px) {
  ul {
        top: 150%;
        left: 77%;
        transform: translate(-50%, -50%);
  }

  ul li a {
    
    width: 70px; /* Změna šířky položek pro menší obrazovky */
    height: 70px; /* Změna výšky položek pro menší obrazovky */
    line-height: 70px; /* Změna výšky řádku pro menší obrazovky */
    margin: 0 10px; /* Snížení mezery mezi položkami na menších obrazovkách */
  }
}


@media only screen and (max-width: 800px) {
  .obrazos {
    opacity: 0;
  }
  .instag {
    top: 176.5%;
    left: 19%; /* Nová pozice pro menší obrazovky */
    transform: scale(0.5);
  }

  .github {
    top: 176.5%;
    left: 35.5%; /* Nová pozice pro menší obrazovky */
    transform: scale(0.5);
  }

  .discord {
    top: 176.5%;
    left: 52%; /* Nová pozice pro menší obrazovky */
    transform: scale(0.5);
  }

  .tiktok {
    top: 176.5%;
    left: 68.5%; /* Nová pozice pro menší obrazovky */
    transform: scale(0.5);
  }
}


@media only screen and (max-width: 1900px) {
  .obrazos {
    left: 17%;
    top: 140%;
  }
  .instag {
    top: 146.7%;
    left: 60.8%; /* Nová pozice pro menší obrazovky */
    transform: scale(0.9);
  }

  .github {
    top: 146.7%;
    left: 67.2%; /* Nová pozice pro menší obrazovky */
    transform: scale(0.9);
  }

  .discord {
    top: 146.7%;
    left: 73.5%; /* Nová pozice pro menší obrazovky */
    transform: scale(0.9);
  }

  .tiktok {
    top: 146.7%;
    left: 80%; /* Nová pozice pro menší obrazovky */
    transform: scale(0.9);
  }
}
@media only screen and (max-width: 1800px) {

  .obrazos {
    left: 19%;
    top: 143%;
  }
  .instag {
    top: 146.7%;
    left: 59.8%; /* Nová pozice pro menší obrazovky */
    transform: scale(0.9);
  }

  .github {
    top: 146.7%;
    left: 66.8%; /* Nová pozice pro menší obrazovky */
    transform: scale(0.9);
  }

  .discord {
    top: 146.7%;
    left: 73.75%; /* Nová pozice pro menší obrazovky */
    transform: scale(0.9);
  }

  .tiktok {
    top: 146.7%;
    left: 80.7%; /* Nová pozice pro menší obrazovky */
    transform: scale(0.9);
  }
}
@media only screen and (max-width: 1700px) {
  .obrazos {
    left: 17%;
    top: 140%;
  }
  .instag {
    top: 146.7%;
    left: 60.6%; /* Nová pozice pro menší obrazovky */
    transform: scale(0.9);
  }

  .github {
    top: 146.7%;
    left: 68.2%; /* Nová pozice pro menší obrazovky */
    transform: scale(0.9);
  }

  .discord {
    top: 146.7%;
    left: 75.8%; /* Nová pozice pro menší obrazovky */
    transform: scale(0.9);
  }

  .tiktok {
    top: 146.7%;
    left: 83.5%; /* Nová pozice pro menší obrazovky */
    transform: scale(0.9);
  }
}
@media only screen and (max-width: 1600px) {
  .instag {
    top: 146.7%;
    left: 60.15%; /* Nová pozice pro menší obrazovky */
    transform: scale(0.9);
  }

  .github {
    top: 146.7%;
    left: 68%; /* Nová pozice pro menší obrazovky */
    transform: scale(0.9);
  }

  .discord {
    top: 146.7%;
    left: 76%; /* Nová pozice pro menší obrazovky */
    transform: scale(0.9);
  }

  .tiktok {
    top: 146.7%;
    left: 83.7%; /* Nová pozice pro menší obrazovky */
    transform: scale(0.9);
  }
}
@media only screen and (max-width: 1500px) {
  .instag {
    top: 146.7%;
    left: 59.2%; /* Nová pozice pro menší obrazovky */
    transform: scale(0.9);
  }

  .github {
    top: 146.7%;
    left: 67.5%; /* Nová pozice pro menší obrazovky */
    transform: scale(0.9);
  }

  .discord {
    top: 146.7%;
    left: 76.25%; /* Nová pozice pro menší obrazovky */
    transform: scale(0.9);
  }

  .tiktok {
    top: 146.7%;
    left: 84.7%; /* Nová pozice pro menší obrazovky */
    transform: scale(0.9);
  }
}
@media only screen and (max-width: 1400px) {
  .instag {
    top: 146.7%;
    left: 60.8%; /* Nová pozice pro menší obrazovky */
    transform: scale(0.9);
  }

  .github {
    top: 146.7%;
    left: 67.2%; /* Nová pozice pro menší obrazovky */
    transform: scale(0.9);
  }

  .discord {
    top: 146.7%;
    left: 73.5%; /* Nová pozice pro menší obrazovky */
    transform: scale(0.9);
  }

  .tiktok {
    top: 146.7%;
    left: 80%; /* Nová pozice pro menší obrazovky */
    transform: scale(0.9);
  }
}

@media only screen and (max-width: 1100px) {
  .instag {
    top: 146.7%;
    left: 61.1%; /* Nová pozice pro menší obrazovky */
    transform: scale(0.6);
  }

  .github {
    top: 146.7%;
    left: 69.7%; /* Nová pozice pro menší obrazovky */
    transform: scale(0.6);
  }

  .discord {
    top: 146.7%;
    left: 78.4%; /* Nová pozice pro menší obrazovky */
    transform: scale(0.6);
  }

  .tiktok {
    top: 146.7%;
    left: 86.8%; /* Nová pozice pro menší obrazovky */
    transform: scale(0.6);
  }
}


@media only screen and (max-width: 768px) {

  .obdelnik {
    opacity: 0;
  top: 62%;
  }
  .instag {
    top: 150%;
    left: 16%; /* Střed pro menší obrazovky */
    transform: translate(-50%, -50%) scale(0.6);
  }
  .github {
    top: 150%;
    left: 39%; /* Střed pro menší obrazovky */
    transform: translate(-50%, -50%) scale(0.6);
  }
  .discord {
    top: 150%;
    left: 61%; /* Střed pro menší obrazovky */
    transform: translate(-50%, -50%) scale(0.6);
  }
  .tiktok {
    top: 150%;
    left: 83.5%; /* Střed pro menší obrazovky */
    transform: translate(-50%, -50%) scale(0.6);
  }
}
 
@media only screen and (max-width: 768px) {
  ul {
    top: 150%;
    left: 50%; /* Střed pro menší obrazovky */
    transform: translate(-50%, -50%);
  }

  ul li a {
    width: 70px; /* Změna šířky položek pro menší obrazovky */
    height: 70px; /* Změna výšky položek pro menší obrazovky */
    line-height: 70px; /* Změna výšky řádku pro menší obrazovky */
    margin: 0 10px; /* Snížení mezery mezi položkami na menších obrazovkách */
  }

  #button {
    opacity: 0;
    top: 08%;
    left: 85%; /* Střed pro menší obrazovky */
    transform: translate(-50%, -50%);
  }

  .hero {
    opacity: 0;
  }
  

  .demo {
    height: 80px;
  }
 
}


@media only screen and (max-height: 900px) {

  .obdelnik {
  top: 62%;
  }

  .neon {
    top: 100.5%; /* Odsazení odspodu */
    font-size: 1.4em;
  }
}



@media only screen and (max-width: 1500px) {
  .neon {
    top: 980px;
    font-size: 1em;
  }
}
@media only screen and (max-width: 1200px) {
  .neon {
    top: 980px;
    font-size: 1em;
  }
}


@media screen and (max-width: 800px) {
  #button {
    transform:translate(-50%,-50%);
  }
  .hero {
    opacity: 0;
  }
  section2 {
    top: 166%;
    left: 23%;
  }

.hero2 {
  font-size: 1.5rem;
  letter-spacing: 10px;
}

.demo {
  height: 80px;
}
.neon {
  top: 990px;
  font-size: 0.85em;
}

}

/* Malé obrazovky, například starší telefony */
@media only screen and (max-width: 480px) {
  .obdelnik {
  opacity: 0;
  top: 62%;
  }
  .instag {
    top: 150%;
    left: 16%; /* Střed pro menší obrazovky */
    transform: translate(-50%, -50%) scale(0.6);
  }
  .github {
    top: 150%;
    left: 39%; /* Střed pro menší obrazovky */
    transform: translate(-50%, -50%) scale(0.6);
  }
  .discord {
    top: 150%;
    left: 61%; /* Střed pro menší obrazovky */
    transform: translate(-50%, -50%) scale(0.6);
  }
  .tiktok {
    top: 150%;
    left: 83.5%; /* Střed pro menší obrazovky */
    transform: translate(-50%, -50%) scale(0.6);
  }

  ul {
    top: 150%;
    left: 50%; /* Střed pro menší obrazovky */
    transform: translate(-50%, -50%);
  }

  ul li a {
    width: 70px; /* Změna šířky položek pro menší obrazovky */
    height: 70px; /* Změna výšky položek pro menší obrazovky */
    line-height: 70px; /* Změna výšky řádku pro menší obrazovky */
    margin: 0 10px; /* Snížení mezery mezi položkami na menších obrazovkách */
  }

  #button {
    opacity: 0;
    top: 08%;
    left: 85%; /* Střed pro menší obrazovky */
    transform: translate(-50%, -50%);
  }

  .hero {
    opacity: 0;
  }
  

  .demo {
    height: 80px;
  }
}

/* Velmi velké obrazovky, například ultra-wide monitory */
@media only screen and (min-width: 2560px) {
  .obrazos {
    left: 13%;
    top: 120%;
  }
  .obdelnik {
    width: 1000%;
    top: 33%;
    }
    .instag {
      top: 120%;
      left: 61.75%; /* Střed pro menší obrazovky */
      transform: translate(-50%, -50%) scale(1);
    }
    .github {
      top: 120%;
      left: 67.3%; /* Střed pro menší obrazovky */
      transform: translate(-50%, -50%) scale(1);
    }
    .discord {
      top: 120%;
      left: 72.75%; /* Střed pro menší obrazovky */
      transform: translate(-50%, -50%) scale(1);
    }
    .tiktok {
      top: 120%;
      left: 78.3%; /* Střed pro menší obrazovky */
      transform: translate(-50%, -50%) scale(1);
    }
  
    ul {
      top: 120%;
      left: 70%; /* Střed pro menší obrazovky */
      transform: translate(-50%, -50%);

    }
  
    ul li a {
      width: 120px; /* Změna šířky položek pro menší obrazovky */
      height: 120px; /* Změna výšky položek pro menší obrazovky */
      line-height: 70px; /* Změna výšky řádku pro menší obrazovky */
      margin: 0 10px; /* Snížení mezery mezi položkami na menších obrazovkách */
    }
  
  .hero {
    font-size: 4rem;
  }
  .hero2 {
    font-size: 4rem;
  }
  
    section1 {
      top: 91.5%;
    }
    section2 {
      top: 100%;
    }
    
  
    .demo {
      height: 80px;
    }
    .neon {
      top: 76.5%;
    }
}





@media only screen and (min-width: 2160px) {
  .obrazos {
    left: 14.5%;
    top: 120%;
  }
  .obdelnik {
    width: 1000%;
    top: 39%;
    }
    .instag {
      top: 120%;
      left: 61.75%; /* Střed pro menší obrazovky */
      transform: translate(-50%, -50%) scale(1);
    }
    .github {
      top: 120%;
      left: 67.3%; /* Střed pro menší obrazovky */
      transform: translate(-50%, -50%) scale(1);
    }
    .discord {
      top: 120%;
      left: 72.75%; /* Střed pro menší obrazovky */
      transform: translate(-50%, -50%) scale(1);
    }
    .tiktok {
      top: 120%;
      left: 78.3%; /* Střed pro menší obrazovky */
      transform: translate(-50%, -50%) scale(1);
    }
  
    ul {
      top: 120%;
      left: 70%; /* Střed pro menší obrazovky */
      transform: translate(-50%, -50%);

    }
  
    ul li a {
      width: 120px; /* Změna šířky položek pro menší obrazovky */
      height: 120px; /* Změna výšky položek pro menší obrazovky */
      line-height: 70px; /* Změna výšky řádku pro menší obrazovky */
      margin: 0 10px; /* Snížení mezery mezi položkami na menších obrazovkách */
    }
  
  .hero {
    font-size: 4rem;
  }
  .hero2 {
    font-size: 4rem;
  }
  
    section1 {
      top: 91.5%;
    }
    section2 {
      top: 100%;
    }
    
  
    .demo {
      height: 80px;
    }
    .neon {
      top: 82.5%;
    }
}

@media only screen and (min-width: 2060px) {
  .obrazos {
    left: 16%;
    top: 125%;
  }
  .obdelnik {
    width: 1000%;
    top: 49%;
    }
    .instag {
      top: 130%;
      left: 62.75%; /* Střed pro menší obrazovky */
      transform: translate(-50%, -50%) scale(1);
    }
    .github {
      top: 130%;
      left: 69.3%; /* Střed pro menší obrazovky */
      transform: translate(-50%, -50%) scale(1);
    }
    .discord {
      top: 130%;
      left: 75.75%; /* Střed pro menší obrazovky */
      transform: translate(-50%, -50%) scale(1);
    }
    .tiktok {
      top: 130%;
      left: 82.5%; /* Střed pro menší obrazovky */
      transform: translate(-50%, -50%) scale(1);
    }
  
    ul {
      top: 130%;
      left: 72.5%; /* Střed pro menší obrazovky */
      transform: translate(-50%, -50%);

    }
  
    ul li a {
      width: 120px; /* Změna šířky položek pro menší obrazovky */
      height: 120px; /* Změna výšky položek pro menší obrazovky */
      line-height: 70px; /* Změna výšky řádku pro menší obrazovky */
      margin: 0 10px; /* Snížení mezery mezi položkami na menších obrazovkách */
    }
  
  .hero {
    font-size: 4rem;
  }
  .hero2 {
    font-size: 4rem;
  }
  
    section1 {
      top: 101.5%;
    }
    section2 {
      top: 110%;
    }
    
  
    .demo {
      height: 80px;
    }
    .neon {
      top: 92.5%;
    }
}