*{
    margin:0;
    box-sizing: border-box  ;
    font-family: "Josefin Sans", sans-serif;

    --font:"Josefin Sans", sans-serif;
    --font-script: "Euphoria Script", cursive;

    --color1:#979185;
    --color2: #858671;
    --color3:#c59472;
    --color4:#8f6c5c;
    --color5: #d9b6ac;
    --color6: #ffff;
}



/* Pantalla PC*/
@media(min-width:1001px) {
    h1{
        font-size: 2.4rem;
        font-weight: 500;
        margin-bottom:20px;
        text-align: center;
    }

    .time h2{
        font-size:1.4rem;
        font-weight: 100;
    }

    p{
        font-size: 0.8rem;
        font-weight: 400;
        letter-spacing: -1px;
    }


}



/* Pantalla Tablet*/
@media(min-width: 701px) and (max-width: 1000px) {
    h1{
        font-size: 3rem;
        font-weight: 500;
        margin-bottom:20px;
        text-align: center;
    }

    .time h2{
        font-size:2.8rem;
        font-weight: 100;
    }

    p{
        font-size:1.6rem;
        font-weight: 400;
        letter-spacing: -1px;
    }

}



/* Pantalla Celular*/
@media(max-width:700px) {
    h1{
        font-size: 1.7rem;
        font-weight: 400;
        margin-bottom:10px;
        text-align: center;
    }

    .time h2{
        font-size:1.6rem;
        font-weight: 200;
    }

    p{
        font-size:0.7rem;
        font-weight: 400;
        letter-spacing: -1px;
    }

}

.hero{
    width: 100vw;
    height: 100vh;
    /* background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)); */
    /* background-size: cover;
    background-position: center; */
    display:flex;
    flex-direction: column;

    align-items: center;
    justify-content:center;
    color: var(--color2);
}


.timebox{
    width: 100%;
    justify-content: center;
    display:flex;
    gap:12px;
    flex-wrap: wrap;
}

.time{
    text-align:center;
}