@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap');
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body 
{
    min-height: 290vh;
    background: linear-gradient(#2b1055, #7597de);
}
section {
    position: relative;
    }
header 
{
 position: absolute; 
 top: 0;
 left: 0;
 width: 100%;
 padding: 30px 100px;
 display: flex;
 justify-content: space-between;
 align-items: center;       
}

    header .logo 
       {
           color: #fff;
           font-weight: 700;
           text-decoration: none;
           font-size: 2em;
           text-transform: uppercase;
           letter-spacing: 2px;
       }
       header ul
       {
           display: flex;
           justify-content: center;
           align-items: center;
       }
       header ul li
       {
           font-weight: 600;
           list-style: none;
           margin-left: 2px;
       }
       header ul li a
       {
           text-decoration: none;
           padding: 6px 15px;
           border-radius: 20px;
           color: #fff;
       }
       header ul li a:hover, 
       header ul li a.active
       {
           background: #ffffff;
           color: #2b1055;
       }
       section 
       {
           position: relative;
           width: 100%;
           height: 100%;
           padding: 100px;
       }
      
  
.hidden {
    opacity: 0;
    filter: blur(5px);
    transform: translateX(-100%);
    transition: all 1s;
    }
    .show {
     opacity: 1;  
        filter: blur(0);
   transform: translateX(0);   
    }
    .logo {
        opacity: 0;
        filter: blur(5px);
        transform: translateY(-100%);
        transition: all 1s;
    }
    .imag {
        opacity: 1;  
        filter: blur(0);
        transform: translateY(0);        
    }
    .pismo {
    opacity: 0;
    filter: blur(5px);
    transition: all 1s;
    }
        
    .zakusek {
    opacity: 1;  
   filter: blur(0);   
    }
    #video {
       background-color: #fff;
       position: relative;
       top: 900px;
    }
       #MERAS
       {
        text-align: center;
           position: relative;
           top: 180px;
           font-size: 90px;
           color: #2b1055;
           -webkit-text-stroke: 0.01px #919191;
           font-family: Impact;
           z-index: 1;
       }
       
   #moon {
       position: absolute;
       top: -110px;
       right: 730px;
       width: 450px; /* Nastavte požadovanou šířku */
       height: auto; /* Aby se zachoval původní poměr stran */
       z-index: 0;
   } 
    #typewriter {  
     position: absolute;
     left: 69px; 
     margin-top: 505px;
     font-size: 18px;
     font-weight: 2000;
     margin-bottom: 0;
     font-weight: 400;
     color: #ffffff;
     z-index: 2;
   }
    #videotvorba
    {
        text-align: center;
        position: relative;
        top: 1200px;
        font-size: 90px;
        color: #ffffff;
        font-family: Impact;
    }
    .ig {
        width: 30px;
        height: 30px;
        color: white;
       
        transition: transform 0.4s ease;
        cursor: pointer;
        z-index: 1;
    } 
    .ig-container {
        display: inline-block;
        position: relative;
        transition: transform 0.4s ease;
        top: 990px;
        z-index: 1;
    }
    .ig:hover{
        -webkit-animation:spin 1s linear infinite;
        -moz-animation:spin 1s linear infinite;
        animation:spin 1s linear infinite;
    }
    @-moz-keyframes spin { 
        100% { -moz-transform: rotate(360deg); } 
    }
    @-webkit-keyframes spin { 
        100% { -webkit-transform: rotate(360deg); } 
    }
    @keyframes spin { 
        100% { 
            -webkit-transform: rotate(360deg); 
            transform:rotate(360deg); 
        } 
    }
    
    #merasig {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-weight: 700;
        text-decoration: none;
        color: white;
        position: absolute;
        margin-top: 994px;
        display: none;
        z-index: 0;

    }
      .shown{
        display: block;
        color: white;
      }
      .hidden{
        display: none;
       
      }