*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto;
cursor: crosshair;
}

body{
background:#edf1f5;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
cursor: crosshair;

font-family: 'Archivo', sans-serif;
font-weight: 400; /* Regular */
line-height: 1.6; /* Pro lepší čitelnost v minimalismu */
-webkit-font-smoothing: antialiased; /* Vyhlazení písma na Macu */

}


h1, h2, h3 {
    font-family: 'Archivo', sans-serif;
    font-weight: 700; /* Bold */
    letter-spacing: -0.02em; /* Mírné stažení pro moderní look */
}

.menu a {
    text-decoration: none; /* odstraní podtržení */
    color: #666;           /* zachová stejnou barvu jako ostatní menu */
    cursor: pointer;
    transition: color 0.3s;
    cursor: crosshair;
    margin-right:14px;
    font-size: 20px;
}

.menu a:hover {
    color: #228b22 ; /* hezký hover efekt pro vizuální feedback */
    cursor: crosshair;
}

/* VIEWPORT */

.viewport{
width:1100px;
overflow:hidden;
}

/* WRAPPER */

.wrapper{
display:flex;
width:3300px;
transition:transform .8s cubic-bezier(.77,0,.18,1);
}

/* PROJECTS */

.projects{
width:550px;
display:flex;
flex-direction:column;
gap:14px;
}

.project {
    text-decoration: none; /* odstraní podtržení */
    display: flex;
    justify-content: space-between;
    width: 260px;
    font-size: 20px;
    color: #444;
    transition: transform 0.3s ease, color 0.3s ease; /* animace při hover */
}

.project:hover {
    transform: translateX(5px); /* mírné zvětšení a posun doprava */
    
}

.project span:last-child{
color:#999;
}

/* INTRO */

.intro{
width:550px;
}

.intro h1{
font-size:26px;
line-height:1.4;
margin-bottom:10px;
}

.apple{
color:#228b22;
}

.green{
    font-style: italic;
    color: #228b22;
}

.gray{
    font-style: italic;
    color: #666;
}


/* ABOUT */

.about{
width:550px;
}

.about h2{
font-size:26px;
margin-bottom:26px;
}

.about p{
font-size:20px;
line-height:1.6;
}

/* STATE */

body.about-open .wrapper{
transform:translateX(-550px);
}

.about{
transform:translateX(200px);
opacity:0;
transition:all .8s cubic-bezier(.77,0,.18,1);
}

/* ABOUT SHOW */

body.about-visible .about{
transform:translateX(0);
opacity:1;
}

@media (max-width: 600px) {

    body {
        background: #edf1f5;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    /* Wrapper pro mobil */
    .wrapper {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        position: static !important;
        transform: none !important;
    }

    .viewport {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
        overflow: visible;
    }

.menu{
display:flex;
justify-content:center;
gap:20px;
margin-top:20px;
flex-wrap:wrap;
}


    #aboutBtn{
        display:none;
    }


    /* Zruší všechny desktop transformy pro About i Projects */
    .about, .projects, .intro {
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
    }

    /* Pořadí sekcí: Intro -> Projects -> About */
    .intro { order: 1; margin-bottom: 40px; }
    .projects { order: 2; margin-bottom: 40px; }
    .about { order: 3; margin-bottom: 40px; }

    /* Intro */
    .intro h1 {
        font-size: 22px;
        line-height: 1.4;
        margin-bottom: 50px;
    }
    .apple {
        color: #228b22;
    }

    /* Projects */
    .projects {
        display: flex;
        flex-direction: column;
        gap: 14px;
        width: 100%;
        max-width: 300px;
        
    }
    .project {
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        color: #444;
        text-decoration: none;
    }
  
.about{
        width:100%;
        max-width:320px;
        margin:0 auto;
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

    .about p{
        font-size:16px;
        line-height:1.5;
        max-width:320px;
        text-align:center;
    }

    /* About */
    .about h2 {
        font-size: 24px;
        margin-bottom: 15px;
        margin-top: 50px;
        
    }
}