/* ===========================
   Základ
=========================== */

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

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#111;
    color:#fff;
    overflow:hidden;
}

/* Jemný gradient pozadia */

body::before{
    content:"";
    position:fixed;
    inset:0;
    background:linear-gradient(to bottom,#1d1d1d,#050505);
    z-index:-1;
}

/* ===========================
   Hlavná časť
=========================== */

.hero{
    height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding-bottom:190px;
}

/* ===========================
   Titulná fotografia
=========================== */

.photo{
    width:340px;
    height:440px;
    overflow:hidden;
    border-radius:20px;
    box-shadow:0 15px 50px rgba(0,0,0,.6);
    margin-bottom:30px;
}

.photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    animation:kenburns 10s ease-in-out infinite alternate;
}

/* Jemný pohyb fotografie */

@keyframes kenburns{

    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.05) translateY(-8px);
    }

}

/* ===========================
   Text
=========================== */

h1{
    font-size:42px;
    font-weight:bold;
    margin-bottom:15px;
    text-shadow:0 2px 12px rgba(0,0,0,.7);
}

.working{
    font-size:24px;
    color:#dddddd;
    animation:blik 2s infinite;
}

@keyframes blik{

    0%{
        opacity:1;
    }

    50%{
        opacity:.55;
    }

    100%{
        opacity:1;
    }

}

/* ===========================
   Slider
=========================== */

.slider{

    position:fixed;
    left:0;
    bottom:0;

    width:100%;
    height:185px;

    background:#000;

    overflow:hidden;

    border-top:2px solid #333;

}

/* Posúvajúci pás */

.track{

    display:flex;
    width:max-content;

    padding:10px;

    animation:slider 90s linear infinite;

}

@keyframes slider{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}

/* ===========================
   Jedna fotografia
=========================== */

.foto-box{

    position:relative;

    width:220px;

    height:150px;

    margin-right:12px;

    flex-shrink:0;

    border-radius:10px;

    overflow:hidden;

}

.foto-box img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.3s;

}

.foto-box:hover img{

    transform:scale(1.05);

}

/* Popis fotografie */

.foto-popis{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:7px;

    background:rgba(0,0,0,.70);

    color:white;

    font-size:14px;

    text-align:center;

}

/* ===========================
   Mobil
=========================== */

@media(max-width:768px){

    .photo{

        width:240px;
        height:320px;

    }

    h1{

        font-size:30px;

    }

    .working{

        font-size:18px;

    }

    .slider{

        height:135px;

    }

    .foto-box{

        width:170px;
        height:110px;

    }

    .foto-popis{

        font-size:12px;

    }

    .hero{

        padding-bottom:145px;

    }

}