*{
    margin:0;
    padding: 0;
}

body{
    background: linear-gradient(#DB4347, #DA6062 50%,  #DA6062 60%, #DA3B33);
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
}

header{
    height: 100px;
    margin-left: 75px;

}

header nav{
    height: 100%;
    display: flex;
    align-items: center;
    margin-left: 75px;
    gap: 20px;
    color:white
}

main{
    flex-grow: 5;
    display: flex;
    justify-content: center;
    align-items: center;

}

footer{
    height: 100px;

}

.background-image{
    position: absolute;
    max-width: 100%;
    height: 100%;
    top: 0;
    right:0;
    left: 0;
    bottom: 0;
    margin: auto;
    opacity: 50%;
    z-index: -1;

}

.content-image{
    height: 80vh;

}

.content-text{
    color: white;
    font-size: 2.2rem;
    width: 212px;
    transform: translateX(-100%);
    position: absolute;
    text-align: end;
    margin-right: 80px;
    
}

footer{
    height: 100px;
    display: flex;  
    justify-content: flex-end;
    margin-right: 75px;
    align-items: flex-start;
}

@media (max-width: 768px){
    header nav{
        margin-right: 25px;        
    }
    
    .content-text{
          transform: translate(0);
          top: 50px;
          font-size: 1rem;
          width: 150px;
          margin: 0;
          text-align: center;  
    }
    
    .garrafa{
        height: 60vh;

    }

    footer{
        height: 60px;
        margin-right: 25px;
    }

    .background-image{
        visibility: hidden;
    }
}