html {
    scroll-behavior:smooth;
    font-family:'Lucida Grande', 'Lucida Sans', sans-serif;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.autor {
    margin: 5em auto 8em auto; border-top: 0px dotted #000; margin-top: 8em; padding-top: 5em;
}

a {
    font-family:sans-serif;
    font-size: .8em;
    text-decoration: none;
    font-weight: 100;
    color: black;
}

.logo {
    transition: left 0.5s;

}

a:visited {
    color: black;
}
a:hover {
    background-color: black; color: white;
}



.logo {width: 30%;}
            .logo {transition: width 0.5s ease-in;}
            .textIni {width: 50%; margin: 2em auto 12em auto; font-size: 1.2em;line-height: 1.5;}
            .textIni {transition: width 1s ease-in;}
            .obra > img {transition: width 1s ease-in;}
            
            .legenda {width: 35%; margin: 2em auto 12em auto; font-size: .7em;line-height: 1.3; font-family:'Lucida Grande', 'Lucida Sans', sans-serif; text-align: center; color:#000; letter-spacing: .1em;}
            .legenda2 {width: 50%; margin: 2em auto 5em auto; font-size: .7em;line-height: 1.3; font-family:'Lucida Grande', 'Lucida Sans', sans-serif; text-align: left; color:#000; letter-spacing: .1em;}


    
        @media (max-width: 760px) {

            .logo {width: 75%;}
            .menu {width: 80%;}
            .textIni {width: 70%;}
            .obra > img { width: 80%;}

        }