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

body{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Space Grotesk', sans-serif;
}

main{
    flex: 1;
}


@media (orientation: landscape){
    html{font-size: clamp(14px, 1vh, 28px);scroll-behavior: smooth; }
}
@media (orientation: portrait){
    html{font-size: clamp(14px, 1vw, 28px);scroll-behavior: smooth; }
}


.Juhj-toolinfo{
    max-width: 40rem;
}

.Juhj-btn.action{
    min-width: 3rem;
}

.Juhj-output{
    font-size: 1rem;
    padding: 0.7rem 0.5rem;
    min-height: 3rem;
}

.Juhj-btn.generate{
    font-size: 1.2rem;
    padding: 1rem 0.5rem;
}

.Juhj-faq{
    margin: 2rem 0;
    & h2{
        font-size: 2.5rem;
    }
    & summary{
        padding: 1rem;
        font-size: 1.3rem;
        opacity: 0.9;
    }
    & p{
        padding:0 1rem 1rem;
        font-size: 1.2rem;
        opacity: 0.7;
    }
}

.Juhj-footer{
    font-size: 1rem;
    padding: 2rem;

}

@media (orientation: portrait){
    .Juhj-footer{
        padding: 1rem;
    }
}

.Juhj-header{
    & .logo{
        font-size: 1.5rem; 
    }
    & a {
        font-size: 1rem; 
    }
}

@media(orientation: portrait){
    .Juhj-header {padding: 0 0.5rem;}
}
@media(orientation: landscape){
    .Juhj-header {padding: 0 2rem;}
}

.Juhj-btn.radio{
    font-size: 1.2rem;
    padding: 0.45rem 1rem;
}