.off-screen-menu{
    display:none;
}
.botao{
    z-index: 1000;
}
.my-art{
    font-size: 1.5rem;
}
hr{
    border: 2px solid #ccc;
}
#logo{
    width:70px;
    border-radius: 50%;
}
@media (max-width:700px){
    .my-name{
        font-size: 1.2rem;
    }
    .my-head{
        margin-left:0;
    }
    .my-nav{
        padding-left:0;        
        padding-right:0;
    }
    .myway{
        color:green;
    }
    .border{
        display:none
    }
    .text-display-lg{
        font-size: 2rem;
        line-height: 2.5rem;
    }
    .my-art{
    font-size: .8rem;
    }
    #logo{
    width:40px;
    margin-right:10px;
}        
        .off-screen-menu {
            position: fixed;
            margin-top: 90px;
            left: -100vw;
            width: 100vw;
            max-width: 100vw;
            height: 34vh;
            color: #fff;
            background-color: #258934;
            text-decoration: none;
            display:flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            font-size: 1.2rem;
            transition: 0.3s ease;
            z-index: 999;
            
        }
         .off-screen-menu.active {
            left: 0;
            text-decoration: none;
        } 
        .off-screen-menu, ul, li, a{
            color: #fff;
            text-decoration: none;
            list-style-type: none;
            padding:7px;
        }
        .off-screen-menu li{
            border-bottom: 1px solid #56a078;
            width: 100vw;
        }
        nav {
            padding: 1rem;
            display: flex;
            background-color: #90d57f;
        }
    .ham-menu {
        cursor: pointer;
        right: 40px;
        margin-top: 15px;
        margin-left:10px;

        width: 35px;
        height: 35px;
        position: fixed;
        z-index: 1000;
    }
    .ham-menu span {
        width: 100%;
        height: 3px;
        background-color: #096a4d;
        border-radius: 25px;
        position:absolute;
        top: 50%;
        left:50%;
        transform: translate(-50%, -50%);
        transition: 0.3s ease;
    }
.ham-menu span:nth-child(1) {
    top: 25%;
}
.ham-menu span:nth-child(3) {
    top: 75%;
}
.ham-menu.active span:nth-child(1) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}
.ham-menu.active span:nth-child(2) {
    opacity: 0;
}
.ham-menu.active span:nth-child(3) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
}}