@media (max-width: 1000px) {
    h1 {
        font-size: 1rem;
    }
    
    h2 {
        font-size: 1rem;
    }
    
    h3 {
        font-size: 0.7rem;
    }

    p {
        font-size: 1rem;
    }

    .menu {
        a {
            font-size: 0.8rem;
            
        }
    }
}

@media (max-width: 768px) {

    html {
        padding: 0;
        margin: 0;
        font-size: 20px;
    }

    .header-mobile {
        display: grid;
        position: fixed;
        z-index: 2;
        background-color: white;
        top: 0;
        width: 100%;
        align-items: center;
        border-bottom: 1px solid black;
        grid-template-columns: auto 5rem;
        grid-template-rows: auto auto;
        padding: 0;
        margin: 0;
        column-gap: 0;
        row-gap: 0;

        #logo {
            display: block;
            grid-column: 1;
            grid-row: 1;
            border-right: 1px solid #404030;
            padding: 0.5rem 1.5rem;
            color: #404030;
            
            h1 {
                margin-bottom: 0.3rem;
            }
        }
    }

    .button-mobile {
        grid-column: 2;
        grid-row: 1;
        background: transparent;
        border: none;
        cursor: pointer;
        width: 2rem;
        height: 2rem;
        opacity: 0.6;
        float: left;
        margin: auto;
      
        span {
          display: block;
          width: 100%;
          height: 3px;
          background: #404030;
          margin-top: 3px;
          padding: 0;
        }
    }

    .menu#celular {
        display: block;
        position: relative;
        grid-column: 1 / span 2;
        grid-row: 2;

        ul {
            min-height: 2px;
            overflow: hidden;
            border-top: 1px solid #404030;
            transition: max-height .4s ease;
        }

        li {
            display: block;
            text-align: center;

            a {
                font-size: 20px;
                color: #404030;
                padding: 0.35rem 0;
            }

            a:active {
                background-color: lightgray;
            }
        }

        .open-menu {
            max-height: 400px;
            transition: max-height .4s ease;
        }
    }

    .menu#lateral {
        display: none;
    }

    .container {
        grid-template-columns: 120px auto;
        grid-template-rows: 120px auto;
        column-gap: 1.695vw;
        row-gap: 0vw;
        margin: 4rem 1.5rem 1.5rem 1.5rem;
    }

    .header {
        grid-column: 1 / span 2;
        grid-row: 1;
        grid-template-columns: 120px auto;
    }

    .img-topo {
        display: block;
        grid-column: 1;
        grid-row: 1;
        width: 120px;
        height: 120px;
        padding: 2px 0;
        border-top: 1px solid #404030;
        border-bottom: 1px solid #404030;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .titulo {
        display: block;
        height: 120px;
        grid-column: 2;
        grid-row: 1;
        

        h1 {
            height: 110px;
            text-align: right;
            padding: 44px 0;
            border-top: 1px solid #404030;
            border-bottom: 1px solid #404030;
            margin: 4px 0 4px 1rem;
        }

        h3 {
            display: none;
        }
    }

    .conteudo {
        margin-top: auto;
        grid-column: 1 / span 2;
        grid-row: 2;
    }

    .rodape {
        border-top: 1px solid black;
    }
}

@media (max-width: 390px) {
    html {
        font-size: 18px;
        h1 {
            font-size: 0.8rem;
        }
        
        h2 {
            font-size: 0.8rem;
        }
        
        h3 {
            font-size: 0.7rem;
        }
    
        p {
            font-size: 0.8rem;
        }
    
        .menu {
            a {
                font-size: 0.7rem;
                padding: 0.35rem 0;
            }
        }
    }
    
}