@charset "UTF-8";

:root {
    --color01: #FF9900;
    --color02: #FFE000;
    --color03: #FF4800;
    --color04: #454D4D;
    --color05: #222626;
    --color06: #101111;
    --colortext: rgb(20, 21, 21);

    --font-default: "Noto Sans";
}

main p {
    margin: 10px;
}

main strong {
    color: var(--color01);
}

main article {
    overflow-wrap: break-word;
    padding: 10px 0px;
    margin: 0px;
}

.main-h3 {
    font-size: 1.6em;
}

.main-h1-function {
    font-size: 1.7em;
    margin-bottom: 15px;
}

.main-h2-function {
    margin-top: 0px;
    padding-top: 0px;
    font-size: 1.05em;
}

.articleback {
    max-width: 1150px;
    width: 100%;
    box-sizing: border-box; /* ESSENCIAL para o padding não estourar a largura */
    text-align: center; /* Isso vai centralizar o conteúdo inline/inline-block */
    padding: 10px 10px;
    margin: 25px auto 0 auto;
    background-color: var(--colortext);
    border-radius: 10px;
}

main a {
    color: rgb(12, 255, 12);
    text-decoration: none;
}

main a:hover {
    text-decoration: underline;
}

.spansteps {
    font-weight: bolder;
    color: var(--color02);
}

.warning {
    color: var(--color03);
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* Proporção 4:3 (3/4 = 0.75, então 75%) */
    overflow: hidden;
    max-width: 100%;
    margin: -50px auto; /* Centraliza horizontalmente */
}

.video-container iframe {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
}

.imgs-response {
    max-width: 100%;
    height: auto;
    justify-content: center;
}

@media (max-width: 1400px) {
    .video-container {
        margin: 0px auto;
    }
}