@media screen and (max-width: 2000px) {
    header nav {
        top: 0px;
    }
    header nav img {
        top: 0px;
        width: 80px;
        height: 80px;
    }
}

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

    main {
        width: 100%;
        left: 0%;
        max-width: 900px;
    }
    .initial-container {
        width: 100%;
        max-width: 900px;
    }
    
    .initial-container h1 {
        font-size: 30px;
        margin-top: 130px;
        white-space: normal; 
        width: 100%; 
        animation: fade 2s ease-in forwards; 
        border-right: none; 
    }


    .initial-container p {
        font-size: 17px;
    }

    
    @keyframes fade {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    
    @keyframes typing {
        from { width: 0; }
        to { width: 100%; }
    }

    .initial-container {
        padding: 0 20px;
    }

    .initial-container p {
        width: 100%;
    }

    .initial-container img {
        width: 30%;
    }
    
    .socials {
        display: flex;
        flex-direction: column;
    }

    #contact-Two {
        height: 100%;
    }

    


    #contact-three {
        height: 100%;
    }

    #contact-three h2 {
        display: flex;
        justify-content: center;
    }

    form {
        width: 100%;
        min-width: 300px;
        
    }
    
    .contact-form {
        flex-direction: column;
        margin: 20px;
        gap: 30px;
    }

    

    .contact-info {
        text-align: center;
    }

    .contact-info .p-es,
    .contact-info .p-en {
        text-align: center;
        margin: 15px auto 30px;
        width: 90%;
        min-width: 250px;
    }

    .contact-info a {
        width: 100%;
        margin: 15px auto;
    }

    

    .contact-form h2 {
        font-size: 28px;
        text-align: center;
    }

    .music-btn {
        display: none;
    }
}

@media screen and (max-width: 769px) {
    .music-btn {
        display: none;
    }
}