body{ 
    
    display:flex; 
    justify-content: center; 
    
}

.tudo{
    display:flex; 
    flex-direction: column;
    justify-content: center;    
    align-items: center;
    max-width:1500px; 
    width:90%;
}

.pic-button{
  
    display: flex;  
    flex-direction: column; 
    align-items: center; 
    width:80%; 
    max-width:700px; 
    
}

.pic{ 
    margin-top:20px;
    
    width:80%; 
    position: relative; 
    display:flex; 
    justify-content: center; 
  /* width:700px; */
    padding-bottom:100px; 

} 

.pic img:first-child{
    
    position: absolute;  
    width:100%;  
    max-height:657px; 
    max-width:697px;
    
   
} 

#tanya,#John{
    max-height:540px; 
    max-width:540px; 
    width:80%; 
    position: relative; 
    top:20px; 
    opacity:1; 
    transition-property: opacity; 
    transition-duration: 2s; 
  /*  animation: fadeIn 2s; */

}  




#John{
    display:none;
}

.buttons{
    display:inline; 
    

    
} 

.buttons:first-child{
    margin-right:30px;
} 

.buttons:hover{
    cursor:pointer;
}

.buttonIcon{ 
    background-color:white; 
    padding: 5px 10px;  
    border-radius:20px; 
    position: relative; 
    bottom:100px;
    z-index:3;
    
}  

/* Text   */

.content{
    width:90%; 
    margin-bottom:10px; 
    display:flex;  
    flex-direction: column; 
    align-items: center;
    max-width:600px; 
    font-family: 'Inter',sans-serif; 
    font-weight: 300;
    
} 

.content p{ 

    background-image:url("images/pattern-quotes.svg"); 
    background-repeat: no-repeat; 
    background-position: top center;  
    background-size: 12%;
    padding-top:20px;  
    max-width:600px;  
    padding-bottom:50px; 
    
    
} 

.animation{
    animation: fadeIn 1s; 
    
}


#name{
    font-weight: bold;
} 

footer{
    position:absolute; 
    bottom:-5px; 
    left:0px;  
    width:70%; 
    max-width:900px;
   
} 

footer img{

    width:inherit;
} 


@keyframes fadeIn{ 

    from{
        opacity:0;
    } 

    to{
        opacity:1;
    }


}

@media(min-width:1200px){
    .tudo{
        flex-direction: row-reverse; 
        margin-top:50px;
    } 

    .pic{
        width:100%;
    } 

    .content{
        font-size: 20px; 
        position:relative; 
        left:30px;
    } 

    .buttons{
        height:25px;

    } 

    .buttons:first-child{
        margin-right:30px; 
        
    } 

    .buttonIcon{
        bottom:120px; 

    }

}