@charset "UTF-8";

        @import url('https://fonts.googleapis.com/css2?family=Passion+One:wght@400;700;900&display=swap');

        @font-face {
    font-family: 'Sriracha';
    src:url('../fontes/Sriracha.ttf.woff') format('woff'),
        url('../fontes/Sriracha.ttf.svg#Sriracha') format('svg'),
        url('../fontes/Sriracha.ttf.eot'),
        url('../fontes/Sriracha.ttf.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
        }

        body {
            background-color: white;
            margin: 0;
        }

        header {
            background-color: black;
            padding: 50px 0;
        }

        header h1, header p {
            font-variant: small-caps;
            color: white;
            text-align: center;
            margin: 0;
        }

        h1 {
            font-family: Passion One, cursive;
            font-size: 7vw;
            font-weight: bolder;
        }

        header p {
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            font-size: 15px;
            font-weight: normal;
            line-height: 1.5;
        }

        header p a {
            color: white;
            font-weight: bold;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        p {
            font-family: 'Sriracha', cursive;
            font-size: 3.5vw;
            line-height: 2;
            margin: 60px 30px;
        }

        section#img01 {
            background-image: url(../imagens/background001.jpg);
        }

        section#img02 {
            background-image: url(../imagens/background002.jpg);
        }

        section#img01 p,
        section#img02 p {
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            background-color: rgba(0, 0, 0, 0.428);
            padding: 5px;
            margin: 30px 50% 10px 30px;
        }

        section#img01,
        section#img02 {
            background-repeat: no-repeat;
            background-position: right center;
            background-size: cover;
            background-attachment: fixed;
            color: white;
            padding: 40px 0;
        }

        footer {
            background-color: black;
            color: white;
            text-align: center;
            padding: 10px 0;
        }

        footer p {
            margin: 0;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            font-size: 14px;;
        }

        footer p a {
            color: white;
            font-weight: bold;
            text-decoration: none;
        }

        /* =========================
        RESPONSIVO (mobile/tablet)
        ========================= */
        @media (max-width: 700px) {

        /* Tipografia: 3.5vw no celular fica pequeno demais */
        p {
            font-size: 18px;      /* ajuste seguro no iPhone */
            line-height: 1.8;
            margin: 40px 20px;
        }

        /* Título do header: 7vw pode ficar ok, mas garantimos limites */
        h1 {
            font-size: 42px;
        }

        /* iOS não suporta bem background-attachment: fixed */
        section#img01,
        section#img02 {
            background-attachment: scroll;  /* fallback correto pro iPhone */
            background-position: center;    /* melhora enquadramento no mobile */
            padding: 60px 0;                /* dá mais “respiro” */
        }

        /* Seu margin: 30px 50% ... deixa o bloco super estreito no celular */
        section#img01 p,
        section#img02 p {
            padding: 5px;
            margin: 30px 40% 10px 15px;
        }
        }

        /* =========================
        iOS Safari específico (extra)
        Ajuda em alguns casos de bug de renderização
        ========================= */
        @supports (-webkit-touch-callout: none) {
        section#img01,
        section#img02 {
            background-attachment: scroll;
        }
        }