@charset "UTF-8";

:root{
    --height_header: 5rem;
    --height_main:calc(100vh - var(--heigth_footer) - var(--height_header));
    --heigth_footer: 4rem;

    --tamanho_divs: 15rem;
    --tamanho_texto: 3rem
}

*{
    margin: 0px;
    padding: 0px;
    box-sizing: content-box;
    font-family: monospace;
}

header{
    display: grid;
    place-items: center;
    min-height: var(--height_header);
    width: 100%;
}
header > h1{
    font-size: 2rem;
    margin: 1rem;
    text-align: center;
    text-wrap: balance
}

main{
    display: flex;
    min-height: var(--height_main);
    align-items: center;
    justify-content: center;
    flex-direction: column
}
#caixas{
    position: relative;
    display:flex;
    height: calc(var(--tamanho_divs) + 2rem);
    width: calc(var(--tamanho_divs) + 2rem);
    border: 3px solid;
    border-radius: 1rem 1rem 0 0;
    
    overflow: auto; /* importante para o bagulho de snap*/
    scroll-snap-type: x mandatory; /* importante para o bagulho de snap*/

    padding: 2rem;
    gap: .5rem;
    scroll-padding: 2rem; /* importante para o bagulho de snap*/ /*é o padding que vai ter quando o scroll snap acontecer*/

    /* justify-content: start;
    align-items: center; */
    scroll-behavior: smooth;
}

#caixas > div{
    flex: 0 0 100%; /* importante para o bagulho de snap*/ /*0 grow 0 shrink 100% parent width (é o que cada coisa faz.(flex: 0 0 100% )*/

    scroll-behavior: smooth;

    scroll-snap-align: start;/* importante para o bagulho de snap*/

    height: var(--tamanho_divs);
    width: var(--tamanho_divs);

    text-align: center;
    line-height: var(--tamanho_divs);

    background-color: tomato;
    border-radius: 1rem;
    
    font-size: var(--tamanho_texto);
}

main p{
    display: inline-block;
    width: clamp(25ch, 50%, 75ch);
    font-size: 1.3rem;
    margin: 1rem;
    text-indent: 1rem
}

footer{
    display: grid;
    place-items: center;
    min-height: var(--heigth_footer);
    width: 100%;
}

footer p{
    border-radius: .5rem .5rem 0 0 ;
    border: 2px solid black;
    padding: .2rem;
    display: block;
    overflow-x: hidden;
    height: 1.3rem;
    width: 7.5ch;
    font-size: 1.3rem;
    color: rgb(0, 81, 255);
    position: relative;
}

footer span{
    left: .5ch;
    bottom: 0;
    position: absolute;
    transition: all linear 300ms;
    text-wrap: nowrap;
}

footer:hover span{
    bottom: 0;
    left: -7.5ch;

}