body{
    background-color: black;
}
@font-face {
    src: url("/Bebas_Neue/BebasNeue-Regular.ttf") format("truetype");
    font-family: "BebasNeue-Regular";
}
#tittle{
    display: flex;
    justify-content: center;
    height: 280px;
}
#tittle-h1{
    margin-top: 1%;
    text-align: center;
    color:#fff;
    font-size: 180px;
    letter-spacing: 10px;
    font-family: BebasNeue-Regular;
}
#tittle-p{
    margin-top: 0;
    text-align: center;
    color:#fff;
    font-size: 35px;
    font-family: BebasNeue-Regular;
    margin-bottom:0;
}
#buttons{
    margin-top: 40px;
    text-align: center;
}
#rutinas-image{
    margin-right: 4%;
    width:15em;
}

/* Mobile device */

@media screen and (max-width: 828px){

    #tittle{
        margin: 10px;
        display: flex;
        justify-content: center;
    }
    #tittle-h1{
        margin-top: 5%;
        text-align: center;
        color:#fff;
        font-size: 150px;
        letter-spacing: 10px;
        font-family: BebasNeue-Regular;
    }
    #tittle-p{
        text-align: center;
        color:#fff;
        font-size: 0.25em;
        font-family: BebasNeue-Regular;
    }
    #buttons{
        bottom:70px;
        position:relative;
    }
    #rutinas-image{
        display: inline-block;
        width:17em;
        margin:10%;
    }
}
@media screen and (max-width: 526px){
    #tittle-h1{
        margin-top: 5%;
        text-align: center;
        color:#fff;
        font-size: 100px;
        letter-spacing: 10px;
        font-family: BebasNeue-Regular;
    }
}
@media screen and (max-width: 360px){
    #tittle-h1{
        margin-top: 5%;
        text-align: center;
        color:#fff;
        font-size: 100px;
        letter-spacing: 10px;
        font-family: BebasNeue-Regular;
    }
}