* {
    margin: 0px;
    padding: 0px;
    border: 0;
    box-sizing: border-box;
    }

    img{
        display: block;
    }

    header{
        padding: 30px 60px 80px 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    #gatopreto{
        width: 100px;
    }

    #burger{
        display: none;
    }

    #box{
        width: 200px;
        display: flex;
        justify-content: space-between;
    }

    a{
        text-decoration: none;
        color: black;
        font-family: roboto;
        font-weight: 500;
    }

    a:hover{
        color:crimson;
    }

    a:active{
        color:purple;
    }

    #gato{
        width: 100%;
        margin: auto;
    }


    @font-face {
        font-family:lobster;
        src:url("tipos/lobster/Lobster-Regular.ttf") format("truetype");
    }

    @font-face {
        font-family:roboto;
        src:url("tipos/roboto/Roboto-VariableFont_wdth\,wght.ttf") format("truetype");
    }

    p{
        font-family: lobster;
    }

    #titulo{
        padding: 70px 0 0 60px;
        font-family: roboto;
        text-decoration: underline;
        text-decoration-style: double;
        text-decoration-thickness: 2px;
    }

    #txt1{
       margin: 60px;
       width: 50%;
    }

    #txt2{
        width: 50%;
        margin-left: 50%;
        padding-right: 60px;
    }

    #box2{
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }

    footer{
        display: flex;
        justify-content: space-between;
        border-top: 7px solid #000;
        margin: 40px 0;
        width: 100%;
        padding: 3%;
    }

    #redes{
        display: flex;
        width: 14%;
        justify-content: space-between;
    }

    #menumobile{
        transition: top .5s;
        background-color: palevioletred;
        position: fixed;
        z-index: 100;
        width: 100%;
        height: 100vh;
        top: -120%;
        left: 0;
    }

@media (max-width:500px) {
    header{
        padding: 30px 10px 80px 10px;
    }

    #burger{
        display: block;
    }

    #box{
        width: 150px;
        display: none;
    }
    
    #titulo{
        padding-left: 10px;
        margin-bottom: 20px;
    }

    #txt1{
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 2%;
        padding-right: 2%;
    }

    #txt2{
        width: 100%;
        padding-left: 2%;
        padding-right: 2%;
        margin-left: 0;
        margin-bottom: 10%;
    }

    footer{
        width: 100%;
        padding-left: 2%;
        margin-left: 0;
        margin-bottom: 10%;
    }

    #redes{
        width: 25%;
    }


    #btfechar{
        width: 13%;
        display: block;
        margin-left: auto;
        padding: 3%;
        padding-top: 8%;
    }

    a{
        font-size: 200%;
        line-height: 200%;
    }

    #bts{
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

  
}