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

body
{
    position: relative;

    & h3
    {
        position:absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        font-family: 'Poppins';
        font-size: 5vw;
        max-width: fit-content;
        font-family: 'Poppins';
        overflow: hidden;
        border-right: .15em solid orange; 
        white-space: nowrap; 
        animation: 
          kiiras 4s steps(100, end) forwards,
          villogas .5s step-end infinite;
    }
}

main
{
    width: 100vw;
    height: 100vh;
    background-color: #252525;
    position: relative;
    overflow: hidden;
    animation: megjelenes 2s forwards 4s,  pointer_e 0.1s forwards 6s;
    opacity: 0;
    pointer-events: none;

    .logo
    {
        position: absolute;
        top: 2%;
        left: 50%;
        transform: translate(-50%);
        width: 10%;
        height: 5%;
        z-index: 2;
        pointer-events: none;
    }

    & section
    {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .elso
    {
        position: absolute;
        width: 100%;
        height: 100%;
        clip-path: polygon(100 0, 100% 0, 100% 100%);
        cursor: pointer;

        & img
        {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
            filter: brightness(0.3);
        }

        & h1,p
        {
            color: white;
            font-family: 'Inter';
            font-size: 5vw;
            top: 50%;
            right: 15%;
            position: absolute;
             

        }

        & p
        {
            font-size: 2vw;
            width: 40%;
            right: 5%;
            top: 65%;
        }
    }

    .elso:hover img
    {
        transform: scale(1.05);
    }

    .masodik
    {
        position: absolute;
        width: 100%;
        height: 100%;
        clip-path: polygon(0 0, 100% 0, 0 100%);
        cursor: pointer;

        & img
        {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
            filter: brightness(0.3);

        }

        
        & h1,p
        {
            color: white;
            font-family: 'Inter';
            font-size: 5vw;
            top:15%;
            left: 10%;
            position: absolute;
             

        }

        & p
        {
            font-size: 2vw;
            width: 40%;
            right: 5%;
            top:30%;
        }
    }

    .masodik:hover img
    {
        transform: scale(1.05);
    }


    & nav
    {
        width: 100%;
        position: absolute;
        display: flex;
        justify-content: center;
        bottom: 2%;
        right: 0;
        align-items: center;
        gap: 2%;

        & p
        {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 5vh;
            gap: 10%;
            position: relative;
            cursor: pointer;

            & img
            {
                height: 100%;
                aspect-ratio: 1;
            }

            & a
            {
                text-decoration: none;
                color: white;
                font-size: 1.2vw;
                font-family: 'Inter';
            }
        }

        & p::before
        {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 0.3vh;
            background-color: white;
            transition: width ease 0.3s;
        }

        & p:hover::before
        {
            width: 100%;
        }
    }


}


main:hover > section:not(:hover)
{
    filter: blur(5px);
}

@keyframes kiiras {
    0%{width: 0;}
    50%{width: 100%;}
    100%{width: 0%; display: none;}
  }
  
@keyframes villogas {
    from, to { border-color: transparent }
    50% { border-color: orange; }
}

@keyframes megjelenes {
    0%{opacity:0;}
    100%{opacity: 1;}
}

@keyframes pointer_e {
    from{pointer-events: none;}
    to{pointer-events: all;}
}

@media screen and (max-width:850px) {
    
    body
    {
        & h3
        {
            font-size: 6vw;
        }
    }

    main
    {
        height: 100dvh;

        .logo
        {
            width: 20%;
            height: 3%;
        }

        .elso
        {
            & h1
            {
                font-size: 4vh;
                right: 12%;
                top: 60%;
            }

            & p
            {
                font-size: 1.5vh;
                top: 68%;
                right: 7%;
                
            }
        }

        .masodik
        {
            & h1
            {
                font-size: 4vh;
                right: 12%;
            }

            & p
            {
                font-size: 1.5vh;
                top: 23%;
            }
        }

        & nav
        {
            gap: 10%;

            & p
            {
                height: 3vh;

                & a
                {
                    font-size: 1vh;
                }
            }
        }
    }
}