@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800;900&display=swap');


body{

    font-family: 'Poppins', sans-serif;
    color: #000;
    position: relative;
    background-image: url(../gfx/background-tapume.png);
    background-repeat: no-repeat;
    background-size: cover;

}

.logo{
    background-image: url(../gfx/logo.png);
    background-size: 518px 453px ;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 453px;

}

.tarja{
    width: 100%;
    height: 70px;
    background-color: #848688;
    font-size: 40px;
    color: #FFF;
    padding-top: 4px;
}

.icon{
    width: 90px;
    height: 90px;
    background-repeat: no-repeat;
    background-image: url(../gfx/social.png);
    margin: auto;
}

.instagram{
    background-position: 0 0;
}

.facebook{
    background-position: -130px 0;
}

.linkedin{
    background-position: -260px 0;
}

.whatsapp{
    background-position: -390px 0;
}

/* Media Queries para Mobile */
@media (max-width: 768px) {
    .logo{
        background-size: 300px 263px;
        height: 263px;
    }

    .tarja{
        font-size: 24px;
        height: 50px;
        padding-top: 3px;
    }

    .icon{
        width: 60px;
        height: 60px;
        background-size: cover;
    }
}

@media (max-width: 480px) {
    body{
        padding-top: 200px;
    }
    .logo{
        background-size: 200px 175px;
        height: 175px;
    }

    .tarja{
        font-size: 18px;
        height: 40px;
        padding-top: 2px;
    }

    .icon{
        width: 45px;
        height: 45px;
    }
    .facebook{background-position: -83px 0;}
    .linkedin{background-position: -170px 0;}
    .whatsapp{background-position: -252px 0;}
}